.three-d-hero{position:relative;isolation:isolate;width:100%;background:#202620;color:#fff}.three-d-hero__hero{position:relative;height:100vh;height:100svh;overflow:hidden;z-index:0}.three-d-hero__video-wrapper,.three-d-hero__video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.three-d-hero__video{object-fit:cover}.three-d-hero__video-wrapper:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#0003}.three-d-hero__content{position:relative;z-index:10;height:100%;box-sizing:border-box;padding:32px 24px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:24px}.three-d-hero__content h2{color:inherit;font-size:clamp(36px,6vw,88px);line-height:1.05;max-width:16ch;margin:0;overflow-wrap:anywhere}.three-d-hero__description{max-width:52ch;font-size:clamp(16px,2vw,22px)}.three-d-hero__description p{margin:0}.three-d-hero__button{display:inline-block;padding:14px 28px;border-radius:999px;background:#fff;color:#202620;text-decoration:none}.three-d-hero__button:focus-visible{outline:3px solid currentColor;outline-offset:5px}.three-d-hero__model-layer{display:none;position:relative;z-index:20;pointer-events:none}.three-d-hero__model-stage{position:sticky;top:0;width:100%;height:100vh;height:100svh;overflow:hidden}.three-d-hero__canvas{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;opacity:0;transition:opacity .5s ease}.three-d-hero__canvas.is-ready{opacity:1}.three-d-hero.is-animated .three-d-hero__hero{position:sticky;top:0}.three-d-hero.is-animated .three-d-hero__content{will-change:transform,opacity}.three-d-hero.is-animated .three-d-hero__model-layer{display:block;height:200vh;height:200svh;margin-top:-18vh;margin-top:-18svh}.three-d-hero.is-static .three-d-hero__model-layer{display:block}.three-d-hero.is-static .three-d-hero__model-stage{position:relative;height:65vh;height:65svh}@media(prefers-reduced-motion:reduce){.three-d-hero__canvas{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/40/assets/section-animated-3d-hero.css.map */
