/* ==========================================================================
   HEZARNAVA — Motion tokens
   The vinyl-spin is the brand's signature device (from the Noir Record
   icon) — a continuous, mechanical, real-world rotation, not a UI spinner
   trope. It recurs wherever the brand needs to signal "audio is alive":
   loading states, the audio/podcast player's album art, and hover
   affordances on playable objects. Everything else uses restrained,
   editorial easing — fades and soft rises, no bounce, no overshoot.
   ========================================================================== */

:root {
  /* ---- Durations ---- */
  --duration-instant: 100ms; /* @kind other */
  --duration-fast: 160ms; /* @kind other */
  --duration-base: 240ms; /* @kind other */
  --duration-slow: 420ms; /* @kind other */
  --duration-page: 600ms; /* @kind other */

  /* ---- Easings ---- */
  /* general UI transitions */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  /* entrances */
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1); /* @kind other */
  /* exits */
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  /* soft rise, hero/section reveals */
  --ease-editorial: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */

  /* ---- The vinyl-spin device ---- */
  /* one rotation — the canonical loading/playing spin */
  --spin-duration-rpm33: 1.8s; /* @kind other */
  /* ambient/hover-only spin, e.g. idle album art */
  --spin-duration-slow: 6s; /* @kind other */
  /* constant rotation while "playing" */
  --spin-easing-play: linear; /* @kind other */
  --spin-spinup-duration: 700ms; /* @kind other */
  /* turntable motor spinning up to speed */
  --spin-spinup-easing: var(--ease-decelerate); /* @kind other */
  --spin-spindown-duration: 900ms; /* @kind other */
  /* platter coasting to a stop */
  --spin-spindown-easing: var(--ease-accelerate); /* @kind other */

  /* ---- Hover / press ---- */
  --hover-opacity: 0.82; /* @kind other */
  --press-scale: 0.97; /* @kind other */
  --hover-lift: -2px;
}

@keyframes hz-vinyl-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Utility: apply to any element acting as the record device.
   Idle: paused at rest. Playing: continuous linear spin.
   Toggle by adding/removing .is-playing (spin-up/down handled via
   transition on animation-play-state is not natively tweenable — pair
   with a matching scale/opacity transition using --spin-spinup-duration
   in implementation, see motion guideline card). */
.hz-vinyl {
  animation: hz-vinyl-spin var(--spin-duration-rpm33) var(--spin-easing-play) infinite;
  animation-play-state: paused;
}
.hz-vinyl.is-playing {
  animation-play-state: running;
}