/* ============================================================================
   PREVIOUSLY · pv-motion — ONE motion + micro-interaction family (2026-11-03)
   ----------------------------------------------------------------------------
   Owner order (James, 2026-11-03): "micro interactions that are one family
   throughout the whole website … slight transitions … feel more premium …
   I don't want to change much."

   What this file is: shared timing tokens plus four quiet behaviours that
   every page carrying the canonical header gets (linked once, right after
   bible.css, by bible_header.ensure_bible_header):

     1. Page transitions  — a short cross-fade between pages on ordinary
                            navigations (cross-document View Transitions;
                            browsers without support simply navigate).
     2. Press feedback    — buttons settle by 2% while pressed.
     3. Focus ring        — one gold keyboard-focus ring where a component
                            has not designed its own.
     4. Reduced motion    — visitors who ask their device for less motion
                            get none, on every stylesheet, including the
                            ones that never handled it themselves.

   Safety rules this file keeps:
   - Every selector is wrapped in :where(), so specificity is ZERO. Any
     existing component rule wins over these defaults; nothing designed
     elsewhere is overridden.
   - Press feedback uses the independent `scale` property, never
     `transform`, so it composes with components that already position or
     animate with transform (centered buttons, sliders) instead of
     replacing their transform.
   - No colors beyond the d3 canon (gold #F2BC68). No pill shapes. No
     layout properties. Nothing here changes what a page looks like at rest.
   - pv-seamless swaps (only while audio plays) are not affected: they are
     same-document swaps, and cross-document transitions only run on real
     navigations.

   Signature moments (section 5): five small behaviours that recur across the
   site so it feels like ONE product. Each is a class a component opts into;
   nothing changes until something adopts it.

   Adopting the tokens: new or touched components should use the variables
   below instead of hard-coded timings (the site currently carries ~12
   easing curves and ~12 durations; these are the canonical ones).
   ========================================================================== */

:root {
  /* Easing — --pv-ease is the curve the site already uses most
     (cubic-bezier(.22,.8,.28,1)); --pv-ease-emphasis for entrances. */
  --pv-ease: cubic-bezier(.22, .8, .28, 1);
  --pv-ease-emphasis: cubic-bezier(.22, 1, .36, 1);
  --pv-ease-exit: cubic-bezier(.4, 0, 1, 1);

  /* Durations — quick ≈ the site's dominant .16–.18s hover timing. */
  --pv-dur-instant: 90ms;   /* press, toggle feedback */
  --pv-dur-quick: 160ms;    /* hover, color, small reveals */
  --pv-dur-base: 220ms;     /* menus, panels, page fade */
  --pv-dur-slow: 320ms;     /* sheets, large surfaces */

  --pv-press-scale: .98;
  --pv-gold: #F2BC68;       /* the one accent; "done" moments */
  --pv-live: #F46B62;       /* coral: LIVE STATE ONLY (house law) */
  --pv-live-rgb: 244, 107, 98;
  --pv-focus-ring: #F2BC68;
  --pv-focus-ring-width: 2px;
  --pv-focus-ring-offset: 2px;
}

/* 1. Page transitions ------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
  ::view-transition-old(root) {
    animation: var(--pv-dur-quick) var(--pv-ease-exit) both pv-motion-fade-out;
  }
  ::view-transition-new(root) {
    animation: var(--pv-dur-base) var(--pv-ease) both pv-motion-fade-in;
  }
}
@keyframes pv-motion-fade-out { to { opacity: 0; } }
@keyframes pv-motion-fade-in { from { opacity: 0; } }

/* 2. Press feedback --------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  :where(button, [role="button"], summary,
         input[type="button"], input[type="submit"], input[type="reset"],
         [data-pv-press]):where(:not(:disabled, [aria-disabled="true"])):active {
    scale: var(--pv-press-scale);
  }
}
:where(button, [role="button"], summary, [data-pv-press]) {
  -webkit-tap-highlight-color: transparent;
}

/* 3. Focus ring (keyboard only) ---------------------------------------------- */
:where(a[href], button, input, select, textarea, summary,
       [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: var(--pv-focus-ring-width) solid var(--pv-focus-ring);
  outline-offset: var(--pv-focus-ring-offset);
}

/* 4. Reduced motion, site-wide ----------------------------------------------- */
/* 1ms (not 0) so transitionend/animationend listeners still fire. */
@media (prefers-reduced-motion: reduce) {
  :where(*, *::before, *::after) {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* 5. Signature moments --------------------------------------------------------
   All run only for visitors who allow motion (the reduce block above also
   collapses any that slip through). They animate `translate`, `opacity`,
   `color` and `box-shadow` only; a running animation outranks ordinary
   component declarations, so a class can be added without touching the
   component's own CSS, and it releases the moment it ends. */
@keyframes pv-settle-glow {
  0%   { box-shadow: inset 0 -2px 0 0 rgba(242, 188, 104, 0); }
  35%  { box-shadow: inset 0 -2px 0 0 var(--pv-gold); }
  100% { box-shadow: inset 0 -2px 0 0 rgba(242, 188, 104, 0); }
}
@keyframes pv-live-breathe {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(var(--pv-live-rgb), .55); }
  50%      { opacity: .72; box-shadow: 0 0 8px 2px rgba(var(--pv-live-rgb), 0); }
}
@keyframes pv-flip-in {
  from { opacity: 0; translate: 0 10px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes pv-tick-roll {
  0%   { opacity: .25; translate: 0 -45%; color: var(--pv-gold); }
  60%  { opacity: 1; translate: 0 0; color: var(--pv-gold); }
  100% { translate: 0 0; }
}
@keyframes pv-beat-in {
  from { opacity: 0; translate: 0 8px; }
  to   { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  /* 5a. Gold settle: save / follow / pick confirmed. Add, remove on animationend. */
  :where(.pv-settle) { animation: pv-settle-glow 640ms var(--pv-ease) 1; }

  /* 5b. Live breathing: the ONE live indicator. Sized by the component. */
  :where(.pv-live-dot) { animation: pv-live-breathe 2.4s var(--pv-ease) infinite; }

  /* 5c. Channel flip: new content slides in as the channel changes. */
  :where(.pv-flip-in) { animation: pv-flip-in var(--pv-dur-base) var(--pv-ease-emphasis) 1 both; }

  /* 5d. Score tick: a number changed. pv-tick.js adds the class. */
  :where(.pv-tick) { display: inline-block; animation: pv-tick-roll var(--pv-dur-slow) var(--pv-ease) 1; }

  /* 5e. Beat reveal: children appear one after another ("Previously on"). */
  :where(.pv-beats > *) { animation: pv-beat-in var(--pv-dur-slow) var(--pv-ease) 1 both; }
  :where(.pv-beats > :nth-child(2)) { animation-delay: 90ms; }
  :where(.pv-beats > :nth-child(3)) { animation-delay: 180ms; }
  :where(.pv-beats > :nth-child(4)) { animation-delay: 270ms; }
  :where(.pv-beats > :nth-child(5)) { animation-delay: 360ms; }
  :where(.pv-beats > :nth-child(n+6)) { animation-delay: 450ms; }
}