/* Kit dial: the 30 CosNFX character kits ring a round watch screen like a bezel. The screen
   plays the picked kit's idle scene, recorded from the app; it steps clockwise through the kits
   on its own until someone picks one. Used by shop.html (cosnfx.store) and index.html (cosnfx.app);
   behaviour is in kit-dial.js. Set --kit-accent on .kits to match the page. */
@property --kp { syntax: '<number>'; inherits: false; initial-value: 0; }
.kits { --kit-accent: #ff4f7b; }
.kit-dial { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin: 0 auto; }
.kit-dial::before { content: ""; position: absolute; inset: 7%; border-radius: 50%; border: 1px solid rgba(255,255,255,0.07); }
.kit-stage { position: absolute; width: 72%; left: 14%; top: 14%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 0 44px -16px var(--kit-accent), 0 40px 80px -40px rgba(0,0,0,0.9); }
.kit-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kit-stage video.kit-in { animation: kit-in .7s cubic-bezier(.2,.7,.2,1) both; }
.kit-stage video.kit-fade { animation: kit-fade .45s ease both; }
@keyframes kit-in { from { clip-path: circle(0% at 50% 50%); transform: scale(1.06); } to { clip-path: circle(71% at 50% 50%); transform: none; } }
@keyframes kit-fade { from { opacity: 0; } to { opacity: 1; } }
.kit-name { text-align: center; margin: 10px 0 0; font-family: var(--display, inherit); font-size: 19px; color: var(--ink, #fff); }
.kit-picks { position: absolute; inset: 0; }
.kit-picks button { position: absolute; width: 7.2%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: #000;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14); opacity: .66; transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease; }
.kit-picks button img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.kit-picks button:hover { opacity: 1; transform: scale(1.18); }
.kit-picks button:focus-visible { outline: 2px solid var(--ink, #fff); outline-offset: 3px; }
.kit-picks button[aria-pressed="true"] { opacity: 1; transform: scale(1.18); box-shadow: 0 0 0 2px var(--kit-accent), 0 0 16px -2px var(--kit-accent); }
.kit-picks button.ticking { box-shadow: 0 0 0 1px rgba(255,255,255,0.22), 0 0 16px -2px var(--kit-accent); }
.kit-picks button.ticking::after { content: ""; position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(var(--kit-accent) calc(var(--kp) * 1turn), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: kit-tick var(--kit-ms, 4000ms) linear both; }
.kits.hold .kit-picks button.ticking::after { animation-play-state: paused; }
@keyframes kit-tick { from { --kp: 0; } to { --kp: 1; } }
@media (prefers-reduced-motion: reduce) { .kit-picks button { transition: none; } }