/*
 * Photographic VFX cinematic opening — 2026.07.26.77 / film v6.
 *
 * Traffic, cloud drift and lightning are baked into one compact H.264 loop.
 * A single stateful canvas handles all long-lived window states without
 * creating one DOM element per window.
 */
.hwx-hero__media{
  background:#061411;
}

.hwx-hero__media::after{
  z-index:2;
  background:
    linear-gradient(90deg,rgba(3,14,12,.82) 0%,rgba(4,16,14,.53) 38%,rgba(4,16,14,.1) 67%,rgba(3,13,12,.05) 100%),
    linear-gradient(0deg,rgba(3,14,12,.42) 0%,rgba(3,14,12,.08) 45%,rgba(2,10,10,.16) 100%);
  pointer-events:none;
}

.hwx-hero__plane{
  position:absolute;
  z-index:0;
  inset:-2.5%;
  height:105%;
  overflow:hidden;
  transform:translate3d(0,var(--hwx-hero-shift,0),0) scale(1.025);
  transform-origin:center;
}

.hwx-hero__plane picture,
.hwx-hero__film{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
}

.hwx-hero__plane img,
.hwx-hero__film{
  width:100%!important;
  height:100%!important;
  object-fit:cover;
  object-position:center;
  transform:none!important;
}

.hwx-hero__plane img{
  filter:saturate(.96) contrast(1.04) brightness(1.02);
}

.hwx-hero__film{
  z-index:1;
  border:0;
  filter:saturate(.96) contrast(1.04) brightness(1.02);
  opacity:0;
  transition:none;
  pointer-events:none;
}

.hwx-hero__film.is-ready{
  opacity:1;
}

.hwx-hero__window-layer{
  position:absolute;
  z-index:2;
  inset:0;
  display:block;
  width:100%!important;
  height:100%!important;
  object-fit:cover;
  object-position:center;
  opacity:0;
  pointer-events:none;
  transition:opacity 1.6s ease;
}

.hwx-hero__window-layer.is-ready{
  opacity:1;
}

.hwx-weather-canvas,
.hwx-lightning-glow,
.hwx-traffic-canvas{
  display:none!important;
}

/*
 * The photograph is the hero. The maxim remains unmistakable, but no longer
 * covers the bend, the storm and most of the lit city at the same time.
 */
@media(min-width:901px) and (pointer:fine){
  .hwx-hero .hwx-hero__latin{
    width:min(54vw,10.4ch);
    font-size:clamp(4.2rem,min(7.2vw,12.4svh),7.9rem)!important;
    line-height:.8!important;
    letter-spacing:-.068em;
  }

  .hwx-hero.is-phase-1 .hwx-hero__latin{
    transform:translate3d(0,-2px,0) scale(.76);
  }

  .hwx-hero__places{
    right:clamp(42px,4vw,76px);
    opacity:.46;
  }

  .hwx-hero__grid{
    opacity:.07;
  }

  .hwx-rail a.is-current span{
    opacity:0;
    transform:translateX(6px);
  }

  .hwx-rail a.is-current:hover span,
  .hwx-rail a.is-current:focus-visible span{
    opacity:1;
    transform:none;
  }
}

@media(max-width:700px){
  /* Static mobile hero — the WebP poster is the complete phone experience. */
  .hwx-hero__film{
    display:none!important;
  }

  .hwx-hero{
    min-height:max(700px,calc(100svh - 86px));
  }

  .hwx-hero__plane{
    inset:-1.5%;
    height:103%;
    transform:none!important;
  }

  .hwx-hero__plane img,
  .hwx-hero__film{
    object-position:center center;
    filter:saturate(.94) contrast(1.04) brightness(.94);
  }

  .hwx-hero__window-layer{
    display:none!important;
  }

  .hwx-hero__media::after{
    background:
      linear-gradient(0deg,rgba(5,20,17,.42) 0%,rgba(5,20,17,.16) 44%,rgba(5,20,17,.08) 70%,rgba(5,20,17,.14) 100%),
      linear-gradient(90deg,rgba(5,20,17,.58) 0%,rgba(5,20,17,.26) 60%,rgba(5,20,17,.04) 100%);
  }

  .hwx-hero__inner{
    padding-block:44px 28px;
  }

  .hwx-hero .hwx-hero__latin{
    margin-top:12px;
    max-width:8.7ch;
    font-size:clamp(3.2rem,14.4vw,4.15rem)!important;
    line-height:.82!important;
  }

  .hwx-hero__maxim-key{
    margin-top:20px;
  }

  .hwx-hero__maxim-key + .hwx-hero__lead{
    margin-top:20px;
  }

  .hwx-hero__lead{
    gap:16px;
  }

  .hwx-hero__lead .hwx-lead{
    font-size:1rem;
    line-height:1.5;
  }

  .hwx-hero__actions{
    gap:8px;
  }

  .hwx-hero__actions .hwx-button{
    min-height:48px;
    padding-inline:18px;
    font-size:.68rem;
  }

  .hwx-motion-ready .hwx-hero>.hwx-hero__stage .hwx-kicker.hwx-reveal,
  .hwx-motion-ready .hwx-hero>.hwx-hero__stage .hwx-hero__actions.hwx-reveal{
    opacity:1;
    clip-path:none;
    transform:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .hwx-hero__film,
  .hwx-hero__window-layer{
    display:none!important;
  }

  .hwx-hero__plane{
    transform:none!important;
  }
}