/* ============================================================
   VEGAS BUSTER — THE STAGE (homepage hero)
   ============================================================
   Loaded AFTER css/style.css, and only by index.html. It owns the
   top of the front page: the stadium background, the big headline,
   the live scoreboard and the kickoff ticket. Nothing else on the
   site reads this file.

   WANT YOUR OWN PHOTO BEHIND THE HEADLINE?
   Save it in assets/ and name it in data/picks.js:
       hero: { photo: "assets/hero.jpg" }
   js/hero.js loads it and fades it in. Empty that string and the
   CSS-only stadium comes back, with nothing downloaded.

   Everything here animates with transform/opacity only, and the
   whole thing goes still under prefers-reduced-motion at the
   bottom of the file.
   ============================================================ */

/* ============================================================
   1. SHELL
   ============================================================ */
.stage{
  position:relative;
  overflow:hidden;
  padding:64px 0 54px;
  isolation:isolate;

  /* ---- THE PHOTO DIAL ----
     Only matters when data/picks.js names a hero photo.
       --photo-bright  how bright the picture is. 1 = as shot.
                       Lower it if a picture fights the headline.
       --photo-veil    how much black sits over the LEFT side, where
                       the type is. 0 = none, 1 = solid.
     Change these two numbers and refresh. Nothing else needs touching. */
  --photo-bright:1;
  --photo-veil:.88;
}

.stage__inner{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:1.25fr .85fr;
  gap:56px;
  align-items:center;
}

/* ============================================================
   2. BACKGROUND LAYERS
   Photo (optional) → floodlight beams → field → grain → fade.
   ============================================================ */
.stage__bg{
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
}

/* --- your photo, if one is named in data/picks.js --- */
.stage__photo{
  position:absolute; inset:0;
  background:var(--hero-photo, none) center 30% / cover no-repeat;
  opacity:0;
  transform:scale(1.06);
  transition:opacity 1.2s ease;
  filter:grayscale(.08) contrast(1.08) brightness(var(--photo-bright, 1));
}
.stage.has-photo .stage__photo{ opacity:1; }

/* With a photo behind it, the copy needs its own bed. The wash is
   heaviest on the LEFT, where the headline sits, and thins out to the
   right so the stadium still reads. */
.stage.has-photo .stage__fade{
  background:
    linear-gradient(90deg,
      rgba(8,10,10,var(--photo-veil)) 0%,
      rgba(8,10,10,calc(var(--photo-veil) * .72)) 40%,
      rgba(8,10,10,calc(var(--photo-veil) * .20)) 70%,
      rgba(8,10,10,calc(var(--photo-veil) * .42)) 100%),
    linear-gradient(180deg, rgba(8,10,10,.55) 0%, rgba(8,10,10,.06) 26%, rgba(8,10,10,.78) 84%, var(--bg) 100%);
}
/* The CSS stadium steps back so the two aren't drawn on top of each other */
.stage.has-photo .stage__field{ opacity:.14; }
.stage.has-photo .stage__beams i{ opacity:.35; }
.stage.has-photo .stage__grain{ opacity:.08; }

/* --- stadium floodlights --- */
.stage__beams{ position:absolute; inset:-30% -10% auto -10%; height:150%; }
.stage__beams i{
  position:absolute; top:-40%;
  width:38vw; height:150%;
  background:linear-gradient(180deg, rgba(47,217,128,.22), rgba(47,217,128,0) 62%);
  filter:blur(46px);
  transform-origin:50% 0;
  opacity:.75;
  will-change:transform;
}
.stage__beams i:nth-child(1){ left:2%;  transform:rotate(14deg);  animation:beamSway 13s ease-in-out infinite; }
.stage__beams i:nth-child(2){
  left:46%; transform:rotate(-9deg);
  background:linear-gradient(180deg, rgba(232,185,63,.18), rgba(232,185,63,0) 60%);
  animation:beamSway 17s ease-in-out infinite reverse;
}
.stage__beams i:nth-child(3){ right:0;  transform:rotate(-17deg); animation:beamSway 21s ease-in-out infinite; }

@keyframes beamSway{
  0%,100%{ transform:rotate(var(--r, 12deg)) translateX(0);   opacity:.62; }
  50%    { transform:rotate(var(--r, 12deg)) translateX(3vw); opacity:.95; }
}
.stage__beams i:nth-child(1){ --r:14deg; }
.stage__beams i:nth-child(2){ --r:-9deg; }
.stage__beams i:nth-child(3){ --r:-17deg; }

/* --- the field: yard lines running away from you --- */
.stage__field{
  position:absolute; left:-25%; right:-25%; bottom:-6%;
  height:52%;
  background:
    repeating-linear-gradient(90deg,
      rgba(47,217,128,.42) 0 2px, transparent 2px 88px),
    repeating-linear-gradient(0deg,
      rgba(47,217,128,.18) 0 1px, transparent 1px 64px);
  transform:perspective(560px) rotateX(74deg);
  transform-origin:50% 100%;
  animation:fieldRun 26s linear infinite;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 55%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 55%, transparent);
  opacity:.7;
}
@keyframes fieldRun{ to{ background-position:0 64px, 0 64px; } }

/* --- film grain, keeps the flat gradients from looking plastic --- */
.stage__grain{
  position:absolute; inset:0;
  opacity:.16;
  mix-blend-mode:overlay;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* --- vignette + the hand-off back into the page background --- */
.stage__fade{
  position:absolute; inset:0;
  background:
    radial-gradient(86% 68% at 16% 30%, rgba(47,217,128,.17), transparent 64%),
    radial-gradient(70% 60% at 88% 6%,  rgba(232,185,63,.13), transparent 62%),
    linear-gradient(180deg, rgba(8,10,10,.62) 0%, rgba(8,10,10,.16) 36%, rgba(8,10,10,.84) 82%, var(--bg) 100%);
}

/* ============================================================
   3. LIVE PILL
   ============================================================ */
.stage__live{
  display:inline-flex; align-items:center; gap:10px;
  margin:0 0 22px;
  padding:7px 14px 7px 11px;
  border:1px solid rgba(47,217,128,.30);
  border-radius:100px;
  background:rgba(47,217,128,.07);
  font-family:var(--display);
  font-size:.82rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--text);
}
.stage__live i{ font-style:normal; color:var(--dim); }
.stage__dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 0 rgba(47,217,128,.55);
  animation:livePulse 2s ease-out infinite;
  flex:none;
}
@keyframes livePulse{
  0%  { box-shadow:0 0 0 0 rgba(47,217,128,.5); }
  70% { box-shadow:0 0 0 9px rgba(47,217,128,0); }
  100%{ box-shadow:0 0 0 0 rgba(47,217,128,0); }
}

/* ============================================================
   4. THE HEADLINE
   ============================================================ */
.stage__title{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(3.4rem, 8.4vw, 7.4rem);
  line-height:.86;
  letter-spacing:-.022em;
  margin:0 0 20px;
}
.stage__line{
  display:block;
  opacity:0;
  transform:translateY(26px);
  filter:blur(8px);
  animation:stampIn .85s cubic-bezier(.16,.84,.34,1) forwards;
}
.stage__line:nth-child(1){ animation-delay:.08s; }
.stage__line:nth-child(2){ animation-delay:.24s; }

@keyframes stampIn{
  to{ opacity:1; transform:none; filter:blur(0); }
}

/* The payoff line: green, lit, with a shine that crosses it now and then */
.stage__line--hot{
  position:relative;
  color:var(--green);
  text-shadow:0 0 46px rgba(47,217,128,.45), 0 0 14px rgba(47,217,128,.25);
}
.stage__line--hot::after{
  content:attr(data-text);
  position:absolute; inset:0;
  background:linear-gradient(100deg,
    transparent 38%, rgba(255,255,255,.92) 50%, transparent 62%);
  background-size:280% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation:shine 6.5s ease-in-out 1.6s infinite;
  pointer-events:none;
}
@keyframes shine{
  0%, 62% { background-position:170% 0; }
  88%,100%{ background-position:-70% 0; }
}

.stage__sub{
  font-size:1.14rem;
  line-height:1.5;
  color:var(--muted);
  max-width:40ch;
  margin:0 0 28px;
}
.stage__sub b{ color:var(--text); font-weight:600; }

/* ============================================================
   5. CALLS TO ACTION
   ============================================================ */
.stage__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px; }

/* A slow breathing glow on the money button — enough to pull the eye
   without turning into a blinking banner ad. */
.stage__go{
  position:relative;
  animation:goPulse 3.4s ease-in-out infinite;
}
@keyframes goPulse{
  0%,100%{ box-shadow:0 6px 26px -8px rgba(47,217,128,.55); }
  50%    { box-shadow:0 10px 40px -8px rgba(47,217,128,.95); }
}
.stage__go:hover{ animation:none; }

.stage__chips{
  display:flex; flex-wrap:wrap; gap:8px;
  list-style:none; margin:0; padding:0;
}
.stage__chips li{
  font-size:.78rem; font-weight:600;
  color:var(--muted);
  border:1px solid var(--line);
  background:rgba(18,24,22,.6);
  border-radius:100px;
  padding:6px 12px;
}

/* ============================================================
   6. THE TICKET (kickoff clock + free play)
   ============================================================ */
.ticket{
  position:relative;
  background:linear-gradient(168deg, var(--surface-2), var(--surface) 62%, #0D1211);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:24px 24px 26px;
  box-shadow:0 34px 80px -28px rgba(0,0,0,.95), 0 0 0 1px rgba(232,185,63,.07) inset;
  transform:rotate(-.6deg);
  transition:transform .4s cubic-bezier(.16,.84,.34,1);
}
.ticket:hover{ transform:rotate(0deg) translateY(-3px); }

.ticket__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:18px;
}
.ticket__brand{
  font-family:var(--display); font-weight:700;
  font-size:.86rem; letter-spacing:.2em;
  color:var(--gold);
}
.ticket__live{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--display); font-weight:600;
  font-size:.72rem; letter-spacing:.2em;
  color:var(--green);
  padding:3px 9px;
  border:1px solid rgba(47,217,128,.28);
  border-radius:100px;
}
.ticket__live::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--green);
  animation:pulse 1.8s ease-in-out infinite;
}

/* Torn-ticket divider */
.ticket__perf{
  position:relative;
  height:1px;
  margin:22px -24px;
  background:repeating-linear-gradient(90deg, var(--line) 0 7px, transparent 7px 14px);
}
.ticket__perf::before,
.ticket__perf::after{
  content:"";
  position:absolute; top:-9px;
  width:18px; height:18px; border-radius:50%;
  background:var(--bg);
  border:1px solid var(--line);
}
.ticket__perf::before{ left:-10px; }
.ticket__perf::after{ right:-10px; }

/* Countdown digits — style.css supplies the base .kick__* rules */
.ticket .kick__clock > div{
  background:linear-gradient(180deg, #050807, #0C110F);
  border-color:rgba(232,185,63,.14);
  position:relative; overflow:hidden;
}
.ticket .kick__clock b{
  color:var(--text);
  text-shadow:0 0 18px rgba(47,217,128,.22);
}
/* Each digit box gets a hairline of light across the middle, like a
   split-flap board. */
.ticket .kick__clock > div::after{
  content:""; position:absolute; left:0; right:0; top:52%;
  height:1px; background:rgba(0,0,0,.55);
}
/* js/hero.js adds .is-tick for a moment every time a number changes */
.ticket .kick__clock b.is-tick{ animation:flip .42s ease-out; }
@keyframes flip{
  0%  { transform:translateY(-52%) scaleY(.55); opacity:.25; }
  55% { transform:translateY(6%)   scaleY(1.06); opacity:1; }
  100%{ transform:none; }
}

/* ============================================================
   7. THE BOARD — the real record, calculated from results.js
   ============================================================ */
.board{
  position:relative; z-index:2;
  grid-column:1 / -1;          /* full width under both hero columns */
  border:1px solid var(--line);
  border-radius:var(--r);
  background:linear-gradient(180deg, rgba(5,8,7,.92), rgba(10,14,13,.88));
  box-shadow:0 26px 60px -30px rgba(0,0,0,.9);
  overflow:hidden;
}
.board::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(232,185,63,.55), transparent);
}
.board__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
}
.bcell{
  padding:22px 20px 20px;
  border-right:1px solid var(--line-soft);
  text-align:center;
}
.bcell:last-child{ border-right:0; }
.bcell__label{
  font-family:var(--display);
  font-size:.74rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim);
  margin:0 0 8px;
}
.bcell__value{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.1rem, 3.4vw, 3rem);
  line-height:1;
  font-variant-numeric:tabular-nums;
  margin:0;
  color:var(--text);
}
.bcell__value.is-pos{ color:var(--green); text-shadow:0 0 30px rgba(47,217,128,.35); }
.bcell__value.is-neg{ color:var(--red); }
.bcell__value.is-gold{ color:var(--gold); text-shadow:0 0 30px rgba(232,185,63,.28); }
.bcell__sub{ font-size:.76rem; color:var(--dim); margin:7px 0 0; }

/* Profit curve strip. Drawn by main.js, animated once on arrival. */
.board__curve{
  position:relative;
  height:84px;
  border-top:1px solid var(--line-soft);
  background:linear-gradient(180deg, rgba(47,217,128,.05), transparent);
}
.board__curve svg{ display:block; width:100%; height:100%; }
.board__line{
  stroke-dasharray:2400;
  stroke-dashoffset:2400;
  animation:drawLine 1.8s cubic-bezier(.22,.7,.3,1) .35s forwards;
  filter:drop-shadow(0 0 8px rgba(47,217,128,.45));
}
@keyframes drawLine{ to{ stroke-dashoffset:0; } }

.board__note{
  margin:0;
  padding:13px 20px;
  border-top:1px solid var(--line-soft);
  background:rgba(0,0,0,.35);
  text-align:center;
  font-size:.82rem; color:var(--dim);
}
.board__note a{ color:var(--green); font-weight:600; }
.board__note a:hover{ text-decoration:underline; }

/* ============================================================
   8. FREE PLAY SLOT inside the ticket
   (.heroplay__* base styles live in style.css)
   ============================================================ */
.ticket .heroplay__label{ margin-bottom:10px; }
.ticket .heroplay__pick{ font-size:1.85rem; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* W / L / P stamp next to the last graded play */
.heroplay__badge{
  font-family:var(--display); font-weight:700;
  font-size:.9rem; letter-spacing:.08em;
  line-height:1;
  padding:5px 9px; border-radius:5px;
}
.heroplay__badge.is-w{ background:rgba(47,217,128,.16); color:var(--green); }
.heroplay__badge.is-l{ background:rgba(244,82,95,.16);  color:var(--red); }
.heroplay__badge.is-p{ background:rgba(152,163,157,.16); color:var(--muted); }

.heroplay__next{
  margin:14px 0 0;
  padding-top:14px;
  border-top:1px solid var(--line-soft);
  font-size:.88rem; color:var(--muted);
}

/* ============================================================
   9. PHONE — most of the traffic. Checked at 375px.
   ============================================================ */
@media (max-width:1000px){
  /* One column, and the running total jumps ABOVE the ticket. The
     record is the argument — on a phone it should be the first thing
     under the buttons, not something you scroll to find. */
  .stage__inner{ display:flex; flex-direction:column; gap:26px; }
  .stage__copy{ order:1; }
  .board{ order:2; }
  .ticket{ order:3; transform:none; }
  .stage__sub{ max-width:48ch; }

  /* One column means a tall, narrow hero, and `cover` would crop the
     picture to a thin vertical slice of its middle — on a wide stadium
     shot that's the dark part, so it reads as no photo at all. Pin it
     to the TOP at a sane shape and fade it out instead. The wash also
     has to come from above now, not from the left, because the
     headline runs the full width. */
  .stage.has-photo .stage__photo{
    bottom:auto;
    height:clamp(380px, 56vh, 620px);
    background-position:center 34%;
    opacity:.9;
    -webkit-mask-image:linear-gradient(180deg, #000 58%, transparent 96%);
            mask-image:linear-gradient(180deg, #000 58%, transparent 96%);
  }
  .stage.has-photo .stage__fade{
    background:
      linear-gradient(180deg,
        rgba(8,10,10,calc(var(--photo-veil) * .50)) 0%,
        rgba(8,10,10,calc(var(--photo-veil) * .58)) 26%,
        rgba(8,10,10,calc(var(--photo-veil) * .86)) 50%,
        var(--bg) 78%);
  }
}

@media (max-width:820px){
  .stage{ padding:40px 0 44px; }
  .stage__title{ font-size:clamp(3rem, 13vw, 4.6rem); }
}

@media (max-width:560px){
  .stage{ padding:28px 0 36px; }
  .stage__inner{ gap:26px; }

  .stage__live{ font-size:.74rem; letter-spacing:.13em; padding:6px 12px 6px 10px; margin-bottom:16px; }
  .stage__title{ font-size:clamp(3rem, 15vw, 4.4rem); line-height:.88; margin-bottom:14px; }
  .stage__sub{ font-size:1rem; margin-bottom:20px; }

  .stage__cta{ gap:10px; margin-bottom:16px; }
  .stage__cta .btn{ width:100%; }

  .stage__chips li{ font-size:.72rem; padding:5px 10px; }

  .ticket{ padding:20px 18px 22px; }
  .ticket__perf{ margin:18px -18px; }
  .ticket .heroplay__pick{ font-size:1.6rem; }

  /* Scoreboard goes two-by-two rather than four squeezed cells */
  .board__grid{ grid-template-columns:1fr 1fr; }
  .bcell{ padding:16px 12px 15px; border-bottom:1px solid var(--line-soft); }
  .bcell:nth-child(2n){ border-right:0; }
  .bcell:nth-child(n+3){ border-bottom:0; }
  .bcell__label{ font-size:.68rem; letter-spacing:.15em; margin-bottom:6px; }
  .bcell__value{ font-size:2.05rem; }
  .bcell__sub{ font-size:.7rem; }
  .board__curve{ height:64px; }
  .board__note{ font-size:.76rem; padding:11px 14px; }

  /* One column means the headline runs the full width, so the wash has
     to come from the top rather than the left. */
  /* Big blurred beams are the one thing that costs frames on a phone.
     Trade them for two cheap gradients. */
  .stage__beams i{ filter:blur(30px); width:62vw; }
  .stage__beams i:nth-child(3){ display:none; }
  .stage__grain{ opacity:.1; }
}

@media (max-width:380px){
  .stage__title{ font-size:2.7rem; }
  .bcell__value{ font-size:1.8rem; }
}

/* ============================================================
   10. STILLNESS
   Anyone who has asked their phone or laptop to stop moving
   things gets a flat, fully legible hero.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .stage__line{ opacity:1; transform:none; filter:none; animation:none; }
  .stage__line--hot::after,
  .stage__beams i,
  .stage__field,
  .stage__go,
  .ticket .kick__clock b.is-tick{ animation:none; }
  .stage__line--hot::after{ display:none; }
  .ticket{ transform:none; }
  .board__line{ animation:none; stroke-dashoffset:0; }
}