@property --km-sweep{syntax: "<angle>"; inherits: false; initial-value: 360deg;}.kdisc{display:block;width:100%;aspect-ratio:1;position:relative}.kdisc .km-ring{position:absolute;top:2%;right:2%;bottom:2%;left:2%;border-radius:50%;pointer-events:none;border:1px solid color-mix(in srgb,var(--cd) 55%,transparent);-webkit-mask:conic-gradient(#000 var(--km-sweep),transparent 0);mask:conic-gradient(#000 var(--km-sweep),transparent 0);transition:opacity .5s cubic-bezier(.4,0,.2,1)}.kdisc[data-ring=off] .km-ring{opacity:0}.kdisc .km-face{position:absolute;top:9%;right:9%;bottom:9%;left:9%;border-radius:50%;background:var(--c);overflow:hidden}.kdisc .km-embl{position:absolute;top:21%;right:21%;bottom:21%;left:21%}.kdisc .km-em{position:absolute;top:0;right:0;bottom:0;left:0;-webkit-mask:url(kaori-mark.png) center / contain no-repeat;mask:url(kaori-mark.png) center / contain no-repeat}.kdisc .km-em--light{background:color-mix(in srgb,var(--c) 66%,#fff);translate:.6px .7px;opacity:.6}.kdisc .km-em--dark{background:color-mix(in srgb,var(--c) 64%,var(--cd))}.kdisc .km-em--sheen{background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.62) 50%,transparent 60%) 130% 0 / 320% 100% no-repeat;animation:km-sheen 9s cubic-bezier(.45,0,.55,1) infinite;animation-delay:var(--km-delay, 0s)}@keyframes km-sheen{0%,58%{background-position:130% 0}to{background-position:-30% 0}}.kdisc.is-arriving .km-face{animation:km-in .8s cubic-bezier(.4,0,.2,1) both}.kdisc.is-arriving .km-embl{animation:km-press 1.1s cubic-bezier(.3,0,.2,1) .26s both}.kdisc.is-arriving .km-ring,.kdisc.is-ringing .km-ring{animation:km-draw 1.2s cubic-bezier(.45,0,.15,1) both}.kdisc.is-leaving{animation:km-out .4s cubic-bezier(.4,0,1,1) both}@keyframes km-in{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}@keyframes km-press{0%{opacity:0;transform:scale(1.14)}to{opacity:1;transform:none}}@keyframes km-draw{0%{--km-sweep: 0deg}to{--km-sweep: 360deg}}@keyframes km-out{to{opacity:0;transform:scale(.95)}}@media(prefers-reduced-motion:reduce){.kdisc .km-em--sheen,.kdisc.is-arriving .km-face,.kdisc.is-arriving .km-embl,.kdisc.is-arriving .km-ring,.kdisc.is-ringing .km-ring,.kdisc.is-leaving{animation:none}.kdisc .km-em--sheen{display:none}}
/*# sourceMappingURL=/cdn/shop/t/6/assets/kdisc-mark.css.map */