.hero-image.hero-scene{isolation:isolate;background:#261035}
.hero-vial-window{position:absolute;inset:7% 0 12%;overflow:hidden;touch-action:pan-y;cursor:grab;z-index:2}
.hero-vial-track{height:100%;width:600%;display:flex;will-change:transform;transform:translateX(-50%);transition:transform .65s cubic-bezier(.22,.68,.2,1)}
.hero-vial-group{display:flex;width:50%;height:100%;flex-shrink:0}
.hero-vial-card{position:relative;width:33.333333%;height:100%;flex-shrink:0;filter:drop-shadow(10px 24px 14px #16052280)}
.hero-vial-card img{position:absolute;top:18%;left:11%;width:78%;height:64%;max-width:none;object-fit:contain;transform:rotate(-7deg);pointer-events:none;user-select:none}
.hero-vial-card:nth-child(2) img{transform:rotate(8deg) translateY(3%)}
.hero-vial-card:nth-child(3) img{transform:rotate(-3deg) translateY(-2%)}
.hero-carousel-dots{position:absolute;bottom:62px;left:0;right:0;display:flex;justify-content:center;z-index:4;gap:2px}
.hero-carousel-dots button{width:32px;height:30px;border:0;background:none;position:relative;padding:0}
.hero-carousel-dots button:before{content:'';position:absolute;top:13px;left:13px;width:6px;height:6px;border-radius:10px;background:#ebd7ff70;transition:width .3s,left .3s,background .3s}
.hero-carousel-dots button[aria-current=true]:before{width:22px;left:5px;background:#f5e8ff}
.hero.hero-still .hero-vial-track,.hero.hero-offscreen .hero-vial-track{animation-play-state:paused}
@keyframes hero-vials-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.hero-vial-track{transition:none;will-change:auto}}
.hero-scene .hero-scenery{position:absolute;inset:-5%;width:110%;height:110%;max-width:none;object-fit:cover;z-index:-2;animation:hero-satin-drift 24s ease-in-out infinite alternate;will-change:transform}
.hero-scene:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#16092266,transparent 28%);z-index:1;pointer-events:none}
.hero-float{position:absolute;pointer-events:none;will-change:transform;filter:drop-shadow(12px 26px 17px #13052270)}
.hero-float img{position:absolute;left:-30%;top:0;width:160%;height:100%;object-fit:contain;max-width:none}
.hero-float-one{left:8%;top:2%;width:46%;height:62%;transform:rotate(10deg);animation:hero-vial-one 9s ease-in-out infinite}
.hero-float-two{left:40%;top:40%;width:50%;height:60%;transform:rotate(48deg);animation:hero-vial-two 11s ease-in-out infinite;animation-delay:-3s}
.hero-scene .image-caption{z-index:3;right:76px;text-shadow:0 1px 8px #180721}
.hero-motion-toggle{position:absolute;right:20px;bottom:19px;z-index:4;border:1px solid #dfc3ee66;border-radius:50%;width:35px;height:35px;padding:0;display:grid;place-items:center;background:#1c0d2866;backdrop-filter:blur(10px)}
.hero-motion-toggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
.hero .hero-copy{background:#160f20}
.hero .hero-copy:after{content:'';position:absolute;inset:-3%;background:#160f20 url('/assets/hero-left.avif') 64% center/cover;animation:hero-copy-drift 27s ease-in-out infinite alternate;z-index:0;pointer-events:none;will-change:transform}
.hero .hero-copy:before{z-index:1}.hero-copy-inner,.hero-foot{z-index:2}
.hero.hero-still .hero-float,.hero.hero-still .hero-scenery,.hero.hero-still .hero-copy:after,.hero.hero-offscreen .hero-float,.hero.hero-offscreen .hero-scenery,.hero.hero-offscreen .hero-copy:after{animation-play-state:paused}
@keyframes hero-satin-drift{0%{transform:translate(-1.3%,0) scale(1.025)}100%{transform:translate(1.3%,-1%) scale(1.065)}}
@keyframes hero-copy-drift{0%{transform:translate(-.6%,.4%) scale(1.02)}100%{transform:translate(.6%,-.6%) scale(1.045)}}
@keyframes hero-vial-one{0%,100%{transform:translate(0,0) rotate(10deg)}50%{transform:translate(12px,-17px) rotate(12deg)}}
@keyframes hero-vial-two{0%,100%{transform:translate(0,0) rotate(48deg)}50%{transform:translate(15px,-13px) rotate(45deg)}}
@media(max-width:760px){.hero-image.hero-scene{aspect-ratio:4/5;min-height:0}.hero-float-one{left:7%;top:3%;height:62%;width:47%}.hero-float-two{left:39%;top:39%;height:60%;width:50%}.hero-motion-toggle{width:32px;height:32px;right:16px;bottom:16px}.hero-scene .image-caption{right:65px;font-size:6px;gap:10px}.hero .hero-copy:after{background-position:62% center}}
@media(prefers-reduced-motion:reduce){.hero-float,.hero-scenery,.hero .hero-copy:after{animation:none!important;will-change:auto}.hero-motion-toggle{display:none}}

.hero-vial-track.is-resetting{transition:none}.hero-vial-window:active{cursor:grabbing}