/* Same cover geometry as the original photo, so the cap and nozzle stay registered. */
.hero-spray-layer{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;container-type:size;--spray-duration:4800ms}
.hero-spray-plane{position:absolute;width:max(100cqw,calc(100cqh * var(--scene-ratio)));aspect-ratio:var(--scene-ratio);left:50%;top:50%;transform:translate(-50%,-50%)}
.hero-open-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:0;mask-image:linear-gradient(90deg,transparent 44%,#000 46%,#000 54%,transparent 56%),linear-gradient(transparent 26%,#000 28%,#000 52%,transparent 55%);mask-composite:intersect}
.hero-moving-cap{position:absolute;opacity:0;background-repeat:no-repeat;border-radius:50% 50% 43% 43% / 53% 53% 45% 45%;transform-origin:50% 90%}
.hero-mist{position:absolute;width:0;height:0;opacity:0}
.mist-cloud{position:absolute;width:clamp(90px,12cqw,260px);height:clamp(50px,6cqw,130px);left:0;top:0;transform:translate(-50%,-50%) scale(.08);opacity:0;background:radial-gradient(ellipse,#fff9 0%,#f7eeff50 28%,#fff2 48%,transparent 72%);border-radius:50%;filter:blur(5px);mix-blend-mode:screen}
.mist-jet{position:absolute;left:-3px;top:-2px;width:6px;height:5px;opacity:0;border-radius:50%;background:#fff;box-shadow:0 0 14px 5px #fff7}
.hero-slide.spray-playing .hero-open-frame{animation:spray-nozzle-reveal var(--spray-duration) linear both}
.hero-slide.spray-playing .hero-moving-cap{animation:spray-cap-lift var(--spray-duration) cubic-bezier(.4,0,.2,1) both}
.hero-slide.spray-playing .hero-mist{animation:spray-mist-window var(--spray-duration) linear both}
.hero-slide.spray-playing .mist-left{animation:spray-mist-left var(--spray-duration) ease-out both}
.hero-slide.spray-playing .mist-right{animation:spray-mist-right var(--spray-duration) ease-out both}
.hero-slide.spray-playing .mist-up{animation:spray-mist-up var(--spray-duration) ease-out both}
.hero-slide.spray-playing .mist-jet{animation:spray-jet var(--spray-duration) linear both}
@keyframes spray-nozzle-reveal{0%,9%{opacity:0}10%,91%{opacity:1}92%,100%{opacity:0}}
@keyframes spray-cap-lift{0%,9%{opacity:0;transform:translate(0,0) rotate(0)}10%{opacity:1;transform:translate(0,0) rotate(0)}28%,69%{opacity:1;transform:translate(118%,-68%) rotate(18deg)}91%{opacity:1;transform:translate(0,0) rotate(0)}92%,100%{opacity:0;transform:translate(0,0) rotate(0)}}
@keyframes spray-mist-window{0%,28%{opacity:0}30%,76%{opacity:1}87%,100%{opacity:0}}
@keyframes spray-mist-left{0%,29%{opacity:0;transform:translate(-50%,-50%) scale(.08)}37%{opacity:.65}60%{opacity:.22}83%,100%{opacity:0;transform:translate(-125%,-95%) scale(1.35)}}
@keyframes spray-mist-right{0%,31%{opacity:0;transform:translate(-50%,-50%) scale(.08)}39%{opacity:.6}63%{opacity:.2}85%,100%{opacity:0;transform:translate(25%,-90%) scale(1.4)}}
@keyframes spray-mist-up{0%,30%{opacity:0;transform:translate(-50%,-50%) scale(.1)}41%{opacity:.38}80%,100%{opacity:0;transform:translate(-50%,-180%) scale(1.65)}}
@keyframes spray-jet{0%,29%{opacity:0;transform:scale(1)}33%{opacity:.7;transform:scale(2.5,1.5)}39%,100%{opacity:0;transform:scale(6,3)}}
.spray-paused .hero-spray-layer *{animation-play-state:paused!important}
/* Keep the caption out of the moving cap's path during its short lift. */
.hero-slide.spray-playing .hero-notes-caption{animation:spray-caption-clear 4800ms ease both}
@keyframes spray-caption-clear{0%,9%,92%,100%{opacity:1}18%,83%{opacity:0}}
@media(max-width:600px){.mist-cloud{filter:blur(4px);width:145px;height:85px}}
@media(prefers-reduced-motion:reduce){.hero-spray-layer{display:none}.hero-slide.spray-playing .hero-notes-caption{animation:none}}