/* Home hero: the three featured pouches take turns, drifting in and out. */
.hero-carousel .hc-float{position:absolute;inset:0;animation:hc-float 6s ease-in-out infinite}
.hero-carousel .hc-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:translate3d(0,34px,0) rotate(-7deg) scale(.92);filter:blur(6px);transition:opacity .9s ease,transform 1.2s cubic-bezier(.16,1,.3,1),filter 1s ease}
.hero-carousel .hc-slide.is-active{opacity:1;transform:none;filter:none}
.hero-carousel .hc-slide.is-leaving{opacity:0;transform:translate3d(0,-30px,0) rotate(7deg) scale(.95);filter:blur(6px)}
@keyframes hc-float{50%{transform:translateY(-12px)}}
.hc-dots{position:absolute;left:14%;bottom:20px;display:flex;gap:8px;z-index:3}
.hc-dots button{width:26px;height:3px;padding:0;border:0;border-radius:3px;background:#c8dfe9;cursor:pointer;position:relative;overflow:hidden}
.hc-dots button::before{content:"";position:absolute;inset:-10px -3px}
.hc-dots button::after{content:"";position:absolute;inset:0;background:var(--blue);transform:scaleX(0);transform-origin:left}
.hc-dots button[aria-pressed="true"]::after{animation:hc-progress var(--hc-time,4800ms) linear forwards}
.hero-carousel.paused~.hc-dots button[aria-pressed="true"]::after,.hc-dots.paused button[aria-pressed="true"]::after{animation-play-state:paused}
@keyframes hc-progress{to{transform:scaleX(1)}}
.home-hero .art-caption{transition:opacity .4s}
.home-hero .art-caption.swap{opacity:0}
@media(max-width:600px){.hc-dots{left:6%;bottom:2px}}
@media(prefers-reduced-motion:reduce){.hero-carousel .hc-float{animation:none}.hc-dots button[aria-pressed="true"]::after{animation:none;transform:scaleX(1)}}