/* ============================================================================
   Previously — HERO BLEED BEHIND TRANSPARENT NAV (site-wide rollout)
   James, 2026-09-27. The pattern: every page hero reaches the viewport top and
   flows BEHIND the transparent nav — one continuous cinematic surface, never
   a gray box. The nav melts to solid Deep Charcoal on scroll (--melt, driven
   by hero-bleed-site.js, rAF-throttled, single custom property). This mirrors
   the approved home pattern (hero-bleed.7071cd6f.css, 2026-09-24) for the
   shared-chrome static pages. The home SPA keeps its own hero-bleed files;
   this file never targets the SPA (no body.bleed there).
   Mechanism note: heroes nested inside wrappers use position:relative + top
   offset (never a negative top margin) so margin-collapse can never drag the
   whole page up — only the hero moves. Direct body children use the classic
   negative-margin + padding compensation.
   Laptop-first: composed at 1440px+, adapted to 390px.
   Brand tokens: Deep Charcoal #101114, Warm Bone #EDE6D6,
   Action Graphite #2B2B30, Pearl/Ivory #F4F1EA,
   Rewind Red #E8321E — restrained accent only, never a button fill.
   No neon green. No purple/blue gradients.
   ========================================================================== */

/* ---------- 1. nav melt + legibility scrim (every bleed page) ---------- */
body.bleed .topbar{
  --melt:0;
  background-color:color-mix(in srgb,#101114 calc(var(--melt)*100%),transparent);
  -webkit-backdrop-filter:saturate(140%) blur(calc(var(--melt)*14px));
  backdrop-filter:saturate(140%) blur(calc(var(--melt)*14px));
}
/* Cinematic top scrim: nav links stay readable over bright artwork. Fades to
   zero as the nav melts solid. z-index -1 = above the bar's own background,
   below the nav content. */
body.bleed .topbar::after{
  content:"";position:absolute;top:0;left:0;right:0;height:170px;z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,8,.68) 0%,rgba(5,5,8,.40) 45%,rgba(5,5,8,.13) 75%,transparent 100%);
  opacity:calc(1 - var(--melt,0));
}
/* Soft shadow on nav text + icon buttons so they read over bright art.
   Fades out with the melt; over the solid nav there is no shadow at all. */
body.bleed .topbar .wordmark,
body.bleed .topbar .back-link,
body.bleed .topbar .nav-btn{
  text-shadow:0 1px 10px rgba(0,0,0,calc(.72*(1 - var(--melt,0)))),
              0 0 3px rgba(0,0,0,calc(.5*(1 - var(--melt,0))));
}
body.bleed .topbar .icon-btn,
body.bleed .topbar .pv-menu-btn{
  filter:drop-shadow(0 1px 6px rgba(0,0,0,calc(.6*(1 - var(--melt,0)))));
}

/* ---------- 2. hero pull-ups ----------
   Each page's hero block extends under the sticky nav while every content
   pixel stays exactly where it was — only the block's top now lives behind
   the transparent nav. The page's approved composition is untouched. */

/* Sports: standout title tucks under the nav (direct body child — classic
   negative margin; featured stage card untouched). */
body.bleed-sports .title-hero{margin-top:-68px;padding-top:calc(26px + 68px);}
/* Games: giant typographic hero (direct body child). */
body.bleed-games header.hero{margin-top:-68px;padding-top:calc(64px + 68px);}
/* Live: standout title + watermark. Nested in .lv-wrap, so relative shift —
   a negative margin would collapse through the wrapper and drag the page. */
body.bleed-live header.lv-hero{
  position:relative;top:-68px;margin-bottom:-68px;
  padding-top:calc(58px + 68px);
}
/* Culture: the feed column is a grid item — its margins cannot collapse
   through the grid container — so the column itself extends under the nav. */
body.bleed-culture #maincol{margin-top:-68px;padding-top:68px;}

/* ---------- 3. Coming Soon: cinematic premiere hero ----------
   The next-premiere artwork becomes a full-bleed cinematic backdrop reaching
   the viewport top behind the transparent nav (the approved mockup pattern).
   DOM/IDs/classes are untouched — CSS positioning only — so every interaction
   (whole-card tap -> popup+trailer, bell, countdown, stat filters) keeps
   working exactly as built. Relative shift (not negative margin) so the
   full-bleed breakout can't collapse through .wrap and move the page. */
body.bleed-comingsoon{
  /* grid alignment for the overlaid hero text: always matches .wrap's left
     edge (edge padding on narrow screens, centered 1400px grid on wide). */
  --cs-pad:clamp(18px,4vw,56px);
  --cs-left:max(var(--cs-pad),calc((100vw - 1400px)/2 + var(--cs-pad)));
  overflow-x:clip;
}
body.bleed-comingsoon .block.hero{
  position:relative;top:-68px;
  width:100vw;max-width:100vw;
  margin:0 calc(50% - 50vw) -68px;
  padding:calc(68px + clamp(30px,4vw,54px)) 0 0;
  overflow:hidden;
}
/* brand atmosphere glow stays over the artwork */
body.bleed-comingsoon .block.hero::before{z-index:1;}
/* the premiere card un-cards: artwork goes absolute full-bleed, content flows */
body.bleed-comingsoon .nextup{
  position:static;display:block;overflow:visible;cursor:pointer;
  background:none;border:0;border-radius:0;box-shadow:none;
  margin:44px 0 0;
}
body.bleed-comingsoon .nu-art{
  position:absolute;inset:0;min-height:0;border-radius:0;
}
/* stronger cinematic shade: top scrim carries the nav, bottom carries text */
body.bleed-comingsoon .nu-shade{
  background:
    linear-gradient(180deg,rgba(5,5,8,.78) 0%,rgba(5,5,8,.34) 20%,rgba(5,5,8,.06) 38%,transparent 52%,rgba(5,5,8,.38) 72%,rgba(5,5,8,.88) 100%),
    radial-gradient(120% 90% at 50% 112%,rgba(0,0,0,.42),transparent 60%);
}
/* NEXT UP badge: clear of the nav, clear of the title, right side */
body.bleed-comingsoon .nu-badge{
  top:calc(68px + 20px);left:auto;right:var(--cs-pad);z-index:3;
}
/* hero text floats over the art, aligned to the page grid */
body.bleed-comingsoon .hero .kicker,
body.bleed-comingsoon .hero h1{
  position:relative;z-index:2;
  padding-left:var(--cs-left);padding-right:var(--cs-pad);
}
body.bleed-comingsoon .hero h1{margin-top:16px;margin-bottom:12px;}
body.bleed-comingsoon .hero .sub{
  position:relative;z-index:2;
  max-width:calc(60ch + var(--cs-left) + var(--cs-pad)); /* border-box: 60ch of text */
  padding-left:var(--cs-left);padding-right:var(--cs-pad);
}
/* premiere details overlay the art's lower half */
body.bleed-comingsoon .nu-body{
  position:relative;z-index:2;
  padding:0 var(--cs-pad) 8px var(--cs-left);
}
/* tappable stat filters ride the hero's bottom edge over the dark scrim */
body.bleed-comingsoon .hero .stats{
  position:relative;z-index:2;
  margin:34px 0 0;
  padding:0 var(--cs-pad) 60px var(--cs-left);
}

/* ---------- 4. mobile: 62px nav (shared chrome < 768px) ---------- */
@media(max-width:767px){
  body.bleed .topbar::after{height:190px;}
  body.bleed-sports .title-hero{margin-top:-62px;padding-top:calc(26px + 62px);}
  body.bleed-games header.hero{margin-top:-62px;padding-top:calc(64px + 62px);}
  body.bleed-live header.lv-hero{top:-62px;margin-bottom:-62px;padding-top:calc(58px + 62px);}
  body.bleed-culture #maincol{margin-top:-62px;padding-top:62px;}
  body.bleed-comingsoon .block.hero{
    top:-62px;margin-bottom:-62px;
    padding-top:calc(62px + clamp(30px,4vw,54px));
  }
  body.bleed-comingsoon .nu-badge{top:calc(62px + 14px);}
}
@media(max-width:560px){
  /* games' own mobile padding kicks in below 560px (nav still 62px) */
  body.bleed-games header.hero{padding-top:calc(44px + 62px);}
}

/* ---------- 5. reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  body.bleed .topbar{transition:none;}
}