/* ============================================================
   THE AUTHORITY CODE: Motion foundation (golf 0, "The Quiet Reveal")
   Central duration/easing tokens for every wave after this one.
   Rules for all new motion:
   - Animate ONLY transform and opacity. Never height, width, top,
     left, margin or box-shadow.
   - Every new animation uses these tokens. No hardcoded durations
     or easings in new code.
   - will-change only right before an animation (or not at all).
   Loaded on the pages that carry golf 0 motion (index, sales);
   later waves add the link per page they touch.
   ============================================================ */

:root {
  --dur-micro: 160ms;     /* hover, tap, toggles */
  --dur-enter: 280ms;     /* elements appearing */
  --dur-exit: 200ms;      /* elements leaving */
  --dur-view: 360ms;      /* larger view transitions */
  --dur-progress: 480ms;  /* progress indicators */
  --dur-draw: 420ms;      /* path/line drawing (golf 1 route map) */
  --ease-settle: cubic-bezier(0.4, 0, 0, 1);  /* soft landing */
  --ease-arrive: cubic-bezier(0, 0.4, 0, 1);  /* arrive and slow down */
  --motion-distance: 8px; /* default translateY for reveals */
}

/* Central reduced-motion kill switch: durations collapse to a frame and the
   travel distance to zero. Content stays visible and usable; opacity changes
   become effectively instant, movement disappears entirely. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro: 0.01ms;
    --dur-enter: 0.01ms;
    --dur-exit: 0.01ms;
    --dur-view: 0.01ms;
    --dur-progress: 0.01ms;
    --dur-draw: 0.01ms;
    --motion-distance: 0px;
  }
}

/* ---------- Entrance utilities (staged reveal after data loads) ----------
   JS adds .m-enter before paint, then .is-in (plus a per-element
   transition-delay for the stagger) on the next frame, and removes both when
   the entrance is done so later hover/active transforms are untouched. */
.m-enter {
  opacity: 0;
  transform: translateY(var(--motion-distance));
}
.m-enter--fade { transform: none; }
.m-enter.is-in {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--dur-enter) var(--ease-arrive),
    transform var(--dur-enter) var(--ease-arrive);
}
.m-enter--fade.is-in { transform: none; }

/* Soft crossfade for skeleton holders: fade the placeholders out, then the
   real content enters from .m-enter. Opacity only, so the layout never jumps. */
.m-fade-out {
  opacity: 0;
  transition: opacity var(--dur-exit) var(--ease-settle);
}

/* ---------- Tap feedback (golf 0 surfaces only) ----------
   A quiet press on the Today tappables and the stepped-lesson controls.
   No iOS grey flash; scale only, so nothing reflows. */
.tmain, .tctx, .onb-step, .op-rank, .bp-card,
.lstep-continue, .lstep-back {
  -webkit-tap-highlight-color: transparent;
}
.tmain:active, .tctx:active, .onb-step:active, .op-rank:active,
.bp-card:active, .lstep-continue:active, .lstep-back:active {
  transform: scale(0.97);
  transition: transform var(--dur-micro) var(--ease-settle);
}

/* ============================================================
   Golf 3: cross-document view transitions (progressive
   enhancement). Real page navigations get a quiet crossfade:
   the old page fades out fast, the new one fades in over
   --dur-view with a few px of settle. The shared topbar is
   snapshotted separately so it stays still while the content
   changes. Browsers without support ignore all of this and
   navigate exactly as before. No SW involvement; this is
   renderer-side only.
   ============================================================ */
@view-transition {
  navigation: auto;
}

/* The topbar keeps its own snapshot: a near-static crossfade so the
   frame of the app reads as one continuous surface. */
.topbar {
  view-transition-name: topbar;
}
::view-transition-old(topbar),
::view-transition-new(topbar) {
  animation-duration: var(--dur-micro);
  animation-timing-function: var(--ease-settle);
}

/* The page content: out fast and quiet, in with a soft arrival.
   The incoming first paint is each page's skeleton/spinner, so this
   crossfade is finished before any page's own entrance begins. */
::view-transition-old(root) {
  animation: vt-out var(--dur-exit) var(--ease-settle) both;
}
::view-transition-new(root) {
  animation: vt-in var(--dur-view) var(--ease-arrive) both;
}
@keyframes vt-out {
  to { opacity: 0; }
}
@keyframes vt-in {
  from {
    opacity: 0;
    transform: translateY(var(--motion-distance));
  }
}

/* Reduced motion: no transition movement at all; the swap is instant
   and navigation stays fully functional. (The token collapse above
   already shortens the durations; this removes the animations.) */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-image-pair(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}