/* =============================================================================
 * Kiviland — slider module styles. Owned by kl-slider.js (SPEC D15, D11).
 * Base geometry for .kl-dial / .kl-sphere / .kl-hint lives in kiviland.css;
 * this file adds the module's own states and touches no other module's selectors.
 * Motion is transform/opacity only: 120 / 200 / 300ms on the site's curves.
 * ========================================================================== */

/* ---------------------------------------------------------------- the dial */
/* the dial is a window onto a longer track: the far stops fade at its edges
   instead of being cut, so the track reads as passing through */
@media (min-width: 901px) {
  .kl-dial {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  }
}

/* a programmatic change (the 1 / 2 / 3 keys) wakes the greyed dial so the move is seen */
.kl-dial.is-awake { opacity: 1; filter: none; }

.kl-dial__stop { -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
/* the focus ring sits on the dot, not around the whole 260px stop */
.kl-dial__stop:focus-visible { outline: none; }
.kl-dial__stop:focus-visible .kl-dial__dot { box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--accent); }

/* the eager kivi hops once when eager is chosen. identical to the base rule keyed
   off the stage's data-mode so the two never restart each other */
.kl-dial__stop.is-hopping .kl-dial__still { animation: kl-hop 600ms var(--kl-ease-soft) 1; }

/* the ring gives a small detent as the track clicks into a stop */
.kl-dial__ring { transform-origin: 50% 50%; }
.kl-dial__ring.is-detent { animation: kl-detent 300ms var(--kl-ease-soft) 1; }
@keyframes kl-detent {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* -------------------------------------------------------------- the sphere */
.kl-sphere {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: scale(0.92) translateY(4px);
  /* out: 120ms */
  transition: opacity 120ms var(--ease), transform 120ms var(--ease), border-color 120ms var(--ease);
}
/* in: a 200ms condense */
.kl-sphere.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 200ms var(--kl-ease-soft), transform 200ms var(--kl-ease-soft), border-color 120ms var(--ease);
}
/* held: the sphere lifts 6% and its rim warms to the listening amber */
.kl-sphere.is-in.is-held {
  transform: scale(1.06);
  border-color: var(--kl-state-listening);
  transition: transform 120ms var(--ease), border-color 120ms var(--ease);
}
/* the amber halo swells with your mic level: scale 1 → 1.35 across --kl-held-level 0..1 */
.kl-sphere.is-held::after { transform: scale(calc(1 + 0.35 * var(--kl-held-level, 0))); }
.kl-sphere:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 50%; }

.kl-sphere__stencil { display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; }

/* "hold to talk" after a tap: rises 4px into place, 200ms, gone after 1600ms */
.kl-sphere__caption {
  opacity: 0;
  transform: translate(-50%, -4px);
  pointer-events: none;
  transition: opacity 200ms var(--kl-ease-soft), transform 200ms var(--kl-ease-soft);
}
.kl-sphere__caption.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* no microphone: nothing to hold, so neither the hint nor the sphere is offered */
.kl-stage[data-mic='denied'] .kl-hint { display: none; }
.kl-stage[data-mic='denied'] .kl-sphere { opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .kl-sphere,
  .kl-sphere.is-in,
  .kl-sphere.is-in.is-held,
  .kl-sphere::after,
  .kl-sphere__caption { transition-duration: 1ms; }
  .kl-dial__stop.is-hopping .kl-dial__still,
  .kl-stage .kl-dial .kl-dial__track .kl-dial__stop .kl-dial__still,
  .kl-dial__ring.is-detent { animation: none; }
}