/* ============================================================
   HERO — MAX scroll-rotation (replaces variant D as default)
   Reuses .hero-photo-h1 / .hero-photo-sub / .hero-photo-cta styling
   ============================================================ */
/* one continuous canvas behind hero + How It Works — single smooth gradient, no seams */
.hero-how-wrap { position: relative;
  background: linear-gradient(168deg, #0b181f 0%, #122e3c 32%, #1a4254 65%, #235b72 100%); }
/* sections paint nothing themselves; they are content over the wrapper's background */
.hero-how-wrap > section { position: relative; z-index: 1; }
/* bottom vignette — mirrors the hero's top shade, fading the shared bg dark below the
   How It Works content for a clean close to the section */
.hero-how-wrap::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 320px; z-index: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(8,18,23,.6) 0%, rgba(8,18,23,.28) 45%, rgba(8,18,23,0) 100%); }
/* shared background logomark — sticky layer spanning hero + How It Works (never clipped
   at the hero's edge; its lower half continues behind the How It Works content) */
.hhw-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hhw-bg-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.heror { position: relative; height: 300vh; background: transparent; color: #fff; overflow: visible; padding: 0; }
.heror-stage { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; }
/* top shade so the menu stays legible and the dark bg reads behind the fixed nav */
.heror-stage::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 170px; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, rgba(8,18,23,.6) 0%, rgba(8,18,23,.28) 45%, rgba(8,18,23,0) 100%); }

/* background */
.heror-bg { position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 90% at 78% 16%, rgba(144,171,181,.26) 0%, rgba(144,171,181,0) 55%);
}
.heror-spot { position: absolute; left: 52%; top: 52%; width: min(1100px,92vw); aspect-ratio: 1/1; transform: translate(-50%,-50%);
  background: radial-gradient(circle at center, rgba(170,199,96,.14) 0%, rgba(144,171,181,.09) 28%, rgba(144,171,181,0) 62%);
  filter: blur(8px); animation: herorBreathe 7s ease-in-out infinite; z-index: 1;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 95%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 95%); }
@keyframes herorBreathe { 0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1);} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.07);} }

/* logomark — lives in .hhw-bg-sticky (wrapper-level shared background) */
.heror-wm-col { position: absolute; left: 50%; top: 0; transform: translate(-50%, 0);
  display: flex; flex-direction: column; align-items: center; will-change: transform; }
.heror-wm { width: min(2000px, 142vw); height: auto; aspect-ratio: 450 / 440; color: var(--electric); opacity: .05; flex: 0 0 auto; transform: rotate(-90deg); }

.heror-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: 1; pointer-events: none;
  background-image: linear-gradient(rgba(144,171,181,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(144,171,181,.10) 1px, transparent 1px);
  background-size: 64px 64px; transform: perspective(620px) rotateX(62deg); transform-origin: bottom center;
  mask-image: linear-gradient(to top, #000 0%, transparent 92%); -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 92%);
  animation: herorFloor 9s linear infinite; opacity: .55; }
@keyframes herorFloor { from{background-position:0 0,0 0;} to{background-position:0 64px,64px 0;} }
.heror-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(8,18,23,.74) 0%, rgba(8,18,23,.34) 26%, rgba(8,18,23,0) 48%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 96%); }
.heror-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(120% 120% at 52% 42%, transparent 66%, rgba(5,12,16,.28) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 96%); }

/* inner — same width/padding as the nav container so copy aligns to the logo
   and the unit aligns to the Request-a-quote button's right edge */
.heror-inner { position: absolute; top: 0; bottom: 0; left: 0; right: 0;
  max-width: var(--container); margin: 0 auto; z-index: 4; pointer-events: none; }

/* unit — width-anchored framing box. Right edge sits on the container's right padding
   line (= the Request-a-quote button's right edge); top aligned with the headline.
   Fixed width gives a stable frame; the rotation scales to fit inside it. */
.heror-unit { position: absolute; z-index: 3; will-change: transform; pointer-events: none;
  top: calc(15vh - 4px);
  right: max(8px, calc((100vw - var(--container)) / 2 - 2px));
  width: clamp(360px, 40vw, 620px); }
.heror-unit-anim { position: relative; width: 100%; will-change: transform, opacity; }
.heror-unit-main { width: 100%; height: auto; display: block; position: relative; z-index: 2; }
/* contact shadow removed per request */
.heror-unit-ground { display: none; }

/* rotation readout — sits under the unit base, fills the lower-right with purpose */
.heror-readout { position: absolute; left: 8%; right: 8%; top: calc(100% + 18px); }
.heror-readout-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.heror-readout-cap { font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.42); }
.heror-readout-angle { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: rgba(255,255,255,.85); font-variant-numeric: tabular-nums; }
.heror-readout-angle b { color: var(--lemon); font-weight: 800; }
.heror-readout-track { position: relative; height: 2px; background: rgba(255,255,255,.14); border-radius: 2px; overflow: hidden; }
.heror-readout-track i { position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: var(--lemon); border-radius: 2px; }

/* copy — left edge to container left (aligned with the logo) */
.heror-copy { position: absolute; left: 28px; top: 15vh; max-width: 480px; pointer-events: auto; }

/* ===== Chevron bridge: dark hero → white calculator ===== */
.heror-outro { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
/* a downward chevron seam rises as the rotation completes: faint echo + electric stroke + white fill */
.heror-curtain-wrap { position: absolute; left: -4%; right: -4%; bottom: 0; height: 62%;
  transform: translateY(calc((1 - var(--o, 0)) * 104%)); }
.heror-curtain-echo, .heror-curtain-stroke, .heror-curtain {
  position: absolute; inset: 0;
  clip-path: polygon(0% 24%, 26% 24%, 50% 100%, 74% 24%, 100% 24%, 100% 100%, 0% 100%); }
.heror-curtain-echo   { background: var(--electric); opacity: .30; transform: translateY(-46px); }
.heror-curtain-stroke { background: var(--electric); transform: translateY(-15px); }
.heror-curtain        { background: var(--paper); }
.heror .hero-photo-h1 { animation: none; }
.heror .hero-photo-h1 .hpl { display: block; }
.heror .hero-photo-sub { margin-top: 0; animation: none; }

/* extra block (sub + CTA) sits below the headline; revealed after the first scroll */
.heror-extra { margin-top: 96px; opacity: 0; transform: translateY(18px); pointer-events: none;
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.heror-extra.in { opacity: 1; transform: translateY(0); pointer-events: auto; }
.heror .hero-photo-foot { animation: none; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 8px; }
.heror .hero-photo-foot-divider { display: none; }

/* entrance — headline fades in line-by-line from the left; unit fades in from the right.
   Base state is visible; the JS-added .entered class force-locks the final visible state
   so content can never be stranded hidden if the animation engine is throttled. */
.heror.go .hpl { animation: herorLineIn .85s cubic-bezier(.2,.7,.2,1) both; }
.heror.go .hpl:nth-child(1) { animation-delay: .10s; }
.heror.go .hpl:nth-child(2) { animation-delay: .22s; }
.heror.go .hpl:nth-child(3) { animation-delay: .34s; }
.heror.go .hpl:nth-child(4) { animation-delay: .46s; }
@keyframes herorLineIn { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: translateX(0); } }
.heror.go .heror-unit-anim { animation: herorUnitIn 1.15s cubic-bezier(.2,.7,.2,1) .15s both; }
@keyframes herorUnitIn { from { opacity: 0; transform: translateX(64px); } to { opacity: 1; transform: translateX(0); } }
.heror.entered .hpl,
.heror.entered .heror-unit-anim { opacity: 1 !important; transform: none !important; animation: none !important; }

/* scroll cue */
.heror-cue { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(255,255,255,.55); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; transition: opacity .5s; }
.heror-cue .mouse { width: 22px; height: 34px; border: 1.5px solid rgba(255,255,255,.4); border-radius: 12px; position: relative; }
.heror-cue .mouse::after { content: ''; position: absolute; left: 50%; top: 6px; width: 3px; height: 6px; border-radius: 2px; background: #fff; transform: translateX(-50%); animation: herorWheel 1.6s ease-in-out infinite; }
@keyframes herorWheel { 0%{opacity:0;transform:translate(-50%,0);} 40%{opacity:1;} 100%{opacity:0;transform:translate(-50%,10px);} }

@media (max-width: 840px) {
  .heror { height: 280vh; }
  .heror-inner { max-width: none; }
  /* headline ABOVE the rotation, left-aligned; copy column spans the stage so the
     Mobile BESS + CTA block can pin to the bottom, also left-aligned */
  .heror-copy { left: 24px; right: 24px; top: calc(74px + 3vh); bottom: 4%; max-width: none; padding: 0; text-align: left; }
  .heror .hero-photo-h1 { font-size: 38px; max-width: none; }
  .heror-extra { position: absolute; left: 0; right: 0; bottom: 0; margin-top: 0; text-align: left; }
  .heror .hero-photo-foot { justify-content: flex-start; }
  /* unit centered between the headline and the lower text */
  .heror-unit { left: 50%; right: auto; transform: translateX(-50%); top: 37%; width: min(60vw, 42vh, 300px); }
  .heror.go .heror-unit-anim { animation: none; }
  .heror-scrim { background: linear-gradient(to top, rgba(8,18,23,.85) 0%, rgba(8,18,23,.2) 42%, rgba(8,18,23,0) 72%); }
  .heror-wm { width: min(1100px, 170vw); }
  .heror.go .hpl { animation-name: herorLineUp; }
  @keyframes herorLineUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
}