/* HERO V2 r5: atmosphere depth, full-bleed mosaic, on-scene headline,
   stat segments, scrollspy. Activates via .hero-v2-active class. */

/* ---- dusk canvas ---- */
.hero-v2-active{background:var(--m72-dusk) !important}

/* ---- suppress replaced elements ---- */
.hero-v2-active .hero-flight-beat{visibility:hidden !important; pointer-events:none}
.hero-v2-active .hero-stats-mini{display:none}
body:has(.hero-v2-active) > #trip-nav{display:none !important}

/* ---- mosaic: full-bleed, denser, luminance glow ---- */
.hero-v2-active .hero-v2-mosaic{
  position:absolute; inset:0; z-index:5;
  width:100%; height:100%;
  pointer-events:none;
  opacity:0;
  transition:opacity .6s ease;
  -webkit-mask-image:linear-gradient(to bottom, black 45%, transparent 85%);
  mask-image:linear-gradient(to bottom, black 45%, transparent 85%);
}
.hero-v2-active .hero-v2-mosaic.is-visible{opacity:.72}

/* ---- ridge layers: distinct value steps, sky-blue haze baked in PNGs ---- */
.hero-v2-active .hero-v2-ridge{
  position:absolute; left:-5%; width:110%;
  bottom:0; pointer-events:none;
  background-size:cover;
  background-position:center bottom;
  background-repeat:no-repeat;
  will-change:transform;
}
.hero-v2-active .hero-v2-ridge-1{z-index:6; height:34vh; background-image:url('../img/ridges/ridge-1.png')}
.hero-v2-active .hero-v2-ridge-2{z-index:7; height:40vh; background-image:url('../img/ridges/ridge-2.png')}
.hero-v2-active .hero-v2-ridge-3{z-index:8; height:46vh; background-image:url('../img/ridges/ridge-3.png')}

/* ---- headline: on-scene, local darkening gradient, NO glass slab ---- */
.hero-v2-active .hero-v2-head{
  position:absolute !important; z-index:10 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  inset:0 !important;
  text-align:center !important;
  pointer-events:none;
  padding:0 !important; margin:0 !important;
  width:auto !important;
  background:none !important; border:none !important;
}
.hero-v2-head h2{
  font-family:var(--display) !important;
  font-size:clamp(48px, 8vw, 100px) !important;
  font-weight:500 !important;
  letter-spacing:var(--m72-track-display) !important;
  text-transform:uppercase !important;
  color:var(--m72-paper) !important;
  line-height:1.05 !important;
  margin:0 !important;
  padding:24px 48px !important;
  background:radial-gradient(ellipse 160% 200% at 50% 50%, rgba(14,22,32,.6) 0%, rgba(14,22,32,.3) 40%, transparent 70%) !important;
  border:none !important; border-radius:0 !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  text-shadow:0 2px 28px rgba(0,0,0,.5), 0 0 80px rgba(14,22,32,.4) !important;
}

/* ---- capsule nav + scrollspy ---- */
.hero-v2-active .hero-v2-nav{
  position:absolute; z-index:12;
  top:clamp(16px,3.5vh,40px); left:50%;
  transform:translateX(-50%);
  display:flex; align-items:center; gap:2px;
  padding:5px 6px;
  background:var(--m72-dusk-glass);
  border:1px solid var(--m72-hairline-dark);
  border-radius:var(--m72-radius-pill);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.hero-v2-nav-logo{
  font-family:var(--display);
  font-size:14px; font-weight:700;
  color:var(--m72-paper);
  padding:5px 12px 5px 14px;
  white-space:nowrap;
  letter-spacing:.03em;
}
.hero-v2-nav a{
  font-family:var(--sans72);
  font-size:var(--m72-label);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.18em;
  color:var(--m72-paper);
  text-decoration:none;
  padding:5px 14px;
  border-radius:var(--m72-radius-pill);
  transition:background .2s var(--m72-spring-fast);
  white-space:nowrap;
}
.hero-v2-nav a:hover{background:rgba(253,255,254,.1)}
.hero-v2-nav a.is-active{background:rgba(253,255,254,.12)}
.hero-v2-nav-accent{
  background:var(--m72-sky) !important;
  color:var(--m72-dusk) !important;
}
.hero-v2-nav-accent.is-active{
  background:var(--m72-sky-deep) !important;
}
.hero-v2-nav-accent:hover{
  background:var(--m72-sky-deep) !important;
}

/* ---- stat band: integer Doto, solid dark strip, no opacity fade at rest ---- */
.hero-v2-active .hero-v2-stats{
  position:absolute; z-index:11;
  bottom:0; left:0; right:0;
  display:flex; justify-content:center; gap:clamp(28px,5vw,64px);
  pointer-events:none;
  padding:16px 24px;
  background:linear-gradient(to bottom, transparent, rgba(14,22,32,.7) 30%, rgba(14,22,32,.85));
  transition:opacity .4s ease;
}
.hero-v2-stat{display:flex; flex-direction:column; align-items:center; gap:5px}
.hero-v2-stat-n{
  font-family:var(--display);
  font-size:32px;
  font-weight:500;
  color:var(--m72-paper);
  letter-spacing:.08em;
  line-height:1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.hero-v2-stat-l{
  font-family:var(--sans72);
  font-size:10px; font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.18em;
  color:rgba(253,255,254,.5);
  white-space:nowrap;
}

/* ---- ticket hue: sky-blue caption strip ---- */
.hero-v2-active .hero-flight-ticket{
  background:var(--m72-sky);
  color:var(--m72-dusk) !important;
  text-shadow:none !important;
  padding:6px 14px !important;
  border-radius:2px;
  font-weight:700 !important;
}

/* ---- map attribution: bottom-left small ---- */
.hero-v2-active .maplibregl-ctrl-attrib{
  position:absolute !important;
  bottom:4px !important; left:8px !important; right:auto !important;
  font-size:9px !important; z-index:4 !important;
  background:transparent !important;
  color:rgba(253,255,254,.3) !important;
}

/* ---- reduced motion ---- */
@media(prefers-reduced-motion:reduce){
  .hero-v2-ridge{will-change:auto; transform:none !important}
  .hero-v2-mosaic{transition:none}
  .hero-v2-mosaic.is-visible{opacity:.45}
}

/* ---- tablet ---- */
@media(max-width:768px){
  .hero-v2-head h2{
    font-size:clamp(32px,11vw,52px) !important;
    background:rgba(14,22,32,.75) !important;
    border-radius:var(--m72-radius-card) !important;
    padding:16px 24px !important;
  }
  .hero-v2-nav{padding:4px 5px; gap:1px}
  .hero-v2-nav-logo{font-size:12px; padding:4px 8px 4px 10px}
  .hero-v2-nav a{font-size:11px; padding:4px 10px; letter-spacing:.1em}
  .hero-v2-stats{gap:clamp(16px,4vw,28px); padding:12px 16px}
  .hero-v2-stat-n{font-size:24px; letter-spacing:.1em}
  .hero-v2-stat-l{font-size:8px; letter-spacing:.1em}
  .hero-v2-ridge-1{height:22vh}
  .hero-v2-ridge-2{height:28vh}
  .hero-v2-ridge-3{height:34vh}
}

/* ---- small mobile ---- */
@media(max-width:480px){
  .hero-v2-nav{padding:3px 4px; gap:0}
  .hero-v2-nav-logo{font-size:11px; padding:3px 6px 3px 8px}
  .hero-v2-nav a{font-size:9.5px; padding:3px 7px; letter-spacing:.06em}
  .hero-v2-stats{gap:clamp(10px,3vw,18px); padding:10px 12px}
  .hero-v2-stat-n{font-size:20px}
  .hero-v2-stat-l{font-size:7px; letter-spacing:.06em}
}