/* hero.css — Ben Williams — benwilliams.life — 15 Sep 2026
   Hero resting state + the mobile "Poster Scroll".
   Loaded AFTER assets/site.css. Everything hero-related that must beat a rule in
   site.css lives here, with equal-or-higher specificity. Rules in site.css that
   this file makes dead: 151-159, 883-902, 955-967, 969-998 (see hand-over notes). */

/* =====================================================================
   1. RESTING STATE IS VISIBLE — the black-hero fix.
   site.css:883-902 sets .panel{opacity:0;transform:translateY(6%)} and
   .panel-content{opacity:0} at specificity 0,1,0 with NO !important on
   opacity. `.hero .panel` is 0,2,0 and loads later, so it wins without
   !important. That matters: GSAP animates through inline styles, and an
   !important here would silently kill the reveal tween. The hidden start
   state now exists ONLY while GSAP is present to animate out of it (site.js);
   if GSAP never loads, nothing is ever hidden.
   ===================================================================== */
.hero .panel,
.hero .panel-content { opacity: 1; transform: none; }

/* Reduced motion: nothing is ever animated, so !important is safe here. */
@media (prefers-reduced-motion: reduce) {
  .hero .panel,
  .hero .panel-content { opacity: 1 !important; transform: none !important; }
}

/* HUD (progress rail + counter) only exists on the mobile poster scroll. */
.hero-hud { display: none; }

/* =====================================================================
   2. MOBILE (<900px) — "Poster Scroll".
   Each hero panel is a full-bleed vertical poster in the normal document
   flow (no nested scroller). 82svh tall so the next poster always peeks at
   the bottom edge — that peek is the "keep scrolling" affordance.
   Desktop (>=900px) is untouched: seven side-by-side panels, hover expands.
   ===================================================================== */
@media (max-width: 899px) {
  /* Gentle snap on the document scroller. Only the posters are snap targets,
     so the page snaps inside the hero and scrolls freely after it.
     Lenis is not initialised under 900px (site.js) so nothing fights this. */
  html { scroll-snap-type: y proximity; }

  /* overflow:visible — site.css:82 has overflow:hidden, which would turn the
     hero into the scrollport for position:sticky and break the HUD. Nothing
     inside the hero overflows horizontally (posters clip their own images). */
  .hero { min-height: 0; overflow: visible; }

  /* site.css:151-159 — the horizontal swipe strip. Replaced by a block flow. */
  .hero .hero-panels {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  /* site.css:955-962 sets flex/scroll-snap-align/transition with !important,
     so these three need !important too (higher specificity + later source). */
  .hero .panel,
  .hero .panel.is-active {
    flex: none !important;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    width: 100%;
    height: 82vh;
    height: 82svh;
    min-height: 440px;
    margin: 0;
    padding: 0;
    scroll-snap-align: start !important;
    scroll-snap-stop: normal;
    border: 0; /* a <button> has a 2px UA border; site.css only zeroes border-right */
    border-bottom: 1px solid rgba(216, 255, 0, .35); /* same neon hairline as the accordion */
    transition: none !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-y;
  }
  .hero .panel:last-child { border-bottom: 0; }

  /* Lanes not in SITE.heroMobileIds are desktop-only. */
  .hero .panel--desktop-only { display: none !important; }

  /* site.css:870-876 crushes photos to .45 with !important; posters need to read. */
  .hero .panel img { filter: brightness(.72) !important; }
  .hero .panel.is-active img { filter: brightness(.86) !important; }
  .hero .panel-overlay { background: rgba(0, 0, 0, .10); opacity: 1 !important; }

  /* Bottom-up scrim so the copy is legible over any photo.
     Right padding keeps the text clear of the rail + counter. */
  .hero .panel-content {
    width: 100%;
    padding: 170px 56px 30px 20px;
    padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top,
      rgba(0, 0, 0, .94) 0%,
      rgba(0, 0, 0, .70) 38%,
      rgba(0, 0, 0, .25) 70%,
      rgba(0, 0, 0, 0) 100%);
  }

  /* Poster stack: posterLine → (brand logo) → title → blurb → CTA pill.
     Wordmark and eyebrow are desktop-only affordances (they would repeat the
     posterLine / title on a poster). */
  .hero .panel .panel-wordmark { display: none !important; }
  .hero .panel .panel-eyebrow { display: none !important; }
  .hero .panel .panel-title,
  .hero .panel .panel-blurb,
  .hero .panel .panel-link {
    display: block;
    opacity: 1;
    transform: none;
  }
  .hero .panel .panel-poster {
    font-size: 12px;
    letter-spacing: .14em;
    margin: 0 0 10px;
    color: var(--accent, #D8FF00);
  }
  .hero .panel-content .panel-brand-logo {
    display: block;
    position: static;
    height: 30px;
    width: auto;
    margin: 0 0 12px;
  }
  .hero .panel .panel-title {
    font-family: 'Anton', Impact, sans-serif;
    font-weight: 400;
    font-size: clamp(32px, 10vw, 48px);
    line-height: .96;
    letter-spacing: .01em;
    text-transform: uppercase;
    margin: 0 0 12px;
  }
  .hero .panel .panel-blurb {
    font-size: 15px;
    line-height: 1.45;
    opacity: .88;
    max-width: 40ch;
    margin: 0 0 18px;
  }
  .hero .panel .panel-link {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    padding: 12px 18px;
    min-height: 44px;
  }

  /* ---- HUD: sticky for exactly as long as the hero is on screen. ----
     100svh tall with a matching negative margin so it takes no space; it
     unsticks the moment the hero's bottom edge reaches the viewport bottom,
     i.e. it leaves with the last poster. pointer-events:none so taps reach
     the posters underneath. */
  .hero-hud {
    display: block;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    height: 100svh;
    margin-bottom: -100vh;
    margin-bottom: -100svh;
    pointer-events: none;
    z-index: 5;
  }
  .hero-rail {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 140px;
    border-radius: 2px;
    background: rgba(242, 242, 234, .25);
    overflow: hidden;
  }
  .hero-rail-fill {
    width: 100%;
    height: 0%;
    border-radius: 2px;
    background: var(--accent, #D8FF00);
    transition: height 320ms cubic-bezier(.22, .61, .36, 1);
  }
  /* site.css:969-978 positions the counter at the bottom of the hero; on a
     5-poster-tall hero that is off-screen, so it lives in the sticky HUD now. */
  .hero .mobile-hero-counter {
    display: block;
    position: absolute;
    top: auto;
    right: 10px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    font-family: 'Anton', Impact, sans-serif;
    font-size: 12px;
    letter-spacing: .1em;
    color: var(--accent, #D8FF00);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
    z-index: 6;
  }
}

/* Reduced motion: no snapping, no rail animation, everything visible. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none !important; }
  .hero-rail-fill { transition: none; }
}