/* Home page only (the cinematic hero and sections). Loads after css/site.css. */

/* ============================================================
   CINEMATIC HERO  (ported from the GSAP component)
   ------------------------------------------------------------
   Base CSS below is the SAFE/STATIC layout (works with no JS &
   under reduced motion). html.anim-ready promotes it to the
   pinned, overlaid cinematic layout that the timeline drives.
   ============================================================ */
.cinematic{
  position:relative;
  width:100%;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:48px;
  padding:120px clamp(16px,4vw,40px) 80px;
  overflow:visible;
}
html.anim-ready .cinematic{
  height:100vh; min-height:100vh;
  overflow:hidden;
  padding:0;
  perspective:1500px;
}

/* atmosphere */
.film-grain{
  position:absolute; inset:0; pointer-events:none; z-index:50;
  opacity:0.05; mix-blend-mode:overlay;
  background:url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>');
}
.bg-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0.5;
  background-size:60px 60px;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--fg) 5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--fg) 5%, transparent) 1px, transparent 1px);
  -webkit-mask-image:radial-gradient(ellipse at center, black 0%, transparent 70%);
  mask-image:radial-gradient(ellipse at center, black 0%, transparent 70%);
}

/* hero text + cta : static = in flow; animated = absolute overlay */
.hero-text-wrapper, .cta-wrapper{
  position:relative; z-index:10;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; width:100%; padding:0 16px;
}
.hero-text-wrapper{ order:1; }
.card-layer{ order:2; }
.cta-wrapper{ order:3; }
html.anim-ready .hero-text-wrapper,
html.anim-ready .cta-wrapper{ position:absolute; inset:0; }
html.anim-ready .cta-wrapper{ pointer-events:auto; }

.hero-text-wrapper h1{ margin:0; }
.tagline-1{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.6rem,8vw,6rem); line-height:1.0; letter-spacing:-0.03em;
  margin-bottom:0.1em;
}
.tagline-2{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(2.6rem,8vw,6rem); line-height:1.0; letter-spacing:-0.045em;
}
.hero-sub{
  margin-top:22px; max-width:34ch; color:var(--muted);
  font-size:clamp(0.95rem,1.4vw,1.12rem); font-weight:400;
}

/* CTA */
.cta-wrapper h2{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.2rem,6vw,4.4rem); letter-spacing:-0.03em; line-height:1.02; margin:0 0 18px;
}
.cta-wrapper p{ color:var(--muted); font-size:clamp(1rem,1.4vw,1.18rem); max-width:40ch; margin:0 0 36px; font-weight:300; }

/* "Scroll for more", shown with the download buttons at the end of the hero */
.scroll-hint{ display:none; }
html.anim-ready .scroll-hint{
  position:absolute; left:0; right:0; bottom:clamp(22px,5vh,48px); z-index:30;
  width:max-content; margin:0 auto; padding:8px 12px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  color:var(--muted); font-size:0.86rem; font-weight:700; letter-spacing:0.02em;
  transition:color .2s;
}
html.anim-ready .scroll-hint:hover{ color:var(--fg); }
.scroll-hint svg{ width:24px; height:24px; animation:hint-bob 1.6s ease-in-out infinite; }
@keyframes hint-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }



/* ---------- the physical navy card ---------- */
.card-layer{
  position:relative; z-index:20;
  display:flex; align-items:center; justify-content:center; width:100%;
  pointer-events:none;
}
html.anim-ready .card-layer{ position:absolute; inset:0; perspective:1500px; }

.main-card{
  position:relative; overflow:hidden; pointer-events:auto;
  display:flex; align-items:center; justify-content:center;
  width:min(94vw,1180px); height:auto;
  border-radius:36px;
  background:linear-gradient(145deg, var(--card-from) 0%, var(--card-to) 100%);
  border:1px solid rgba(255,255,255,0.05);
  box-shadow:
    0 40px 100px -20px rgba(0,0,0,.9),
    0 20px 40px -20px rgba(0,0,0,.8),
    inset 0 1px 2px rgba(255,255,255,.2),
    inset 0 -2px 4px rgba(0,0,0,.8);
}
.card-sheen{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:50;
  background:radial-gradient(800px circle at var(--mouse-x,50%) var(--mouse-y,50%), rgba(255,255,255,.06) 0%, transparent 40%);
  mix-blend-mode:screen;
}

.card-grid{
  position:relative; width:100%; max-width:var(--maxw); margin:0 auto;
  padding:48px clamp(20px,4vw,52px); z-index:10;
  display:flex; flex-direction:column; align-items:center; gap:36px;
}
@media (min-width:1000px){
  .card-grid{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:36px; padding:0 52px; height:100%; }
}

.card-right-text{ order:1; display:flex; justify-content:center; width:100%; z-index:20; }
@media (min-width:1000px){ .card-right-text{ order:3; justify-content:flex-end; } }
.brand-stack{ text-align:center; }
@media (min-width:1000px){ .brand-stack{ text-align:right; } }
.brand-stack .line{
  font-family:var(--font-display); font-weight:900; text-transform:uppercase;
  letter-spacing:-0.04em; line-height:0.86;
  font-size:clamp(3.4rem,8vw,7.5rem);
}

.card-left-text{ order:3; display:flex; flex-direction:column; text-align:center; z-index:20; width:100%; max-width:420px; }
@media (min-width:1000px){ .card-left-text{ order:1; text-align:left; max-width:none; } }
.card-left-text h3{
  font-family:var(--font-display); font-weight:800; color:#fff;
  font-size:clamp(1.5rem,3vw,2.3rem); letter-spacing:-0.02em; line-height:1.1; margin:0 0 14px;
}
.card-left-text p{ color:rgba(240,240,240,0.72); font-size:clamp(0.95rem,1.2vw,1.08rem); line-height:1.6; margin:0; }
.card-left-text p strong{ color:#fff; font-weight:700; }
@media (max-width:760px){ .card-left-text p{ display:none; } }

/* ---------- iPhone mockup (the phone itself is css/device.css) ---------- */
.mockup-scroll-wrapper{
  order:2; position:relative; width:100%;
  display:flex; align-items:center; justify-content:center; z-index:10;
  min-height:620px;
}
.mockup-inner{
  position:relative; display:flex; align-items:center; justify-content:center;
  transform:scale(0.78);
}
@media (min-width:1000px){ .mockup-inner{ transform:scale(1); } }
/* home.js flies .phone-fly in and out in 3D and tilts #phone with the
   pointer; both keep the 3D so the side of the frame shows as it turns.
   The fade goes on .phone-stage, outside the 3D layers, because fading an
   element flattens everything inside it. */
.phone-stage{ perspective:1400px; }
.phone-fly{ transform-style:preserve-3d; }

/* floating badges */
.floating-badge{
  position:absolute; display:flex; align-items:center; gap:12px; z-index:30;
  padding:12px 16px 12px 12px; border-radius:16px;
  background:rgba(35,35,35,.82);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 25px 50px -12px rgba(0,0,0,.8);
}
.fb-icon{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:none; }
.fb-icon svg{ width:18px; height:18px; }
.fb-private .fb-icon{ background:var(--accent-fill); color:var(--fg); }
.fb-noads  .fb-icon{ background:rgba(244,67,54,.18); color:#FF8A80; }
.fb-text .t1{ font-size:0.86rem; font-weight:700; color:#fff; }
.fb-text .t2{ font-size:0.7rem; color:var(--muted); }
/* overlap the phone's edges: the top one over the corner of the live game
   (clear of its scoreboard, and above the text beside the phone on desktop),
   the bottom one over the last row of replays. Narrow screens have little
   room beside the phone, so there they hang over the edge by less. */
.fb-top-left{ top:236px; left:-64px; }
.fb-bot-right{ bottom:84px; right:-64px; }
@media (min-width:560px){ .fb-top-left{ top:96px; left:-132px; } .fb-bot-right{ right:-162px; } }

/* ============================================================
   PILLARS
   ============================================================ */
.section{ position:relative; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,40px); }
.section-head{ max-width:760px; margin-bottom:clamp(40px,6vw,64px); }
.section-head h2{
  font-family:var(--font-display); font-weight:800; letter-spacing:-0.03em; line-height:1.04;
  font-size:clamp(2rem,5vw,3.4rem); margin:0;
}
/* background-clip:text only paints inside the box, so a 'g' or 'p' hanging
   below a tight line-height gets cut off; pad the box and pull the next
   thing back up so the spacing stays the same */
.section-head h2.text-silver, .manifesto .line.text-silver{ padding-bottom:.16em; margin-bottom:-.16em; }
.section-head p{ color:var(--muted); font-size:clamp(1rem,1.4vw,1.18rem); margin:18px 0 0; max-width:54ch; }

.pillars{ padding-top:clamp(80px,12vw,150px); padding-bottom:clamp(40px,8vw,80px); }
.pillar-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:980px){ .pillar-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){ .pillar-grid{ grid-template-columns:1fr; } }
.pillar{
  position:relative; padding:26px 22px 28px; border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.008) 100%);
  border:1px solid var(--line);
  transition:border-color .35s, background .35s;
}
/* The hover lift's transition only switches on (.is-in, from home.js) once
   the scroll reveal has finished moving the card. Transitioning transform
   during the reveal makes GSAP measure a half-moved card and leave it out
   of line with the others. */
.pillar.is-in{ transition:transform .35s cubic-bezier(.25,1,.5,1), border-color .35s, background .35s; }
.pillar:hover{ transform:translateY(-6px); border-color:var(--line-strong); background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.012) 100%); }
.pillar-ic{
  width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  margin-bottom:18px; color:var(--accent);
  background:linear-gradient(180deg, rgba(37,59,107,.9), rgba(37,59,107,.5));
  border:1px solid rgba(142,168,224,.2);
}
.pillar-ic svg{ width:22px; height:22px; }
.pillar h3{ font-family:var(--font-display); font-weight:700; font-size:1.18rem; letter-spacing:-0.01em; margin:0 0 8px; }
.pillar p{ color:var(--muted); font-size:0.94rem; line-height:1.55; margin:0; }

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto{ padding:clamp(90px,15vw,180px) 0; }
.manifesto-inner{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,40px); }
.manifesto .line{
  font-family:var(--font-display); font-weight:900; letter-spacing:-0.04em; line-height:0.98;
  font-size:clamp(2.6rem,11vw,8rem); margin:0;
}
.manifesto .line.dim{ color:var(--muted-2); }
.manifesto .line .dot{ color:var(--accent); }
.manifesto-note{ margin-top:38px; color:var(--muted); max-width:48ch; font-size:clamp(1rem,1.4vw,1.15rem); }

/* ============================================================
   CAPABILITIES  (mini faux-UI cards mirroring the real app)
   ============================================================ */
.caps{ padding-bottom:clamp(80px,12vw,140px); }
.cap-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media (max-width:820px){ .cap-grid{ grid-template-columns:1fr; } }
.cap{
  position:relative; padding:26px; border-radius:24px; overflow:hidden;
  background:linear-gradient(165deg, rgba(37,59,107,.4) 0%, rgba(22,22,22,.55) 100%);
  border:1px solid var(--line);
  display:flex; flex-direction:column; gap:20px;
  transition:border-color .35s;
}
.cap.is-in{ transition:transform .35s cubic-bezier(.25,1,.5,1), border-color .35s; }
@media (max-width:560px){ .cap{ padding:20px 14px; } }
.cap:hover{ transform:translateY(-5px); border-color:var(--line-strong); }
.cap-copy h3{ font-family:var(--font-display); font-weight:700; font-size:1.32rem; letter-spacing:-0.01em; margin:0 0 8px; }
.cap-copy p{ color:var(--muted); font-size:0.96rem; line-height:1.55; margin:0; }

/* Each card shows a piece of the real app at its real size (1 point = 1px),
   with the colours, type and spacing of the Flutter screen named in the
   markup. The phone styles in css/device.css supply the shared pieces
   (.video, .burn, .ts-tile, .ms). */
.app-shot{
  flex:1; display:flex; flex-direction:column; gap:8px;
  padding:10px; border-radius:18px; overflow:hidden; container-type:inline-size;
  background:#1A1A1A; border:1px solid rgba(255,255,255,.06);
  box-shadow:0 22px 44px -26px rgba(0,0,0,.95);
  font-family:'M PLUS Rounded 1c', system-ui, sans-serif; color:#F0F0F0;
  -webkit-font-smoothing:antialiased;
}

/* Videos tab: the live game and two replays */
.as-hero{ position:relative; flex:none; aspect-ratio:369 / 207.6; border-radius:14px; overflow:hidden; background:#393939; }
.as-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; padding-top:4px; }

/* the scoreboard under the video */
.as-card{ background:#1A1A1A; border-radius:12px; box-shadow:0 0 6px #393939; }
.as-score{ min-height:125px; padding:12px; display:flex; align-items:center; }
.as-team{
  flex:2; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px;
  font-size:15px; font-weight:700; line-height:1.3; text-align:center;
}
/* team logos, shown whole like the app's BoxFit.contain */
.as-logo{ width:75px; max-width:100%; aspect-ratio:1; flex:none; object-fit:contain; }
.as-logo.sm{ width:56px; }
.as-mid{ flex:3; min-width:0; display:flex; align-items:center; justify-content:space-evenly; }
.as-mid b{ font-size:38px; font-weight:700; line-height:1.2; }
.as-clock{ display:flex; flex-direction:column; align-items:center; line-height:1.3; }
.as-clock strong{ font-size:16px; font-weight:700; }
.as-clock small{ font-size:12px; color:#727272; }
.as-stats{ padding:12px 20px; }
.as-stat{ display:flex; align-items:center; padding:4px 0; }
.as-stat b{ width:52px; font-size:22px; font-weight:700; line-height:1.4; }
.as-stat b:last-child{ text-align:right; }
.as-stat span{ flex:1; text-align:center; font-size:15px; color:#727272; }
.as-feed{ padding:10px 0; }
.as-event{ display:flex; align-items:center; gap:14px; padding:0 16px; }
.as-event-text{ flex:1; min-width:0; display:flex; flex-direction:column; }
.as-event-text b{ font-size:22px; font-weight:700; line-height:1.35; }
.as-event-text span, .as-event-text small{ color:#727272; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.as-event-text span{ font-size:13px; }
.as-event-text small{ font-size:12px; }
.as-running{ display:flex; flex-direction:column; align-items:flex-end; font-size:16px; line-height:1.4; }
.as-dots{ display:flex; justify-content:center; align-items:center; gap:6px; margin-top:6px; }
.as-dots i{ width:6px; height:6px; border-radius:50%; background:#393939; }
.as-dots i.on{ width:8px; height:8px; background:#F0F0F0; }

/* team chat: bubbles joined by sender, and an automatic score card */
.as-chat{ justify-content:flex-end; gap:0; padding:4px 10px 12px; }
.c-day{ padding:4px 0 2px; text-align:center; color:#727272; font-size:11px; }
.c-msg{ display:flex; flex-direction:column; align-items:flex-start; margin-top:8px; }
.c-msg.cont{ margin-top:2px; }
.c-name{ padding:0 12px 2px; color:#727272; font-size:12px; line-height:16px; }
.c-bub{ max-width:280px; padding:7px 12px; border-radius:18px; background:#393939; color:#F0F0F0; font-size:15px; line-height:21px; }
.c-msg.first .c-bub{ border-bottom-left-radius:5px; }
.c-msg.cont .c-bub{ border-top-left-radius:5px; }
.c-msg.own{ align-items:flex-end; }
.c-msg.own .c-bub{ background:#253B6B; color:#fff; }
.c-card{ margin-top:8px; padding:7px 10px 8px; border-radius:12px; background:rgba(57,57,57,.45); }
.c-badge{
  display:inline-block; padding:1px 6px; border-radius:4px; background:#393939; color:#F0F0F0;
  font-size:10px; line-height:14px; letter-spacing:.6px; font-weight:700;
}
.c-badge.goal{ background:#D82424; color:#fff; }
.c-row{ display:flex; align-items:center; margin-top:5px; }
.c-team{ flex:1; min-width:0; display:flex; align-items:center; gap:6px; font-size:14px; color:#F0F0F0; white-space:nowrap; }
.c-team.away{ justify-content:flex-end; }
.c-team.strong{ font-weight:700; }
.c-team.muted, .c-score .muted{ color:#727272; }
.c-logo{ flex:none; width:22px; height:22px; object-fit:contain; }
.c-score{ padding:0 8px; font-size:18px; line-height:1.2; font-weight:700; white-space:nowrap; }
.c-score i{ font-style:normal; color:#727272; }
.c-detail{ margin-top:3px; color:#727272; font-size:12.5px; line-height:1.3; }

/* a player's page: photo, name, quick stats and the stat list */
.as-pcard{ background:rgba(57,57,57,.45); border-radius:14px; }
.as-player{ display:flex; align-items:center; gap:16px; padding:12px; }
.as-player + .as-list{ margin-top:4px; }
.as-photo{
  flex:none; width:clamp(84px, 30cqw, 120px); aspect-ratio:120 / 150; border-radius:12px;
  background:#393939; color:#727272; display:flex; align-items:center; justify-content:center;
}
.as-photo .ms{ font-size:56px; }
.as-player-text{ flex:1; min-width:0; }
.as-player-name{ font-size:28px; font-weight:700; line-height:1.15; }
.as-player-sub{ font-size:14px; color:#727272; line-height:1.5; }
.as-quick{ display:flex; margin-top:14px; }
.as-quick div{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; }
.as-quick b{ font-size:22px; font-weight:700; line-height:1.3; }
.as-quick span{ font-size:11px; color:#727272; }
.as-list{ padding:6px 16px; }
.as-list div{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; font-size:18px; line-height:1.4; }
.as-list span{ font-weight:700; }
.as-list b{ font-weight:600; }

/* ============================================================
   FINAL CTA + FOOTER
   ============================================================ */
.final{ padding:clamp(12px,2vw,28px) 0 clamp(50px,8vw,90px); }
.final-card{
  position:relative; overflow:hidden;
  width:calc(100% - 2 * var(--gutter)); max-width:var(--maxw); margin:0 auto;
  border-radius:32px; padding:clamp(40px,7vw,80px) clamp(28px,5vw,64px);
  background:linear-gradient(145deg, var(--card-from) 0%, var(--card-to) 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.9), inset 0 1px 2px rgba(255,255,255,.12);
  text-align:center;
}
.final-card .glow{ position:absolute; top:-40%; left:50%; transform:translateX(-50%); width:600px; height:600px; background:radial-gradient(circle, rgba(142,168,224,.18), transparent 60%); pointer-events:none; }
.final-card h2{ position:relative; font-family:var(--font-display); font-weight:900; letter-spacing:-0.03em; font-size:clamp(2rem,5.5vw,3.6rem); margin:0 0 16px; line-height:1.04; }
/* the clipped silver fill stops at the line box, so give the "g" room below it */
.final-card h2.text-card-silver{ padding-bottom:.16em; margin-bottom:calc(16px - .16em); }
.final-card p{ position:relative; color:rgba(240,240,240,.75); font-size:clamp(1rem,1.5vw,1.2rem); max-width:46ch; margin:0 auto 36px; }
.final-card .store-row{ position:relative; }


/* ============================================================
   GSAP reveal guards: only hide when animations are active
   ============================================================ */
html.anim-ready .gsap-reveal{ visibility:hidden; }

/* ============================================================
   FOR TEAMS  (how setup works + price)
   ============================================================ */
.teams{ padding-bottom:clamp(40px,8vw,90px); }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .steps{ grid-template-columns:1fr; } }
.step-card{
  padding:26px 24px 28px; border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.008) 100%);
  border:1px solid var(--line);
}
.step-num{ font-weight:800; font-size:0.85rem; letter-spacing:0.06em; color:var(--accent); }
.step-card h3{ font-family:var(--font-display); font-weight:700; font-size:1.25rem; letter-spacing:-0.01em; margin:12px 0 8px; }
.step-card p{ color:var(--muted); font-size:0.95rem; line-height:1.55; margin:0; }
.price-strip{
  margin-top:22px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
  padding:22px 26px; border-radius:22px;
  background:linear-gradient(145deg, rgba(37,59,107,.6) 0%, rgba(22,22,22,.6) 100%);
  border:1px solid rgba(142,168,224,.18);
}
.price-strip .p-big{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.3rem,2.6vw,1.8rem); letter-spacing:-0.02em; }
.price-strip .p-small{ color:rgba(240,240,240,.7); font-size:0.95rem; margin-top:2px; }
.price-strip .actions{ display:flex; gap:12px; flex-wrap:wrap; }
.final-card .team-link{ position:relative; margin:26px auto 0; color:rgba(240,240,240,.7); font-size:0.95rem; }
.final-card .team-link a{ color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:3px; }