/* Bruhtel animated hero scene (index3). Pure CSS/JS layers on top of the existing still.
   All positions are percentages of the hero artwork; hero-scene.js sizes .hs-scene
   to exactly match the image's object-fit:cover box, so the layers stay pinned to the artwork. */
.hs-scene{position:absolute;inset:0;z-index:-3;overflow:visible;transform-origin:60% 40%;}
.hs-scene>.landing-hero-art{z-index:auto}
.hs-layer{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.hs-ready .hs-layer{opacity:1}
.landing-hero{overflow:hidden}
.hs-rain{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 2s ease}
.hs-ready .hs-rain{opacity:1}

/* Generic light glow */
.hs-glow{position:absolute;left:var(--x);top:var(--y);width:var(--s);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,var(--c,rgba(255,196,110,.55)) 0%,rgba(255,170,80,.18) 35%,transparent 68%);
  mix-blend-mode:screen;animation:hs-breathe var(--d,6s) ease-in-out var(--delay,0s) infinite}
.hs-glow.is-pink{--c:rgba(255,60,170,.55)}
.hs-glow.is-buzz{animation:hs-buzz var(--d,7s) steps(1,end) var(--delay,0s) infinite}
.hs-glow.is-headlight{--c:rgba(255,236,190,.5)}
@keyframes hs-breathe{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.94)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}}
@keyframes hs-buzz{0%{opacity:.9}61%{opacity:.9}62%{opacity:.15}63%{opacity:.85}64%{opacity:.2}66%{opacity:.95}88%{opacity:.8}89%{opacity:.35}90%{opacity:.9}100%{opacity:.9}}

/* Lit window that occasionally flickers */
.hs-window{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);background:rgba(255,200,110,.35);mix-blend-mode:screen;filter:blur(1px);animation:hs-buzz 11s steps(1,end) var(--delay,0s) infinite}

/* Low mist drifting across the pavement */
.hs-mist{position:absolute;z-index:-3;left:-20%;right:-20%;bottom:-6%;height:42%;pointer-events:none;
  background:radial-gradient(ellipse 30% 45% at 20% 70%,rgba(200,190,175,.10),transparent 70%),radial-gradient(ellipse 35% 40% at 65% 80%,rgba(200,190,175,.09),transparent 70%),radial-gradient(ellipse 25% 35% at 95% 65%,rgba(200,190,175,.08),transparent 70%);
  animation:hs-drift 38s ease-in-out infinite alternate}
@keyframes hs-drift{from{transform:translateX(-6%)}to{transform:translateX(6%)}}

/* Phones: keep the lights and rain, drop the camera move and mist (cheaper, less distracting) */
@media(max-width:800px){.hs-ready .hs-scene{animation:none}.hs-mist{display:none}}
@media(prefers-reduced-motion:reduce){.hs-scene,.hs-scene *,.hs-mist{animation:none!important}.hs-rain{display:none}}