/* ════════════════════════════════════════════════════════════════
   Nations Cup — teaser landing (light / premium / interactive)
   Layer model:
     0  background          (CSS)
     1  WebGL football      (canvas — interactive, transparent over white)
     2  typography          (DOM)
     3  vignette  4 grain   (depth overlays, pointer-events: none)
   ════════════════════════════════════════════════════════════════ */

:root {
  --bg: #f4f3f1;
  --bg-top: #ffffff;
  --ink: #0d0d10;
  --ink-soft: #2a2a30;
  --muted: #8a8a93;
  --muted-faint: #a5a4ac; /* eyebrow — soft but readable on light bg */
  --hairline: #d9d8d4;
  --hairline-faint: #e2e1de;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --accent: #6d5efc; /* ties the wordmark to the ball */
  --accent-2: #48e0ff;
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body { height: 100%; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* loading fade-in so nothing pops in before fonts/scene are ready */
  opacity: 1;
  transition: opacity 0.7s var(--ease-out-expo);
}
body.is-loading { opacity: 0; }

/* ─── Stage ─────────────────────────────────────────────────────── */
.stage {
  position: relative;
  width: 100%;
  height: 100dvh;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

.stage__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 90% at 50% -5%, var(--bg-top) 0%, #f6f5f3 45%, var(--bg) 100%),
    linear-gradient(180deg, transparent 70%, rgba(0, 0, 0, 0.025) 100%);
}

/* slow colour drift — barely perceptible "living" light */
.stage__bg::before {
  content: "";
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(38% 38% at 30% 28%, rgba(109, 94, 252, 0.08), transparent 70%),
    radial-gradient(34% 34% at 74% 66%, rgba(72, 224, 255, 0.07), transparent 70%);
  animation: bgDrift 26s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes bgDrift {
  from { transform: translate(-3%, -2%) scale(1); }
  to   { transform: translate(3%, 3%) scale(1.08); }
}

/* ─── WebGL canvas (interactive) ────────────────────────────────── */
.stage__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: auto;   /* drag/fling/kick the ball */
  touch-action: none;     /* don't let the page scroll while dragging */
}

#gl {
  display: block;
  width: 100%;
  height: 100%;
}

/* ─── Typography layer ──────────────────────────────────────────── */
.hero {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: 0 6vw env(safe-area-inset-bottom);
  padding-bottom: clamp(2rem, 6vh, 3.75rem);
  pointer-events: none;   /* clicks pass through to the canvas */
}

/* eyebrow / kicker with hairline rules */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-size: clamp(0.66rem, 1.3vw, 0.8rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-faint);
  margin-bottom: clamp(0.8rem, 2vh, 1.25rem);
  padding-left: 0.26em;
}

.hero__eyebrow .rule {
  width: clamp(1.5rem, 5vw, 3rem);
  height: 1px;
  background: var(--hairline-faint);
}

/* ─── Wordmark ──────────────────────────────────────────────────── */
.hero__wordmark {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 125%; /* expanded grotesque — broadcast/championship energy */
  font-size: clamp(2.1rem, 9vw, 6.5rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.3em;
  color: var(--ink);
}

/* one-time light sweep across the wordmark after the reveal */
.hero__wordmark::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.85) 50%, transparent 62%);
  mix-blend-mode: overlay;
  clip-path: inset(0);
  transform: translateX(-160%);
  opacity: 0;
}
.hero__wordmark.is-sheen::after {
  animation: sheen 1.1s var(--ease-out-expo) forwards;
}
@keyframes sheen {
  0%   { transform: translateX(-160%); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translateX(160%); opacity: 0; }
}

.word { display: inline-flex; }

/* second word picks up the ball's accent to connect type ↔ object */
.word--accent .letter__char { color: var(--accent); }

.letter {
  position: relative;
  display: inline-block;
}

.letter__char {
  display: inline-block;
  /* one-time reveal — fade + rise, then perfectly still */
  opacity: 0;
  transform: translateY(0.4em);
  transition:
    opacity 0.95s var(--ease-out-expo),
    transform 0.95s var(--ease-out-expo);
  will-change: transform, opacity;
}

.is-revealed .letter__char {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Tagline / meta ────────────────────────────────────────────── */
.hero__tagline {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.02rem, 2.4vw, 1.4rem);
  letter-spacing: 0;
  color: var(--ink-soft);
  margin-top: clamp(1rem, 2.4vh, 1.6rem);
}

.hero__meta {
  font-size: clamp(0.72rem, 1.5vw, 0.86rem);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.85rem;
}

/* ─── Flag ticker (broadcast band) ──────────────────────────────── */
.flagband {
  width: min(560px, 82vw);
  margin-top: clamp(1rem, 2.4vh, 1.5rem);
  overflow: hidden;
  /* fade the strip into the background at both edges */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

.flagband__track {
  display: flex;
  width: max-content;
  animation: flagscroll 34s linear infinite;
  will-change: transform;
}

.flagband .fi {
  flex: 0 0 auto;
  width: 32px;
  height: 22px;
  margin-right: 16px; /* trailing margin (not gap) keeps the -50% loop seamless */
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(20, 18, 40, 0.18);
}

@keyframes flagscroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* generic reveal for non-letter blocks */
[data-reveal] {
  opacity: 0;
  transform: translateY(0.9rem);
  transition:
    opacity 0.95s var(--ease-out-expo),
    transform 0.95s var(--ease-out-expo);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Depth overlays ────────────────────────────────────────────── */
.vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 42%, transparent 55%, rgba(20, 18, 40, 0.10) 100%);
}

.grain {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 0.8s steps(3) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-2%, 1%); }
  66%  { transform: translate(1%, -2%); }
  100% { transform: translate(0, 0); }
}

/* ─── Mobile: hide eyebrow but keep its layout slot (ball position unchanged) ── */
@media (max-width: 640px) {
  .hero__eyebrow {
    visibility: hidden; /* invisible, still occupies space — _resize keeps measuring it */
  }
}

/* ─── Reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .letter__char,
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .stage__bg::before,
  .grain,
  .flagband__track,
  .hero__wordmark.is-sheen::after {
    animation: none !important;
  }
}