/* Summer of Soccer — animated explainer ("how it works").
   Full-bleed motion piece for the sales pitch, a shareable MP4, and social.
   All motion is a pure function of each scene's --p (0..1 progress) and a JS-set
   opacity, so any frame is reproducible — see the director script in explainer.html.
   Sizing is in vmin so 1920x1080 (wide) and 1080x1920 (vertical) render at the same
   physical scale; layout just recenters. No emojis/pictographs — SVG + CSS only. */

.explainerbody { overflow: hidden; margin: 0; background: var(--page); }

.explainer {
  position: fixed; inset: 0; overflow: hidden;
  background: radial-gradient(120% 90% at 50% -8%, #16344b 0%, var(--navy) 48%, var(--navy-2) 100%);
  color: var(--cream); font-family: Inter, system-ui, sans-serif;
  --ink-soft: rgba(245,239,228,.74);
  --ink-faint: rgba(245,239,228,.5);
}
/* faint dotted texture, like the TV board */
.explainer::before {
  content: ""; position: absolute; inset: 0; opacity: .05; pointer-events: none;
  background: radial-gradient(circle at 50% 120%, rgba(245,239,228,.9) 0 1px, transparent 2px);
  background-size: 26px 26px;
}

/* progress hairline */
.ex-progress { position: absolute; top: 0; left: 0; right: 0; height: .5vmin; background: rgba(245,239,228,.08); z-index: 6; }
.ex-progress i { display: block; height: 100%; width: calc(var(--gp, 0) * 100%); background: linear-gradient(90deg, var(--brass), var(--gold)); }

/* scenes stack; JS sets opacity + visibility */
.scene {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4vmin;
  padding: 9vmin 7vmin; text-align: center; opacity: 0; visibility: hidden;
  will-change: opacity;
}

/* shared caption: a gold step chip + a big legible line (reads across a room) */
.cap { font-family: Lora, serif; font-weight: 600; font-size: 4.2vmin; color: var(--cream); line-height: 1.25; max-width: 86vmin;
  display: flex; align-items: center; gap: 2.2vmin; justify-content: center;
  transform: translateY(calc((1 - var(--p)) * 2.4vmin)); }
.cap .step { flex: 0 0 auto; width: 6.4vmin; height: 6.4vmin; border-radius: 50%;
  background: var(--gold); color: var(--navy); font-weight: 800; font-size: 3.4vmin;
  display: inline-flex; align-items: center; justify-content: center; }

/* ---------------- Scene 1: hook ---------------- */
.scene-hook .ex-mark { width: 20vmin; height: 20vmin; display: block; margin: 0 auto;
  transform: scale(calc(.82 + .18 * var(--p))); filter: drop-shadow(0 0 5vmin rgba(229,192,103,.28)); }
/* official crest (brand_logo) — the real badge used on the board / sheet / homepage */
.scene-hook .ex-crest { width: 23vmin; height: 23vmin; display: block; margin: 0 auto; object-fit: contain;
  transform: scale(calc(.82 + .18 * var(--p))); filter: drop-shadow(0 0 4vmin rgba(229,192,103,.25)); }
.scene-cta .ex-crest { width: 17vmin; height: 17vmin; display: block; margin: 0 auto; object-fit: contain;
  transform: scale(calc(.9 + .1 * var(--p))); filter: drop-shadow(0 0 3vmin rgba(229,192,103,.22)); }
.ex-word { font-family: Lora, serif; font-weight: 700; font-size: 9vmin; letter-spacing: .04em; color: var(--cream); margin-top: 2vmin; line-height: 1; }
.ex-kicker { font-size: 2.4vmin; letter-spacing: .42em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-top: 1.6vmin; }
.hook-line { font-family: Lora, serif; font-weight: 700; font-size: 5.6vmin; color: #fff; max-width: 78vmin; margin: 5vmin auto 0; line-height: 1.18;
  opacity: var(--p); transform: translateY(calc((1 - var(--p)) * 3vmin)); }
.hook-line b { color: var(--gold); }

/* ---------------- phone (scenes 2 + 3) ---------------- */
.phone { position: relative; width: 34vmin; height: 70vmin; border-radius: 6vmin; flex: 0 0 auto;
  background: linear-gradient(160deg, #11151b, #05080c); border: .7vmin solid #2a323c;
  box-shadow: 0 4vmin 9vmin rgba(0,0,0,.5), inset 0 0 0 .4vmin rgba(245,239,228,.06);
  transform: translateY(calc((1 - var(--p)) * 5vmin)); }
.phone::after { content: ""; position: absolute; top: 1.6vmin; left: 50%; transform: translateX(-50%);
  width: 11vmin; height: 1.4vmin; border-radius: 1vmin; background: #05080c; }
.phone-screen { position: absolute; inset: 3vmin; border-radius: 3.4vmin; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4vmin; padding: 4vmin 3.4vmin;
  background: radial-gradient(120% 80% at 50% -10%, #16344b 0%, var(--navy) 60%, var(--navy-2) 100%); }

/* scene 2: scan */
.tent-sos { font-size: 2vmin; letter-spacing: .26em; font-weight: 800; color: var(--gold); }
.tent-qr { width: 19vmin; height: 19vmin; background: var(--cream); border-radius: 2vmin; padding: 1.4vmin; }
.tent-qr svg { display: block; width: 100%; height: 100%; }
.tent-cap2 { font-family: Lora, serif; font-weight: 700; font-size: 2.7vmin; color: var(--cream); }
.scan-ring { position: absolute; left: 50%; top: 50%; width: 26vmin; height: 26vmin; margin: -13vmin 0 0 -13vmin;
  border: .7vmin solid var(--gold); border-radius: 4vmin; opacity: calc(.9 - var(--p));
  transform: scale(calc(.55 + var(--p) * .9)); }

/* scene 3: pick */
.phone-screen.pick { justify-content: space-between; padding: 6vmin 3.4vmin; }
.pk-head { font-size: 1.9vmin; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-weight: 800; }
.pk-match { display: flex; flex-direction: column; align-items: center; gap: 2.4vmin; width: 100%; }
.pk-team { display: flex; align-items: center; gap: 1.6vmin; font-family: Lora, serif; font-weight: 700; font-size: 3vmin; color: var(--cream); }
.pk-team img { width: 5.4vmin; height: 3.6vmin; border-radius: .6vmin; object-fit: cover; box-shadow: 0 .4vmin 1vmin rgba(0,0,0,.4); }
.pk-score { display: flex; align-items: center; gap: 2.4vmin; }
.pk-score b { font-family: Lora, serif; font-weight: 700; font-size: 9vmin; color: var(--gold);
  transform: scale(calc(.6 + min(1, var(--p) * 1.6) * .4)); opacity: calc(min(1, var(--p) * 1.6)); }
.pk-score i { font-style: normal; font-size: 5vmin; color: var(--ink-faint); }
.pk-btn { width: 100%; text-align: center; padding: 2.6vmin; border-radius: 2.4vmin; font-weight: 800; font-size: 2.8vmin;
  background: var(--gold); color: var(--navy);
  box-shadow: 0 0 0 calc(var(--p) * 1.4vmin) rgba(229,192,103,.22); }

/* ---------------- Scene 4: climb ---------------- */
.climb-board { position: relative; width: 64vmin; height: 46vmin; flex: 0 0 auto;
  transform: translateY(calc((1 - var(--p)) * 3vmin)); }
.cb-row { position: absolute; left: 0; right: 0; height: 8vmin; display: grid; grid-template-columns: 8vmin 1fr auto; align-items: center; gap: 2vmin;
  padding: 0 3vmin; border-radius: 2vmin; background: rgba(245,239,228,.05); border: 1px solid rgba(245,239,228,.07); }
.cb-rank { font-family: Lora, serif; font-weight: 700; font-size: 3.4vmin; color: var(--ink-faint); text-align: center; }
.cb-name { font-size: 3vmin; font-weight: 600; color: var(--cream); text-align: left; }
.cb-pts { font-family: Lora, serif; font-weight: 700; font-size: 3.4vmin; color: var(--gold-soft); }
.cb-g1 { top: 0; }
.cb-g2 { top: 9.5vmin; }
.cb-g3 { top: 19vmin; }
.cb-g4 { top: 28.5vmin; }
.cb-g5 { top: 38vmin; }
.cb-g2, .cb-g3, .cb-g4, .cb-g5 { opacity: .8; }   /* recede ghosts so You + the leader pop */
/* the "You" chip rises from slot 5 up to slot 2 as --p goes 0..1, clearly elevated above the rest */
.cb-you { z-index: 3; top: calc(38vmin - var(--p) * 28.5vmin); transform: scale(1.04);
  background: linear-gradient(90deg, var(--accent-tint), var(--accent-faint)); border: 1px solid var(--gold);
  box-shadow: 0 2.2vmin 5vmin rgba(0,0,0,.55); }
.cb-you .cb-rank, .cb-you .cb-pts { color: var(--gold); }
.cb-you .cb-name { color: #fff; }

/* ---------------- Scene 5: board fills ---------------- */
.scene-fill { gap: 3vmin; }
.fill-eyebrow { font-size: 2.2vmin; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); font-weight: 800; }
.mini-board { width: 92vmin; max-width: 92vmin; border-radius: 3vmin; padding: 4vmin 5vmin; flex: 0 0 auto;
  background: radial-gradient(120% 120% at 50% -10%, #16344b 0%, var(--navy) 55%, var(--navy-2) 100%);
  border: 1px solid rgba(229,192,103,.28); box-shadow: 0 4vmin 9vmin rgba(0,0,0,.5);
  transform: translateY(calc((1 - var(--p)) * 4vmin)) scale(calc(.96 + var(--p) * .04)); }
.mb-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid rgba(229,192,103,.25); padding-bottom: 2.2vmin; margin-bottom: 2.4vmin; }
.mb-title { font-family: Lora, serif; font-weight: 700; font-size: 3.6vmin; color: var(--cream); }
.mb-title span { color: var(--gold); }
.mb-cup { font-size: 2vmin; color: var(--ink-faint); letter-spacing: .04em; }
.mb-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4vmin 4vmin; }
.mb-row { display: grid; grid-template-columns: 5vmin 1fr auto; align-items: center; gap: 1.6vmin; padding: 1.4vmin 2vmin; border-radius: 1.4vmin; background: rgba(245,239,228,.045); }
.mb-row.lead { background: linear-gradient(90deg, var(--accent-tint), var(--accent-faint)); border: 1px solid var(--accent-line); }
.mb-rank { font-family: Lora, serif; font-weight: 700; font-size: 2.6vmin; color: var(--ink-faint); text-align: center; }
.mb-row.lead .mb-rank { color: var(--gold); }
.mb-name { font-size: 2.6vmin; font-weight: 600; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-pts { font-family: Lora, serif; font-weight: 700; font-size: 2.7vmin; color: var(--gold-soft); }
.mb-more { grid-column: 1 / -1; text-align: center; font-style: italic; font-size: 2.2vmin; color: var(--ink-faint); margin-top: 1.4vmin;
  opacity: calc(max(0, var(--p) - .45) * 2); }

/* ---------------- Scene 6: owner payoff ---------------- */
.scene-payoff { gap: 5vmin; }
.payoff-line { font-family: Lora, serif; font-weight: 700; font-size: 6vmin; line-height: 1.18; max-width: 82vmin; color: #fff; }
.payoff-1 { transform: translateY(calc((1 - min(1, var(--p) * 2)) * 3vmin)); opacity: min(1, calc(var(--p) * 3)); }
.payoff-2 { color: var(--gold); opacity: calc(max(0, var(--p) - .42) * 2.4); transform: translateY(calc((1 - max(0, var(--p) - .42) * 2.4) * 3vmin)); }
.payoff-list { display: flex; flex-direction: column; gap: 1.4vmin; width: 64vmin; max-width: 80vmin;
  opacity: calc(max(0, var(--p) - .5) * 2.4); }
.pl-row { display: flex; align-items: center; gap: 2vmin; padding: 1.8vmin 2.6vmin; border-radius: 1.8vmin;
  background: rgba(245,239,228,.05); border: 1px solid rgba(245,239,228,.08); }
.pl-check { flex: 0 0 auto; width: 4vmin; height: 4vmin; border-radius: 50%; background: rgba(229,192,103,.16); position: relative; }
.pl-check::after { content: ""; position: absolute; left: 1.3vmin; top: .7vmin; width: 1.2vmin; height: 2.2vmin; border: solid var(--gold); border-width: 0 .5vmin .5vmin 0; transform: rotate(40deg); }
.pl-name { flex: 1; text-align: left; font-weight: 600; font-size: 2.6vmin; color: var(--cream); }
.pl-phone { font-family: Lora, serif; font-size: 2.4vmin; color: var(--ink-faint); letter-spacing: .04em; }

/* ---------------- Scene 7: CTA ---------------- */
.scene-cta .ex-mark { width: 15vmin; height: 15vmin; transform: scale(calc(.9 + .1 * var(--p))); }
.cta-free { font-family: Lora, serif; font-weight: 700; font-size: 6vmin; color: #fff; margin-top: 2vmin; }
.cta-free b { color: var(--gold); }
.cta-by { font-size: 3vmin; color: var(--ink-soft); margin-top: 2.4vmin; }
.cta-by b { color: var(--cream); }
.cta-contact { margin-top: 4vmin; display: flex; gap: 4vmin; justify-content: center; flex-wrap: wrap;
  font-size: 2.8vmin; color: var(--gold); font-weight: 600;
  opacity: var(--p); }
.cta-contact span { color: var(--ink-faint); }

/* ---------------- format tweaks ---------------- */
/* vertical (portrait social): stack the wide scenes a touch tighter */
.fmt-vertical .scene { padding: 12vmin 7vmin; }
.fmt-vertical .mini-board { padding: 4vmin 4vmin; }
.fmt-vertical .mb-rows { grid-template-columns: 1fr; gap: 1.2vmin; }
.fmt-vertical .mb-row:nth-child(n+7) { display: none; } /* top 6 fit cleanly in portrait */
.fmt-vertical .cta-contact { flex-direction: column; gap: 1.4vmin; }

/* wide (landscape): give the board a bit more breathing room */
.fmt-wide .mini-board { width: 86vmin; max-width: 86vmin; }
.fmt-wide .climb-board { width: 70vmin; }