.wonder-hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;width:100%;min-height:560px;height:100vh;height:100svh;overflow:hidden;background-color:var(--wonder-hero-bg, var(--wonder-black));color:var(--wonder-hero-text, var(--wonder-ivory));font-family:var(--wonder-font-body)}.wonder-hero--large{height:86vh;height:86svh}.wonder-hero--middle{align-items:center}.wonder-hero__media{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;animation:wonder-settle 2.4s var(--wonder-ease) both}.wonder-hero__poster,.wonder-hero__poster img,.wonder-hero__video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:var(--wonder-hero-focus, 50% 50%)}.wonder-hero__video{opacity:0;transition:opacity 1.2s var(--wonder-ease)}.wonder-hero__video.is-playing{opacity:1}.wonder-hero__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#0808089e,#08080829 34%,#0808084d 58%,#080808e6);opacity:var(--wonder-hero-overlay, 1)}.wonder-hero__placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:24px;color:var(--wonder-muted);font-size:14px;letter-spacing:.08em;text-align:center}.wonder-hero__inner{width:100%;max-width:1680px;margin:0 auto;padding:calc(var(--wonder-header-h) + 40px) var(--wonder-gutter) clamp(56px,9vh,110px)}.wonder-hero--center .wonder-hero__inner{text-align:center}.wonder-hero__inner>*{animation:wonder-rise 1.4s var(--wonder-ease) both;animation-delay:calc(.25s + var(--wonder-i, 0) * .14s)}.wonder-hero__eyebrow{margin:0 0 22px;color:var(--wonder-gold);font-size:12px;letter-spacing:.32em;text-transform:uppercase}.wonder-hero__heading{margin:0;color:inherit;font-family:var(--wonder-font-heading);font-size:clamp(40px,8.6vw,100px);font-weight:500;letter-spacing:.01em;line-height:.96;text-transform:uppercase}.wonder-hero__sub{max-width:32em;margin:26px 0 0;color:#f6f1e8db;font-size:clamp(16px,1.5vw,20px);font-weight:300;letter-spacing:.01em;line-height:1.55}.wonder-hero--center .wonder-hero__sub{margin-right:auto;margin-left:auto}.wonder-hero__actions{display:flex;flex-direction:column;gap:12px;margin-top:36px}.wonder-hero__video-toggle{position:absolute;top:calc(var(--wonder-header-h) + 12px);right:var(--wonder-gutter);display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid rgba(246,241,232,.35);border-radius:50%;background-color:#08080859;color:var(--wonder-ivory);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .5s var(--wonder-ease),background-color .5s var(--wonder-ease)}.wonder-hero__video-toggle[hidden]{display:none}.wonder-hero__video-toggle:hover{border-color:var(--wonder-ivory);background-color:#0808088c}.wonder-hero__video-toggle:focus-visible,.wonder-hero__scroll:focus-visible{outline:2px solid var(--wonder-gold);outline-offset:4px}.wonder-hero__video-toggle .wonder-hero__icon-play,.wonder-hero__video-toggle[data-paused=true] .wonder-hero__icon-pause{display:none}.wonder-hero__video-toggle[data-paused=true] .wonder-hero__icon-play{display:inline-flex}.wonder-hero__scroll{display:none}@media screen and (min-width:750px){.wonder-hero__actions{flex-direction:row;flex-wrap:wrap;gap:16px;margin-top:44px}.wonder-hero--center .wonder-hero__actions{justify-content:center}.wonder-hero__video-toggle{top:auto;bottom:36px}}@media screen and (min-width:990px){.wonder-hero__scroll{position:absolute;bottom:28px;left:50%;display:flex;align-items:flex-end;justify-content:center;width:44px;height:64px;padding:0;border:0;background:transparent;color:var(--wonder-ivory);cursor:pointer;transform:translate(-50%)}.wonder-hero__scroll span{display:block;width:1px;height:48px;background:linear-gradient(180deg,#f6f1e800,#f6f1e8cc);transform-origin:top center;animation:wonder-cue 2.8s var(--wonder-ease) infinite}}@keyframes wonder-rise{0%{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}@keyframes wonder-settle{0%{transform:scale(1.06)}to{transform:scale(1)}}@keyframes wonder-cue{0%{opacity:0;transform:scaleY(0)}40%{opacity:1;transform:scaleY(1)}to{opacity:0;transform:scaleY(1)}}@media(prefers-reduced-motion:reduce){.wonder-hero__media,.wonder-hero__inner>*,.wonder-hero__scroll span{animation:none}.wonder-hero__video{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/4/assets/wonder-hero.css.map */