/* playback.kids — shared styles
 * Mirrors the in-app palette so the marketing surface and the product feel
 * like the same thing. Mobile-first; one breakpoint at 720px.
 */

:root {
  --bg: #FBFAF6;
  --surface: #FFFFFF;
  --ink: #1F2A24;
  --ink-soft: #5A6661;
  --ink-muted: #8C9690;
  --border: #E7E2D5;
  --primary: #3FA66A;
  --primary-dark: #2E8553;
  --primary-soft: #E5F3EB;
  --warm: #C9A96A;
  --warm-soft: #F4ECD6;
  --danger: #C66B6B;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --max: 720px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--primary-dark);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease;
}
a:hover { border-bottom-color: var(--primary-dark); }

img { max-width: 100%; display: block; }

/* ---------- header ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.3px;
  color: var(--ink);
  border: none;
}
.brand::before {
  content: "▶ ";
  color: var(--primary);
}
.site-nav {
  display: flex;
  gap: 20px;
  font-size: 14px;
}
.site-nav a {
  color: var(--ink-soft);
  border: none;
}
.site-nav a:hover { color: var(--primary-dark); }

/* ---------- hero ---------- */
.hero {
  text-align: center;
  padding: 64px 24px 56px;
  border-bottom: 1px solid var(--border);
}
.hero .eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--primary-dark);
  font-weight: 700;
  margin-bottom: 12px;
}
.hero h1 {
  font-size: 44px;
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin: 0 0 16px;
  color: var(--ink);
}
.hero .lede {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 540px;
  margin: 0 auto 28px;
}
.hero .cta-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 120ms ease, opacity 120ms ease;
}
.btn:hover { transform: translateY(-1px); opacity: 0.95; border-bottom-color: transparent; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--border); }

/* ---------- sections ---------- */
section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 48px 24px;
}
section h2 {
  font-size: 28px;
  letter-spacing: -0.6px;
  margin: 0 0 12px;
}
section p { font-size: 17px; color: var(--ink-soft); }

/* ---------- animated phone mockup ---------- */
/* 12-second loop. Pure CSS — no JS, no images. Five phases:
 *
 *  Time-%   What happens
 *  ───────  ────────────────────────────────────────────────────
 *  0–8     | Photo "uploads" into the photo slot
 *  8–30    | Raw text shown (cursor blinking)
 *  30–42   | Polish button taps; "Polishing…" status
 *  42–62   | Polished text fades in; tag pills appear
 *  62–70   | Save button taps
 *  70–92   | Saved-card view slides in from the right
 *  92–100  | Reset back to entry view
 *
 * All keyframes share the same 12s duration so they stay in sync.
 * Respect prefers-reduced-motion: locks to the saved-card state.
 */
.demo-section {
  text-align: center;
  padding: 24px 24px 48px;
}
.demo-section h2 { margin-bottom: 8px; }
.demo-section > p { margin: 0 auto 32px; max-width: 480px; }

.phone-mockup {
  display: flex;
  justify-content: center;
  perspective: 1200px;
}

.phone-frame {
  width: 280px;
  height: 600px;
  background: #1F2A24;
  border-radius: 36px;
  padding: 14px;
  box-shadow:
    0 30px 60px -20px rgba(31, 42, 36, 0.35),
    0 0 0 1px rgba(31, 42, 36, 0.1);
  position: relative;
  transform: rotate(-2deg);
}

.phone-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 22px;
  background: #1F2A24;
  border-radius: 0 0 14px 14px;
  z-index: 2;
}

.phone-screen {
  width: 100%;
  height: 100%;
  background: var(--bg);
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}

/* The two views are stacked. Each fades+slides in/out on its own timeline. */
.screen-entry,
.screen-saved {
  position: absolute;
  inset: 0;
  padding: 38px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.screen-entry { animation: phoneScreenEntry 12s ease-in-out infinite; }
.screen-saved {
  opacity: 0;
  transform: translateX(20px);
  animation: phoneScreenSaved 12s ease-in-out infinite;
}

.screen-brand {
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.2px;
}

.screen-meta {
  font-size: 12px;
  color: var(--ink-soft);
}
.screen-meta strong { color: var(--ink); }

.screen-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.screen-label {
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 700;
}

/* ---- photo slot ---- */
.photo-slot {
  width: 100%;
  height: 88px;
  border-radius: 10px;
  border: 1.5px dashed var(--border);
  background: var(--bg);
  position: relative;
  overflow: hidden;
  animation: phonePhotoSlot 12s ease-in-out infinite;
}
.photo-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--ink-muted);
  opacity: 1;
  animation: phonePhotoEmpty 12s ease-in-out infinite;
}
.photo-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1.05);
  animation: phonePhotoFill 12s ease-in-out infinite;
}

/* ---- memory area ---- */
.memory-area {
  position: relative;
  min-height: 96px;
  flex: 1;
}

.memory-raw,
.memory-polished {
  position: absolute;
  inset: 0;
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink);
}
.memory-raw {
  color: var(--ink-soft);
  animation: phoneRawText 12s ease-in-out infinite;
}
.memory-polished {
  opacity: 0;
  transform: translateY(6px);
  animation: phonePolishedText 12s ease-in-out infinite;
}

.memory-cursor {
  display: inline-block;
  width: 1.5px;
  height: 13px;
  background: var(--primary);
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 1px;
  animation: phoneCursor 12s linear infinite;
}

.polish-status {
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--primary-dark);
  font-weight: 600;
  opacity: 0;
  animation: phonePolishStatus 12s ease-in-out infinite;
}

.screen-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.screen-tag {
  font-size: 10px;
  font-weight: 600;
  background: var(--primary-soft);
  color: var(--primary-dark);
  padding: 3px 8px;
  border-radius: 999px;
  opacity: 0;
  animation: phoneTagFade 12s ease-in-out infinite;
}
.screen-entry .screen-tag:nth-child(2) { animation-delay: 0.15s; }

.screen-actions { display: flex; gap: 8px; }
.btn-polish,
.btn-save {
  flex: 1;
  padding: 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: none;
  cursor: default;
}
.btn-polish {
  background: var(--surface);
  border: 1px solid var(--primary);
  color: var(--primary-dark);
  animation: phonePolishBtn 12s ease-in-out infinite;
}
.btn-save {
  background: var(--primary);
  color: #fff;
  animation: phoneSaveBtn 12s ease-in-out infinite;
}

/* ---- saved view ---- */
.saved-toast {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  animation: phoneSavedToast 12s ease-in-out infinite;
}

.saved-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.saved-thumb { width: 100%; height: 110px; display: block; }
.saved-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px 0;
}
.saved-head strong { font-size: 14px; color: var(--ink); }
.saved-score {
  background: var(--primary-soft);
  color: var(--primary-dark);
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.saved-date {
  padding: 0 12px;
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 2px;
}
.saved-memory {
  padding: 8px 12px 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  flex: 1;
}
.saved-card .screen-tags { padding: 8px 12px 12px; }

/* ─── Keyframes (12s shared timeline) ────────────────────────────────── */

@keyframes phoneScreenEntry {
  0%, 65%   { opacity: 1; transform: translateX(0); }
  72%, 92%  { opacity: 0; transform: translateX(-24px); }
  98%, 100% { opacity: 1; transform: translateX(0); }
}
@keyframes phoneScreenSaved {
  0%, 65%   { opacity: 0; transform: translateX(24px); }
  72%, 92%  { opacity: 1; transform: translateX(0); }
  98%, 100% { opacity: 0; transform: translateX(24px); }
}

@keyframes phonePhotoSlot {
  0%, 4%   { border-color: var(--border); }
  6%, 8%   { border-color: var(--primary); border-style: solid; }
  10%, 100% { border-color: var(--border); border-style: solid; }
}
@keyframes phonePhotoEmpty {
  0%, 5%   { opacity: 1; transform: scale(1); }
  7%, 100% { opacity: 0; transform: scale(0.8); }
}
@keyframes phonePhotoFill {
  0%, 4%   { opacity: 0; transform: scale(1.05); }
  10%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes phoneRawText {
  0%, 6%   { opacity: 0; }
  10%, 28% { opacity: 1; }
  35%, 100% { opacity: 0; }
}
@keyframes phonePolishedText {
  0%, 38%  { opacity: 0; transform: translateY(6px); }
  46%, 60% { opacity: 1; transform: translateY(0); }
  66%, 100% { opacity: 0; transform: translateY(6px); }
}
@keyframes phoneCursor {
  /* Blink during raw phase only (10–28%) */
  0%, 9%    { opacity: 0; }
  10%, 12%  { opacity: 1; }
  13%, 15%  { opacity: 0; }
  16%, 18%  { opacity: 1; }
  19%, 21%  { opacity: 0; }
  22%, 24%  { opacity: 1; }
  25%, 100% { opacity: 0; }
}

@keyframes phonePolishBtn {
  0%, 28%   { background: var(--surface); transform: scale(1); box-shadow: none; }
  32%       { background: var(--primary-soft); transform: scale(0.95); box-shadow: 0 0 0 6px rgba(63,166,106,0.18); }
  38%       { background: var(--primary-soft); transform: scale(1); box-shadow: 0 0 16px rgba(63,166,106,0.45); }
  46%, 100% { background: var(--surface); transform: scale(1); box-shadow: none; }
}
@keyframes phonePolishStatus {
  0%, 30%   { opacity: 0; }
  36%, 44%  { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes phoneTagFade {
  0%, 48%  { opacity: 0; transform: translateY(4px); }
  56%, 65% { opacity: 1; transform: translateY(0); }
  72%, 100% { opacity: 0; transform: translateY(4px); }
}

@keyframes phoneSaveBtn {
  0%, 60%   { background: var(--primary); transform: scale(1); }
  64%       { background: var(--primary-dark); transform: scale(0.95); }
  68%, 100% { background: var(--primary); transform: scale(1); }
}

@keyframes phoneSavedToast {
  0%, 70%  { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  76%, 88% { opacity: 1; transform: translateX(-50%) translateY(0); }
  93%, 100% { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}

/* Reduced-motion: lock to a static saved-card state; no animation, no flicker. */
@media (prefers-reduced-motion: reduce) {
  .screen-entry { animation: none; opacity: 0; }
  .screen-saved { animation: none; opacity: 1; transform: none; }
  .saved-toast,
  .photo-empty,
  .photo-fill,
  .memory-raw,
  .memory-polished,
  .memory-cursor,
  .polish-status,
  .screen-tag,
  .btn-polish,
  .btn-save,
  .photo-slot { animation: none; }
  .photo-fill { opacity: 1; transform: none; }
  .photo-empty { opacity: 0; }
  .memory-polished { opacity: 1; transform: none; }
  .screen-tag { opacity: 1; transform: none; }
}

/* Smaller viewport: shrink the phone so it fits under 360px without scroll. */
@media (max-width: 380px) {
  .phone-frame { width: 240px; height: 510px; transform: rotate(-1.5deg); }
  .screen-entry, .screen-saved { padding: 32px 14px 14px; }
  .screen-brand { font-size: 13px; }
  .memory-raw, .memory-polished, .saved-memory { font-size: 11px; }
  .photo-slot, .saved-thumb { height: 72px; }
}

/* ---------- iPad-style tablet frame ---------- */
/* Wraps the journey card. Larger landscape device deliberately contrasts with
 * the portrait phone mockup above — phone = entry workflow, tablet = the
 * bigger picture (whole-season map). */

.tablet-mockup {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

.tablet-frame {
  width: 100%;
  max-width: 640px;
  aspect-ratio: 4 / 3;
  background: #1F2A24;
  border-radius: 28px;
  padding: 16px;
  position: relative;
  box-shadow:
    0 40px 80px -28px rgba(31, 42, 36, 0.40),
    0 0 0 1px rgba(31, 42, 36, 0.1);
}

.tablet-camera {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0a0e0c;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.04);
}

.tablet-screen {
  width: 100%;
  height: 100%;
  background: var(--bg);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tablet-home {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

/* Override the journey card's own border/shadow when nested in the tablet —
 * the tablet frame provides those, so doubling looks heavy. The card stretches
 * to fill the screen instead of being a smaller chip inside it. */
.tablet-screen .journey-card {
  flex: 1;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.tablet-screen .journey-map {
  flex: 1;
  min-height: 0;
  display: flex;
}
.tablet-screen .journey-map svg {
  width: 100%;
  height: 100%;
  flex: 1;
}

.tablet-screen .journey-head {
  background: var(--surface);
}

/* Tablet shrinks down on narrower viewports; aspect ratio holds */
@media (max-width: 520px) {
  .tablet-frame { padding: 10px; border-radius: 18px; }
  .tablet-screen { border-radius: 10px; }
  .tablet-home { width: 70px; height: 3px; bottom: 3px; }
  .tablet-camera { top: 4px; width: 4px; height: 4px; }
}

/* ---------- journey card (animated map) ---------- */
/* 14-second loop showing 4 game venues pinned on a stylized map. Pins drop
 * in sequence, dashed trail draws between them, miles counter pulses up at
 * the end. Same approach as the phone mockup — pure CSS/SVG.
 *
 *  Time-%   What happens
 *  ───────  ──────────────────────────────────────────────
 *  0–8     | Empty map fades in
 *  8–15    | Pin 1 drops (Home field, Sep 14)
 *  15–25   | Trail extends 25% (toward pin 2)
 *  25–32   | Pin 2 drops (Riverside, Oct 5)
 *  32–42   | Trail extends to 50%
 *  42–49   | Pin 3 drops (Westwood, Oct 22)
 *  49–60   | Trail extends to 75%
 *  60–67   | Pin 4 drops (Lakefront, Nov 8)
 *  67–80   | Trail completes (100%)
 *  80–88   | "47 miles" stat pulses
 *  88–100  | Hold, then reset
 *
 * Venue chips in the footer fade in with matching delays.
 */

.journey-section {
  text-align: center;
  padding: 24px 24px 48px;
  max-width: 760px;
  margin: 0 auto;
}
.journey-section h2 { margin-bottom: 8px; }
.journey-section > p { margin: 0 auto 28px; max-width: 520px; }

.journey-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: left;
  box-shadow: 0 12px 28px -16px rgba(31,42,36,0.18);
}

.journey-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.journey-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.journey-meta strong { color: var(--ink); font-size: 15px; }
.journey-sport {
  color: var(--ink-soft);
  font-size: 13px;
}
.journey-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-soft);
}
.journey-stat b { color: var(--ink); font-weight: 700; }
.journey-miles {
  color: var(--primary-dark);
  background: var(--primary-soft);
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 600;
  animation: journeyMiles 14s ease-in-out infinite;
}
.journey-miles b { color: var(--primary-dark); }

/* Mileage ticker — five values stacked at the same position, only one visible
 * at a time. As each pin lands, the next value flips into place, so the number
 * actually counts up through the journey: 0 → 12 → 23 → 35 → 47. */
.miles-num {
  display: inline-block;
  position: relative;
  width: 1.6em;
  text-align: right;
  vertical-align: bottom;
}
.m-stage {
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0;
  color: inherit;
  font-weight: 700;
}
.m-stage:first-child { position: relative; } /* reserves layout space */
.m0 { animation: mStage0 14s steps(1, end) infinite; }
.m1 { animation: mStage1 14s steps(1, end) infinite; }
.m2 { animation: mStage2 14s steps(1, end) infinite; }
.m3 { animation: mStage3 14s steps(1, end) infinite; }
.m4 { animation: mStage4 14s steps(1, end) infinite; }

@keyframes mStage0 { 0%, 6%   { opacity: 1; } 7%, 100% { opacity: 0; } }
@keyframes mStage1 { 0%, 6%   { opacity: 0; } 7%, 22%  { opacity: 1; } 23%, 100% { opacity: 0; } }
@keyframes mStage2 { 0%, 22%  { opacity: 0; } 23%, 39% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes mStage3 { 0%, 39%  { opacity: 0; } 40%, 56% { opacity: 1; } 57%, 100% { opacity: 0; } }
@keyframes mStage4 { 0%, 56%  { opacity: 0; } 57%, 91% { opacity: 1; } 92%, 100% { opacity: 0; } }

.journey-map {
  width: 100%;
  background: var(--bg);
  overflow: hidden;
}
.journey-map svg { display: block; width: 100%; height: auto; }

/* "Camera" pan + zoom across the map. Gentle wandering motion during the
 * 0–65% phase, then a dramatic pull-back at 65–80% when the trail completes,
 * revealing the whole journey at once. The breathing motion makes the map
 * feel alive instead of static. */
.tablet-screen .journey-map svg {
  animation: mapCamera 14s ease-in-out infinite;
  transform-origin: center center;
  transform-box: fill-box;
}
@keyframes mapCamera {
  /* Each phase pans gently toward the active pin region while slightly zoomed in */
  0%      { transform: scale(1.08) translate(3%, -3%); }   /* near pin 1 (lower-left) */
  20%     { transform: scale(1.08) translate(0%, 4%);  }   /* toward pin 2 (upper-middle) */
  38%     { transform: scale(1.08) translate(-3%, -1%); }  /* toward pin 3 (middle-right) */
  56%     { transform: scale(1.08) translate(-6%, 5%); }   /* toward pin 4 (upper-right) */
  70%     { transform: scale(1.0) translate(0, 0); }       /* PULL BACK — wide shot */
  88%     { transform: scale(1.0) translate(0, 0); }       /* hold the wide shot */
  100%    { transform: scale(1.08) translate(3%, -3%); }   /* loop back to start */
}

/* Subtle grid drift — adds ambient motion to the background even when nothing
 * else is happening. Slow, barely perceptible, gives a "live feed" feel. */
.tablet-screen .journey-map svg rect[fill="url(#grid)"] {
  animation: gridDrift 28s linear infinite;
  transform-origin: center;
}
@keyframes gridDrift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-40px, 40px); }
}

/* Pin sonar ripples — radial pulse outward from each pin position when it
 * lands. Each ripple fires in sync with its pin's drop animation. */
.pin-ripple {
  opacity: 0;
  pointer-events: none;
}
.ripple-1 { animation: pinRipple1 14s ease-out infinite; }
.ripple-2 { animation: pinRipple2 14s ease-out infinite; }
.ripple-3 { animation: pinRipple3 14s ease-out infinite; }
.ripple-4 { animation: pinRipple4 14s ease-out infinite; }

@keyframes pinRipple1 {
  0%, 5%    { r: 9;  opacity: 0; stroke-width: 2; }
  7%        { r: 11; opacity: 0.75; stroke-width: 2; }
  16%       { r: 28; opacity: 0; stroke-width: 0.5; }
  100%      { r: 9;  opacity: 0; }
}
@keyframes pinRipple2 {
  0%, 21%   { r: 9;  opacity: 0; stroke-width: 2; }
  23%       { r: 11; opacity: 0.75; stroke-width: 2; }
  32%       { r: 28; opacity: 0; stroke-width: 0.5; }
  100%      { r: 9;  opacity: 0; }
}
@keyframes pinRipple3 {
  0%, 38%   { r: 9;  opacity: 0; stroke-width: 2; }
  40%       { r: 11; opacity: 0.75; stroke-width: 2; }
  49%       { r: 28; opacity: 0; stroke-width: 0.5; }
  100%      { r: 9;  opacity: 0; }
}
@keyframes pinRipple4 {
  0%, 55%   { r: 9;  opacity: 0; stroke-width: 2; }
  57%       { r: 11; opacity: 0.75; stroke-width: 2; }
  66%       { r: 28; opacity: 0; stroke-width: 0.5; }
  100%      { r: 9;  opacity: 0; }
}

/* Pins start invisible, drop in via scale+opacity */
.pin {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
}
.pin circle { filter: drop-shadow(0 2px 3px rgba(31,42,36,0.25)); }
.pin text { letter-spacing: -0.2px; }
.pin-1 { animation: pinDrop 14s ease-out infinite; }
.pin-2 { animation: pinDrop 14s ease-out infinite; animation-delay: 2.4s; }
.pin-3 { animation: pinDrop 14s ease-out infinite; animation-delay: 4.8s; }
.pin-4 { animation: pinDrop 14s ease-out infinite; animation-delay: 7.2s; }

.journey-trail {
  stroke-dashoffset: 100;
  stroke-dasharray: 1 2;  /* short dashes for "trail" look — overridden by JS-less wizardry below */
  animation: trailDraw 14s ease-in-out infinite;
}

.journey-venues {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--border);
}
.journey-venue {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(4px);
}
.v-1 { animation: venueFade 14s ease-out infinite; }
.v-2 { animation: venueFade 14s ease-out infinite; animation-delay: 2.4s; }
.v-3 { animation: venueFade 14s ease-out infinite; animation-delay: 4.8s; }
.v-4 { animation: venueFade 14s ease-out infinite; animation-delay: 7.2s; }

/* Keyframes — each runs over 14s but most reset at 92% for the loop cycle. */

@keyframes pinDrop {
  /* Pin starts above target, drops into place with overshoot */
  0%      { opacity: 0; transform: translateY(-12px) scale(0.5); }
  4%      { opacity: 1; transform: translateY(0) scale(1.2); }
  6%      { transform: translateY(0) scale(0.95); }
  8%, 80% { transform: translateY(0) scale(1); opacity: 1; }
  92%, 100% { opacity: 0; transform: translateY(-12px) scale(0.5); }
}

@keyframes trailDraw {
  0%, 7%   { stroke-dashoffset: 100; opacity: 0.6; }
  68%      { stroke-dashoffset: 0; opacity: 0.85; }
  80%      { stroke-dashoffset: 0; opacity: 0.85; }
  92%, 100% { stroke-dashoffset: 100; opacity: 0; }
}

@keyframes venueFade {
  0%      { opacity: 0; transform: translateY(6px); }
  4%      { opacity: 1; transform: translateY(0); }
  80%     { opacity: 1; transform: translateY(0); }
  92%, 100% { opacity: 0; transform: translateY(6px); }
}

@keyframes journeyMiles {
  /* Pulse when the trail completes at ~75% */
  0%, 72%   { background: var(--primary-soft); transform: scale(1); }
  76%       { background: var(--primary); color: #fff; transform: scale(1.12); }
  78%       { transform: scale(1); }
  82%, 92%  { background: var(--primary-soft); color: var(--primary-dark); transform: scale(1); }
  100%      { background: var(--primary-soft); color: var(--primary-dark); transform: scale(1); }
}
.journey-miles { transition: none; }
.journey-miles b { transition: none; }

/* Reduced-motion: lock to final state, no movement */
@media (prefers-reduced-motion: reduce) {
  .pin,
  .pin-1, .pin-2, .pin-3, .pin-4,
  .pin-ripple, .ripple-1, .ripple-2, .ripple-3, .ripple-4,
  .journey-trail,
  .journey-venue,
  .v-1, .v-2, .v-3, .v-4,
  .journey-miles,
  .m0, .m1, .m2, .m3, .m4,
  .tablet-screen .journey-map svg,
  .tablet-screen .journey-map svg rect[fill="url(#grid)"] { animation: none; }
  .pin { opacity: 1; transform: none; }
  .pin-ripple { opacity: 0; }
  .journey-trail { stroke-dashoffset: 0; opacity: 0.85; }
  .journey-venue { opacity: 1; transform: none; }
  .m0, .m1, .m2, .m3 { opacity: 0; }
  .m4 { opacity: 1; }
  .tablet-screen .journey-map svg { transform: none; }
}

/* Mobile: stack stats vertically when the head row gets too tight */
@media (max-width: 520px) {
  .journey-head { flex-direction: column; gap: 8px; }
  .journey-stats { width: 100%; }
}

/* ---------- career card (multi-year growth chart) ---------- */
/* 13-second loop showing 5 years of a kid's playing career as a stacked bar
 * chart. Bars grow left-to-right in sequence; the latest year pulses as
 * "in progress"; totals strip flashes at the climax.
 *
 *  Time-%   What happens
 *  ───────  ─────────────────────────────────────────
 *  0–6     | Empty card fades in
 *  6–16    | Year 2023 bar grows; count fades in
 *  16–28   | Year 2024 bar grows
 *  28–42   | Year 2025 bar grows
 *  42–56   | Year 2026 bar grows
 *  56–66   | Year 2027 "in progress" pulse appears
 *  66–82   | Totals row fades in; "44 memories" pulses
 *  82–92   | Hold
 *  92–100  | Reset
 */

.career-section {
  text-align: center;
  padding: 24px 24px 48px;
  max-width: 760px;
  margin: 0 auto;
}
.career-section h2 { margin-bottom: 8px; }
.career-section > p { margin: 0 auto 28px; max-width: 540px; }

.career-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: left;
  box-shadow: 0 12px 28px -16px rgba(31,42,36,0.18);
  overflow: hidden;
}

.career-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.career-meta { display: flex; align-items: baseline; gap: 8px; }
.career-meta strong { color: var(--ink); font-size: 15px; }
.career-since { color: var(--ink-soft); font-size: 12px; }
.career-legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--ink-soft); }
.career-leg { white-space: nowrap; }

.career-chart {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.career-row {
  display: grid;
  grid-template-columns: 44px 48px 1fr auto;
  align-items: center;
  gap: 10px;
}

.career-year {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.2px;
}
.career-sport { font-size: 14px; line-height: 1; }

.career-track {
  height: 14px;
  background: var(--bg);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}

.career-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--primary);
  border-radius: 999px;
}

/* Each year fills to a different target width, in sequence. Targets are
 * proportional to games played (4 → 22%, 8 → 36%, 14 → 60%, 18 → 78%, 2027
 * starts at 25% then pulses to show "ongoing"). */
.f1 { animation: careerBar1 13s ease-out infinite; }
.f2 { animation: careerBar2 13s ease-out infinite; }
.f3 { animation: careerBar3 13s ease-out infinite; }
.f4 { animation: careerBar4 13s ease-out infinite; }
.f5 { animation: careerBar5 13s ease-in-out infinite; background: var(--warm); }

.career-count {
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-4px);
}
.c1 { animation: careerCount 13s ease-out infinite; }
.c2 { animation: careerCount 13s ease-out infinite; animation-delay: 1.4s; }
.c3 { animation: careerCount 13s ease-out infinite; animation-delay: 2.8s; }
.c4 { animation: careerCount 13s ease-out infinite; animation-delay: 4.2s; }
.c5 { animation: careerCount 13s ease-out infinite; animation-delay: 5.8s; color: var(--warm); font-style: italic; }

.career-current .career-year,
.career-current .career-count { color: var(--warm); }
.career-current .career-track { background: rgba(201, 169, 106, 0.08); }

.career-totals {
  display: flex;
  gap: 8px 14px;
  flex-wrap: wrap;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  font-size: 12px;
  color: var(--ink-soft);
}
.career-tot {
  opacity: 0;
  transform: translateY(4px);
}
.career-tot b { color: var(--ink); font-weight: 700; }
.t1 { animation: careerTot 13s ease-out infinite; animation-delay: 8.0s; }
.t2 { animation: careerTot 13s ease-out infinite; animation-delay: 8.2s; }
.t3 { animation: careerTot 13s ease-out infinite; animation-delay: 8.4s; }
.t4 { animation: careerTot 13s ease-out infinite; animation-delay: 8.6s; }
.career-hero {
  background: var(--primary-soft);
  color: var(--primary-dark);
  padding: 2px 12px;
  border-radius: 999px;
  font-weight: 700;
  animation: careerHero 13s ease-in-out infinite;
}
.career-hero b { color: var(--primary-dark); }

/* ─── Career keyframes ───────────────────────────────────────────────── */

@keyframes careerBar1 {
  0%, 6%   { width: 0; }
  16%, 90% { width: 22%; }
  94%, 100% { width: 0; }
}
@keyframes careerBar2 {
  0%, 16%  { width: 0; }
  28%, 90% { width: 36%; }
  94%, 100% { width: 0; }
}
@keyframes careerBar3 {
  0%, 28%  { width: 0; }
  42%, 90% { width: 60%; }
  94%, 100% { width: 0; }
}
@keyframes careerBar4 {
  0%, 42%  { width: 0; }
  56%, 90% { width: 78%; }
  94%, 100% { width: 0; }
}
@keyframes careerBar5 {
  /* "In progress" — fills to 28% then gently pulses */
  0%, 56%  { width: 0; opacity: 0.7; }
  64%, 72% { width: 28%; opacity: 1; }
  78%, 86% { width: 32%; opacity: 0.7; }
  90%      { width: 28%; opacity: 0.85; }
  94%, 100% { width: 0; opacity: 0.7; }
}

@keyframes careerCount {
  0%, 8%   { opacity: 0; transform: translateX(-4px); }
  16%, 90% { opacity: 1; transform: translateX(0); }
  94%, 100% { opacity: 0; transform: translateX(-4px); }
}

@keyframes careerTot {
  0%, 60%  { opacity: 0; transform: translateY(4px); }
  68%, 90% { opacity: 1; transform: translateY(0); }
  94%, 100% { opacity: 0; transform: translateY(4px); }
}

@keyframes careerHero {
  /* Pulse the headline stat for emphasis */
  0%, 65%  { opacity: 0; transform: scale(0.96); background: var(--primary-soft); color: var(--primary-dark); }
  72%      { opacity: 1; transform: scale(1.15); background: var(--primary); color: #fff; }
  76%      { transform: scale(1); }
  82%, 90% { opacity: 1; transform: scale(1); background: var(--primary-soft); color: var(--primary-dark); }
  94%, 100% { opacity: 0; transform: scale(0.96); }
}
.career-hero b {
  /* Match the color change during pulse */
  animation: careerHeroNum 13s ease-in-out infinite;
}
@keyframes careerHeroNum {
  0%, 65%  { color: var(--primary-dark); }
  72%, 76% { color: #fff; }
  82%, 100% { color: var(--primary-dark); }
}

/* Reduced-motion: show final state, no animation */
@media (prefers-reduced-motion: reduce) {
  .career-fill,
  .career-count,
  .career-tot,
  .career-hero,
  .career-hero b { animation: none; }
  .f1 { width: 22%; }
  .f2 { width: 36%; }
  .f3 { width: 60%; }
  .f4 { width: 78%; }
  .f5 { width: 28%; }
  .career-count, .career-tot { opacity: 1; transform: none; }
  .career-hero { opacity: 1; transform: none; }
}

/* Mobile: tighter row layout */
@media (max-width: 520px) {
  .career-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .career-row { grid-template-columns: 38px 36px 1fr auto; gap: 8px; }
  .career-year { font-size: 11px; }
  .career-sport { font-size: 12px; }
  .career-count { font-size: 10px; }
}

/* ---------- feature grid ---------- */
.features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 24px;
}
@media (min-width: 720px) {
  .features { grid-template-columns: 1fr 1fr; }
}
.feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.feature h3 {
  font-size: 17px;
  margin: 0 0 6px;
  color: var(--ink);
}
.feature p { font-size: 15px; color: var(--ink-soft); margin: 0; }

/* ---------- FAQ ---------- */
/* <details>/<summary> accordion. Matches the .feature card surface. */
.faq {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0 20px;
}
.faq summary {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  padding: 18px 28px 18px 0;
  position: relative;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--primary);
}
.faq details[open] summary::after { content: "\2013"; } /* en dash when open */
.faq details p {
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0;
  padding: 0 0 18px;
}

/* ---------- legal ---------- */
.legal {
  max-width: var(--max);
  margin: 0 auto;
  padding: 32px 24px 64px;
}
.legal h1 {
  font-size: 32px;
  letter-spacing: -0.8px;
  margin-bottom: 8px;
}
.legal h2 {
  font-size: 20px;
  margin-top: 36px;
  letter-spacing: -0.3px;
}
.legal h3 {
  font-size: 16px;
  margin-top: 24px;
  color: var(--ink);
}
.legal p, .legal li { font-size: 15px; color: var(--ink); }
.legal table {
  border-collapse: collapse;
  width: 100%;
  margin: 16px 0;
  font-size: 14px;
}
.legal th, .legal td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.legal th {
  background: var(--warm-soft);
  font-weight: 700;
}
.legal hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 32px 0;
}
.legal .meta {
  color: var(--ink-muted);
  font-size: 14px;
  margin-bottom: 24px;
}

/* ---------- support page ---------- */
.support-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-top: 16px;
}
.support-email {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--primary-soft);
  color: var(--primary-dark);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  border: none;
}

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 32px 24px 48px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 13px;
}
.site-footer a { color: var(--ink-soft); border: none; }
.site-footer a:hover { color: var(--primary-dark); }
.site-footer .links {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}