/* ============================================================
   YurLeague prototype — shared base (tokens, fonts, motion)
   ============================================================ */
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(fonts/inter-600.woff2) format('woff2')}
@font-face{font-family:Inter;font-weight:700;font-display:swap;src:url(fonts/inter-700.woff2) format('woff2')}
@font-face{font-family:Inter;font-weight:800;font-display:swap;src:url(fonts/inter-800.woff2) format('woff2')}
@font-face{font-family:'Bebas Neue';font-weight:400;font-display:swap;src:url(fonts/bebasneue-400.woff2) format('woff2')}
@font-face{font-family:Anton;font-weight:400;font-display:swap;src:url(fonts/anton-400.woff2) format('woff2')}
@font-face{font-family:Archivo;font-weight:800;font-display:swap;src:url(fonts/archivo-800.woff2) format('woff2')}

:root{
  --midnight:#0E1116; --slate:#1A2129; --steel:#2C3744;
  --turf:#19E68C; --turf-deep:#0FCB79; --turf-glow:#3DF59A;
  --gold:#F5C84B; --gold-soft:#FCDB76;
  --cloud:#F4F6F8; --ink:#15181D; --fog:#8A95A5;
  --loss:#FF5C5C;
  --display:Anton, 'Arial Narrow', sans-serif;
  --caps:'Bebas Neue', Impact, sans-serif;
  --grotesk:Archivo, Inter, sans-serif;
  --body:Inter, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);background:var(--midnight);color:var(--cloud);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--turf);color:#06231a}

.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(1.1rem,4vw,2.5rem)}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.turf{color:var(--turf)} .gold{color:var(--gold)}

/* ---- ALL-CAPS label ---- */
.eyebrow{font-family:var(--caps);letter-spacing:.22em;text-transform:uppercase;
  font-size:clamp(.8rem,1.1vw,1rem);color:var(--turf);margin:0}
.eyebrow.gold{color:var(--gold)}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--body);font-weight:800;
  font-size:1rem;padding:.95rem 1.7rem;border-radius:999px;border:0;cursor:pointer;
  background:var(--turf);color:#06231a;transition:transform .15s var(--ease),box-shadow .2s,background .2s;
  box-shadow:0 10px 30px rgba(25,230,140,.25)}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(25,230,140,.4);background:var(--turf-glow)}
.btn--ghost{background:transparent;color:var(--cloud);border:1.5px solid rgba(255,255,255,.25);box-shadow:none}
.btn--ghost:hover{border-color:var(--turf);color:var(--turf);background:rgba(25,230,140,.06)}
.btn--gold{background:linear-gradient(135deg,var(--gold-soft),var(--gold));color:#2A2103;box-shadow:0 10px 30px rgba(245,200,75,.3)}

/* ---- Scroll reveal ---- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}.reveal[data-d="4"]{transition-delay:.32s}
.reveal[data-d="5"]{transition-delay:.4s}.reveal[data-d="6"]{transition-delay:.48s}

/* word-by-word headline reveal */
.kin span{display:inline-block;opacity:0;transform:translateY(.5em) rotate(2deg);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.kin.in span{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal,.kin span{transition:none!important;opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}

/* video bg helper */
.vbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.scrim{position:absolute;inset:0;z-index:1}

/* concept switcher bar (shared, removed when ported) */
.switch{position:fixed;z-index:9999;left:50%;transform:translateX(-50%);bottom:18px;
  display:flex;gap:.35rem;padding:.4rem;border-radius:999px;
  background:rgba(14,17,22,.82);backdrop-filter:blur(12px);border:1px solid var(--steel);
  font-family:var(--body);font-size:.82rem;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.switch a{padding:.45rem .9rem;border-radius:999px;color:var(--fog);font-weight:700;transition:.2s}
.switch a:hover{color:var(--cloud)}
.switch a.on{background:var(--turf);color:#06231a}
.switch b{padding:.45rem .7rem .45rem .9rem;color:var(--fog);font-weight:800;letter-spacing:.04em;border-right:1px solid var(--steel)}
@media(max-width:560px){.switch b{display:none}}