/* Content is visible until initMotion explicitly marks below-fold reveals. */
.motion-ready .reveal{transition:opacity .7s ease,translate .7s cubic-bezier(.22,1,.36,1)}
.motion-ready .motion-reveal-pending{opacity:0;translate:0 16px}
.hero-sky{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.motion-cloud{position:absolute;display:block;width:30%;opacity:.66;animation:croffle-cloud-drift 42s ease-in-out infinite alternate;animation-play-state:paused;pointer-events:none}
.motion-cloud img{display:block;width:100%;height:auto}
.motion-cloud-1{left:-10%;top:27%;width:34%;animation-duration:49s}
.motion-cloud-2{right:-9%;top:18%;width:31%;animation-delay:-18s;animation-duration:57s;opacity:.58}
.motion-cloud-3{left:58%;top:52%;width:18%;animation-delay:-13s;animation-duration:46s;opacity:.45}
[data-float]{animation:croffle-product-float 6.6s ease-in-out infinite alternate;animation-play-state:paused}
[data-float]:nth-child(even){animation-delay:-2.5s;animation-duration:7.5s}
.drift>.track{animation:croffle-marquee 28s linear infinite;animation-play-state:paused}
.turning-seal{animation:croffle-seal-turn 40s linear infinite;animation-play-state:paused}
.motion-ready .motion-in-view[data-float],.motion-ready .motion-cloud.motion-in-view,.motion-ready .turning-seal.motion-in-view,.motion-ready .drift.motion-in-view>.track{animation-play-state:running}
.motion-ready .motion-cloud.motion-in-view,.motion-ready .motion-in-view[data-float],.motion-ready .turning-seal.motion-in-view{will-change:transform}
.story-word{transition:color .4s ease}
.story-word.is-active{color:var(--ink,#253f2c)}
@keyframes croffle-product-float{from{translate:0 -7px}to{translate:0 9px}}
@keyframes croffle-cloud-drift{from{transform:translate3d(-25px,-4px,0)}to{transform:translate3d(42px,5px,0)}}
@keyframes croffle-marquee{to{transform:translate3d(-50%,0,0)}}
@keyframes croffle-seal-turn{to{rotate:360deg}}
.motion-document-hidden *,.motion-document-hidden *:before,.motion-document-hidden *:after{animation-play-state:paused!important}
.motion-paused{scroll-behavior:auto}
.motion-paused *,.motion-paused *:before,.motion-paused *:after{animation:none!important;transition:none!important}
.motion-paused .reveal,.motion-document-hidden .motion-reveal-pending{opacity:1!important;translate:0!important}
@media(max-width:767px){.motion-cloud-1{width:58%;left:-20%;top:31%}.motion-cloud-2{width:53%;right:-20%;top:17%}.motion-cloud-3{width:34%;left:63%;top:50%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1!important;translate:0!important}}