/* HOME PAGE ONLY: scroll animations (option 2). Everything is under html.anim,
   which is set only when the visitor has not asked for reduced motion. */

/* red zip-line scroll progress bar at the very top */
html.anim .progress{position:fixed;left:0;top:0;height:4px;width:100%;background:var(--seal);transform-origin:0 50%;transform:scaleX(0);z-index:50;pointer-events:none}

/* header shrinks and gets a shadow once you scroll */
html.anim header.site{transition:box-shadow .3s}
html.anim header.site .wrap{transition:min-height .3s}
html.anim .brand img{transition:height .3s}
html.anim header.site.shrunk{box-shadow:0 6px 20px rgba(19,41,61,.12)}
html.anim header.site.shrunk .wrap{min-height:64px}
html.anim header.site.shrunk .brand img{height:46px}
html.anim header.site.shrunk .bn{font-size:1.3rem}
html.anim header.site.shrunk .bt{display:none}

/* hero: staggered entrance, image wipe, zip-line drawing across the bottom */
html.anim .hero{position:relative;overflow:hidden}
@keyframes up{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes wipe{from{clip-path:inset(-60px 100% -60px -60px);transform:scale(1.12)}to{clip-path:inset(-60px -60px -60px -60px);transform:scale(1)}}
@keyframes zip{from{transform:scaleX(0)}to{transform:scaleX(1)}}
html.anim .hero h1{animation:up .9s cubic-bezier(.2,.7,.2,1) .1s both}
html.anim .hero .lead{animation:up .9s cubic-bezier(.2,.7,.2,1) .3s both}
html.anim .hero .actions{animation:up .9s cubic-bezier(.2,.7,.2,1) .5s both}
html.anim .hero .wrap>img{animation:wipe 1.3s cubic-bezier(.65,0,.2,1) .2s both;will-change:transform}
html.anim .hero .wrap>img.settled{animation:none;clip-path:none;transform:translate3d(0,var(--py,0px),0) scale(var(--ps,1))}
html.anim .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;border-top:2px solid var(--seal);border-bottom:2px solid var(--seal);transform-origin:0 50%;animation:zip 1.6s cubic-bezier(.65,0,.2,1) .6s both}

/* generic reveal on scroll */
html.anim [data-reveal]{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
html.anim [data-reveal=left]{transform:translateX(-48px)}
html.anim [data-reveal=right]{transform:translateX(48px)}
html.anim [data-reveal=scale]{transform:scale(.92)}
html.anim [data-reveal].in{opacity:1;transform:none}

/* product photo wipes in, then zooms gently on hover */
html.anim .prod img[data-reveal]{opacity:1;transform:none;clip-path:inset(-60px 100% -60px -60px);transition:clip-path 1.1s cubic-bezier(.65,0,.2,1) var(--d,0s)}
html.anim .prod img[data-reveal].in{clip-path:inset(-60px -60px -60px -60px)}
html.anim .prod img{transition:transform .6s}
html.anim .prod:hover img.in{transform:scale(1.04)}

/* section headings get a red zip-line that draws itself */
html.anim .hseal::after{content:"";display:block;width:0;height:7px;margin-top:14px;border-top:2px solid var(--seal);border-bottom:2px solid var(--seal);transition:width 1s cubic-bezier(.65,0,.2,1) .25s}
html.anim .hseal.in::after{width:96px}
.cta .hseal::after{border-color:#fff}

/* size chart: bags grow up from the baseline, smallest first */
html.anim .sizes svg .bag{transform-box:fill-box;transform-origin:0 100%;transform:scale(.2);opacity:0;transition:transform .7s cubic-bezier(.3,1.4,.5,1),opacity .4s;transition-delay:calc(var(--i,0)*.12s + .2s)}
html.anim .sizes.in svg .bag{transform:none;opacity:1}

/* FAQ rows and use cards stagger in via data-reveal; plus hover lift on uses */
html.anim .uses div{transition:transform .3s}
html.anim .uses div.in:hover{transform:translateY(-4px)}

/* fact strip numbers */
html.anim .facts b{font-variant-numeric:tabular-nums}

/* scrolling back up plays everything in reverse, quickly and without stagger */
html.anim [data-reveal]:not(.in){transition-delay:0s;transition-duration:.45s}
html.anim .prod img[data-reveal]:not(.in){transition-delay:0s;transition-duration:.6s}
html.anim .hseal:not(.in)::after{transition-delay:0s;transition-duration:.4s}
html.anim .sizes:not(.in) svg .bag{transition-delay:0s;transition-duration:.35s}