/* Match the poster glare and catch exposed lower bleed. */
.hero{
  position:relative; height:100svh; min-height:520px; overflow:hidden;
  background:linear-gradient(#fff 0 52%, #c98a52 84%, #8a5a33 100%);
  isolation:isolate;
}
.hero::after{
  content:''; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(10,15,22,.24),transparent 42%),
    radial-gradient(80% 70% at 72% 64%,transparent 42%,rgba(48,25,9,.16) 100%);
  mix-blend-mode:multiply;
}
.hero__stage{
  position:absolute; z-index:1;   /* Positioned by fit(). */
}
/* The backdrop bypasses the group mask. */
.hero__sky{ position:absolute; inset:0 }

.hero__group{
  position:absolute; inset:0;
  opacity:0; transition:opacity .5s var(--ease-out);      /* revealed on 'is-ready' */
  /* Apply the PSD group mask once in stage space. */
  -webkit-mask:url(layers/_mask.webp?v=20260911) 0 0/100% 100% no-repeat;
          mask:url(layers/_mask.webp?v=20260911) 0 0/100% 100% no-repeat;
}
.hero__l{
  position:absolute; margin:0; display:block;
  transform:translate3d(0,0,0);
  will-change:auto;
  backface-visibility:hidden;
}
/* Slow bloom makes the sun read as heat. */
.hero__l[data-id="sun"]{ animation:bloom 11s var(--ease-in-out) infinite paused }
.hero.is-live .hero__l:not(.brand){will-change:transform}
.hero.is-live .hero__l[data-id="sun"]{animation-play-state:running}
@keyframes bloom{ 0%,100%{opacity:.88} 50%{opacity:1} }

.hero.is-ready .hero__group{ opacity:1 }

/* Static LCP and reduced-motion fallback. Keep it below the stage. */
.hero__still{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  transition:opacity .6s var(--ease-out);
}
.hero.is-ready .hero__still{ opacity:0 }

/* Limit portrait cover crop. */
@media (max-aspect-ratio: 1/1){
  .hero{ height:64svh; min-height:400px }
  .hero__copy{ padding:0 7vw 8vh }
}

/* Reduced motion uses one frame. */
@media (prefers-reduced-motion:reduce){
  .hero{ background:#fff }
  .hero__stage{ display:none }
  .hero.is-ready .hero__still{ opacity:1 }   /* Flat fallback. */
}

/* Copy. */
.hero__copy{
  position:absolute; inset:auto 0 0 0; padding:0 8vw 11vh;
  color:#fff; text-shadow:0 2px 24px rgba(60,25,0,.55);
  font:400 1rem/1.5 ui-sans-serif,system-ui,sans-serif;
}
.hero__copy h1{
  margin:0 0 .4em; font-size:clamp(1.6rem,7.6vw,5.5rem); font-weight:200;
  letter-spacing:.14em; text-transform:uppercase;
}
.hero__copy p{ margin:0; max-width:34ch; opacity:.85; letter-spacing:.04em }

/* Dev panel. */
.panel{
  position:fixed; right:12px; top:12px; z-index:9; width:236px;
  background:#14100ee6; backdrop-filter:blur(8px); color:#e8ded2;
  border:1px solid #ffffff1f; border-radius:10px; padding:10px 12px;
  font:11px/1.6 ui-monospace,monospace;
}
.panel h2{ margin:0 0 6px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; opacity:.6 }
.panel label{ display:flex; align-items:center; gap:6px; justify-content:space-between; margin:2px 0 }
.panel input[type=range]{ width:92px }
.panel table{ width:100%; border-collapse:collapse; margin-top:8px; font-size:10px }
.panel td{ padding:1px 0; cursor:default }
.panel td:last-child{ text-align:right; opacity:.65 }
.panel tr.hd td{ opacity:.45; border-bottom:1px solid #ffffff1a }
.panel tr.on td{ color:#ffb85c; opacity:1 }
.outline .hero__l{ outline:1px solid #ff5c5c80 }
@media (max-width:640px){ .panel{ display:none } }

.after{ min-height:120vh; background:#120e0b; color:#8d7863; padding:14vh 8vw;
        font:300 1.05rem/1.7 ui-sans-serif,system-ui,sans-serif }
.after p{ max-width:52ch }