html{scroll-behavior:smooth;scroll-padding-top:90px}
button,a,select{transition:transform .22s ease,background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}
button:active,.cta:active,.primary:active,.channel-card:active{transform:scale(.97)}
.product-image img{transition:transform .65s cubic-bezier(.22,1,.36,1)}
.product-image:hover img{transform:scale(1.045)}
.product-image:active img{transform:scale(1.015)}
.motion-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1);transition-delay:var(--motion-delay,0ms)}
.motion-reveal.motion-visible{opacity:1;transform:translateY(0)}
.hero-copy{animation:heroEntrance .85s cubic-bezier(.22,1,.36,1) both}
dialog[open]{animation:dialogEntrance .34s cubic-bezier(.22,1,.36,1) both}
dialog[open]::backdrop{animation:backdropEntrance .3s ease both}
dialog[open].motion-closing{animation:dialogExit .2s ease both;pointer-events:none}
dialog[open].motion-closing::backdrop{animation:backdropExit .2s ease both}
.cart-row{animation:heroEntrance .3s ease both}
#count.motion-pop{animation:countPop .4s ease}
@keyframes heroEntrance{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes dialogEntrance{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes dialogExit{to{opacity:0;transform:translateY(12px) scale(.98)}}
@keyframes backdropEntrance{from{opacity:0}to{opacity:1}}
@keyframes backdropExit{to{opacity:0}}
@keyframes countPop{50%{transform:scale(1.3)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.motion-reveal{opacity:1;transform:none}}