.hh{--hh-h: max(640px, min(100svh, 1080px));--hh-item: clamp(112px, min(10.5vw, calc(var(--hh-h) * .18)), 180px);--hh-track-pad: 28px;--hh-car-bottom: max(16px, calc(var(--hh-h) * .03));--hh-car-h: calc(var(--hh-item) + var(--hh-track-pad) * 2 + 6px);--hh-cap-w: min( 46vw, calc(100vw - 2 * (min(25vw, 350px) + var(--ms-gutter)) + 40px), calc((var(--hh-h) - var(--ms-header-h) - var(--hh-car-h) - var(--hh-car-bottom)) * 1.1) );--hh-ease-out: cubic-bezier(.16, 1, .3, 1);--hh-ease-in: cubic-bezier(.55, .06, .68, .19);--hh-ring: rgb(20 20 20 / .1);--hh-frame-bg: linear-gradient(180deg, rgb(255 255 255 / .72), rgb(255 255 255 / .42));--hh-frame-border: rgb(255 255 255 / .95);--hh-indicator: var(--ms-ink);position:relative;isolation:isolate;overflow:hidden;height:var(--hh-h);margin-top:calc(-1 * var(--ms-header-h));background:radial-gradient(120% 95% at 50% 35%,var(--hh-bg-from),var(--hh-bg-to));color:var(--ms-ink)}.hh__intro{position:absolute;z-index:3;left:var(--ms-gutter);top:calc(var(--ms-header-h) + var(--hh-h) * .12);max-width:min(30vw,520px)}.hh__eyebrow{margin:0 0 18px;font-size:12px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--ms-ink-2)}.hh__title{margin:0;font-family:var(--font-display);font-weight:860;font-stretch:112%;font-size:clamp(48px,5vw,92px);line-height:.9;letter-spacing:-.025em;text-transform:uppercase}.hh__title span{display:block}.hh__sub{margin:22px 0 0;max-width:28ch;font-size:clamp(15px,1.1vw,18px);line-height:1.5;color:var(--ms-ink-2)}.hh__stage{position:absolute;z-index:1;left:50%;bottom:calc(var(--hh-car-bottom) + var(--hh-car-h) - var(--hh-item) * .3);width:var(--hh-cap-w);aspect-ratio:1400 / 1200;transform:translate(-50%);pointer-events:none}.hh__glows{position:absolute;top:-32%;right:-40%;bottom:-18%;left:-40%;z-index:-2;transform:translate(calc(var(--hh-par-x, 0) * -10px),calc(var(--hh-par-y, 0) * -8px))}.hh__glow{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--glow) 34%,transparent) 0%,color-mix(in srgb,var(--glow) 12%,transparent) 52%,transparent 100%)}.hh__glow.is-intro{animation:hh-fade 1.4s .2s var(--hh-ease-out) both}.hh__glow.is-enter{animation:hh-fade .9s var(--hh-ease-out) both}.hh__glow.is-leave{animation:hh-fade-out .7s ease-out both}@keyframes hh-fade-out{to{opacity:0}}.hh__words{position:absolute;z-index:-1;left:50%;top:44%;width:0;height:0;transform:translate(calc(var(--hh-par-x, 0) * -18px),calc(var(--hh-par-y, 0) * -10px))}.hh__word{position:absolute;left:0;top:0;font-family:var(--font-display);font-weight:900;font-stretch:118%;font-size:calc(var(--hh-cap-w) * .24);line-height:1;letter-spacing:-.02em;white-space:nowrap;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.25px rgb(20 20 20 / .08);transform:translate(-50%,-50%);-webkit-user-select:none;user-select:none}.hh__word.is-intro{animation:hh-word-intro 1.4s .2s var(--hh-ease-out) both}.hh__word.is-enter{animation:hh-word-in 1s 80ms var(--hh-ease-out) both}.hh__word.is-leave{animation:hh-word-out .42s var(--hh-ease-in) both}@keyframes hh-word-intro{0%{opacity:0;letter-spacing:.12em}}@keyframes hh-word-in{0%{opacity:0;transform:translate(calc(-50% + var(--dir) * 14%),-50%)}}@keyframes hh-word-out{to{opacity:0;transform:translate(calc(-50% + var(--dir) * -10%),-50%)}}.hh__tilt{position:absolute;top:0;right:0;bottom:0;left:0;transform:perspective(1400px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg))}.hh__float{position:absolute;top:0;right:0;bottom:0;left:0;animation:hh-float 7s ease-in-out infinite}@keyframes hh-float{50%{transform:translateY(-2.2%)}}.hh__cap{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:50% 85%}.hh__cap.is-enter,.hh__cap.is-leave{will-change:transform,opacity}.hh__cap img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;object-position:50% 100%;-webkit-user-select:none;user-select:none;transform:translateY(calc(var(--cap-y, 0) * 1%)) scale(var(--cap-k, 1));transform-origin:50% 92%}.hh__cap.is-intro{animation:hh-cap-intro 1.2s .12s var(--hh-ease-out) both}.hh__cap.is-enter{animation:hh-cap-in .95s 90ms var(--hh-ease-out) both}.hh__cap.is-leave{animation:hh-cap-out .46s var(--hh-ease-in) both}@keyframes hh-cap-intro{0%{opacity:0;transform:translateY(9%) scale(.86) rotate(-4deg)}}@keyframes hh-cap-in{0%{opacity:0;transform:translate3d(calc(var(--dir) * 46%),4%,0) rotate(calc(var(--dir) * 18deg)) scale(.7)}40%{opacity:1}to{opacity:1;transform:none}}@keyframes hh-cap-out{65%{opacity:0}to{opacity:0;transform:translate3d(calc(var(--dir) * -46%),-3%,0) rotate(calc(var(--dir) * -16deg)) scale(.72)}}@media(min-width:1024px)and (hover:hover){.hh__cap.is-enter{animation-name:hh-cap-in-blur}.hh__cap.is-leave{animation-name:hh-cap-out-blur}}@keyframes hh-cap-in-blur{0%{opacity:0;filter:blur(6px);transform:translate3d(calc(var(--dir) * 46%),4%,0) rotate(calc(var(--dir) * 18deg)) scale(.7)}40%{opacity:1}50%{filter:blur(0)}to{opacity:1;filter:none;transform:none}}@keyframes hh-cap-out-blur{65%{opacity:0}to{opacity:0;filter:blur(5px);transform:translate3d(calc(var(--dir) * -46%),-3%,0) rotate(calc(var(--dir) * -16deg)) scale(.72)}}.hh__shadow{position:absolute;left:14%;right:14%;bottom:-2%;height:9%;z-index:-1;animation:hh-shadow-breathe 7s ease-in-out infinite}.hh__shadow span{display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(closest-side,rgb(0 0 0 / .26),rgb(0 0 0 / .08) 60%,transparent)}.hh__shadow span.is-swapping{animation:hh-shadow-swap .95s var(--hh-ease-out) both}.hh__shadow span.is-intro{animation:hh-fade 1.2s .3s var(--hh-ease-out) both}@keyframes hh-shadow-breathe{50%{transform:scaleX(.9);opacity:.75}}@keyframes hh-shadow-swap{0%{transform:scaleX(.55);opacity:.2}}.hh__stage.is-still .hh__float,.hh__stage.is-still .hh__shadow{animation-play-state:paused}.hh__info{position:absolute;z-index:3;right:var(--ms-gutter);top:calc(var(--ms-header-h) + var(--hh-h) * .15);width:min(25vw,350px)}.hh__counter{display:flex;align-items:center;gap:14px;margin:0 0 24px}.hh__count{display:inline-flex;align-items:baseline;gap:8px;margin:0;font-size:12px;font-weight:600;letter-spacing:.14em;font-variant-numeric:tabular-nums;color:var(--ms-ink-2)}.hh__count-roll{display:inline-block;overflow:hidden;height:1.25em;line-height:1.25em;color:var(--ms-ink)}.hh__count-num{display:inline-block;animation:hh-roll .56s var(--hh-ease-out) both}@keyframes hh-roll{0%{opacity:0;transform:translateY(calc(var(--hh-dir) * 100%))}}.hh__count-sep{color:var(--ms-muted)}.hh__progress{position:relative;flex:1;height:2px;border-radius:2px;overflow:hidden;background:var(--ms-line-strong)}.hh__progress-fill{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--ms-ink);transform-origin:left center;animation-name:hh-progress;animation-timing-function:linear;animation-fill-mode:both}.hh__progress-fill.is-held{animation-play-state:paused}@keyframes hh-progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.hh__play{display:grid;place-items:center;width:32px;height:32px;flex:none;border:1px solid var(--ms-line-strong);border-radius:50%;background:#ffffff80;color:var(--ms-ink);transition:background-color .2s var(--ms-ease),border-color .2s var(--ms-ease)}.hh__play:hover{background:#fff;border-color:var(--ms-ink)}.hh__info-body>*{animation:hh-info-in .7s var(--hh-ease-out) both}.hh__info-body>:nth-child(2){animation-delay:70ms}.hh__info-body>:nth-child(3){animation-delay:.14s}@keyframes hh-info-in{0%{opacity:0;transform:translate(calc(var(--hh-dir) * 22px))}}.hh__team{margin:0;font-family:var(--font-display);font-weight:780;font-stretch:108%;font-size:clamp(20px,1.7vw,26px);line-height:1.1;text-transform:uppercase;letter-spacing:-.005em}.hh__model-name{margin:6px 0 0;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--ms-ink-2)}.hh__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:16px 0 0;font-size:14px}.hh__swatch{display:inline-flex;align-items:center;gap:8px;color:var(--ms-ink-2)}.hh__swatch:before{content:"";width:12px;height:12px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px #0000002e}.hh__price{display:inline-flex;align-items:baseline;gap:8px;font-weight:600;font-variant-numeric:tabular-nums}.hh__price s{font-weight:400;color:var(--ms-muted)}.hh__sale{padding:2px 6px;border-radius:3px;background:var(--ms-brand);color:#fff;font-size:10px;font-weight:700;letter-spacing:.08em}.hh__cta{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:50px;margin-top:26px;padding:0 22px 0 30px;border:1.5px solid var(--ms-ink);border-radius:999px;background:#ffffff59;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ms-ink);transition:background-color .22s var(--ms-ease),color .22s var(--ms-ease)}.hh__cta svg{transition:transform .22s var(--ms-ease)}.hh__cta:hover{background:var(--ms-ink);color:var(--ms-paper)}.hh__cta:hover svg{transform:translate(3px)}.hh__carousel{position:absolute;z-index:4;left:0;right:0;bottom:var(--hh-car-bottom)}.hh__ring{position:absolute;left:-6%;right:-6%;top:calc(var(--hh-track-pad) + var(--hh-item) * .05);height:calc(var(--hh-item) * 1.32);border-radius:50%;border:1px solid var(--hh-ring);background:radial-gradient(60% 70% at 50% 30%,#ffffff80,#fff0 72%);pointer-events:none}.hh__select-frame{position:absolute;left:50%;top:var(--hh-track-pad);width:var(--hh-item);height:var(--hh-item);transform:translate(-50%);border-radius:16px;border:1px solid var(--hh-frame-border);background:var(--hh-frame-bg);box-shadow:0 0 0 1px #1414140f,0 18px 36px -20px #00000059;pointer-events:none}.hh__select-frame:after{content:"";position:absolute;left:30%;right:30%;bottom:-16px;height:3px;border-radius:2px;background:var(--hh-indicator)}.hh__track{position:relative;display:flex;gap:calc(var(--hh-item) * .1);margin:0;padding:var(--hh-track-pad) calc(50% - var(--hh-item) / 2) calc(var(--hh-track-pad) + 6px);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}.hh__track::-webkit-scrollbar{display:none}.hh__item{flex:0 0 var(--hh-item);scroll-snap-align:center;scroll-snap-stop:normal;position:relative;display:grid;place-items:center;width:var(--hh-item);height:var(--hh-item);padding:8%;border:0;border-radius:16px;background:transparent;transform:translateY(calc(var(--arc, 0) * -1px)) scale(var(--s, 1));opacity:var(--o, 1);-webkit-tap-highlight-color:transparent}.hh__item:before{content:"";position:absolute;left:18%;right:18%;bottom:8%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgb(0 0 0 / .2),transparent);opacity:calc(1 - var(--sel, 0))}.hh__item img{position:relative;width:100%;height:auto;pointer-events:none;-webkit-user-select:none;user-select:none;transition:transform .42s var(--hh-ease-out)}.hh__item:hover img{transform:translateY(-3px) scale(1.03)}.hh__item[aria-checked=true] img{transform:scale(1.06)}.hh__item:focus-visible{outline:2px solid var(--ms-ink);outline-offset:2px}.hh__arrow{position:absolute;z-index:200;top:calc(var(--hh-track-pad) + var(--hh-item) / 2);display:grid;place-items:center;width:52px;height:52px;border:0;border-radius:50%;background:#fff;color:var(--ms-ink);box-shadow:0 0 0 1px #1414140f,0 6px 20px -6px #0000004d;transform:translateY(-50%);transition:transform .26s var(--hh-ease-out),background-color .2s,color .2s,opacity .2s}.hh__arrow:hover:not(:disabled){background:var(--ms-ink);color:#fff;transform:translateY(-50%) scale(1.06)}.hh__arrow:active:not(:disabled){transform:translateY(-50%) scale(.94)}.hh__arrow:disabled{opacity:.4}.hh__arrow--prev{left:var(--ms-gutter)}.hh__arrow--next{right:var(--ms-gutter)}.hh__intro>*{animation:hh-rise .9s var(--hh-ease-out) both}.hh__intro>*:nth-child(2){animation-delay:80ms}.hh__intro>*:nth-child(3){animation-delay:.16s}.hh__carousel{animation:hh-rise .9s .26s var(--hh-ease-out) both}.hh__info{animation:hh-fade .9s .2s var(--hh-ease-out) both}@keyframes hh-fade{0%{opacity:0}}@keyframes hh-rise{0%{opacity:0;transform:translateY(16px)}}@media(prefers-reduced-motion:reduce){.hh *:not(.hh__progress-fill),.hh *:before,.hh *:after{animation:none!important;transition:none!important}}@media(max-width:1023.98px){.hh{--hh-item: clamp(88px, 24vw, 132px);--hh-track-pad: 20px;--hh-cap-w: min(84vw, calc(40svh * 1.1667), 560px);display:flex;flex-direction:column;height:auto;min-height:100svh;padding-top:var(--ms-header-h);padding-bottom:max(20px,env(safe-area-inset-bottom))}.hh__intro{position:relative;left:auto;top:auto;max-width:none;padding:14px var(--ms-gutter) 0}.hh__eyebrow{margin-bottom:10px;font-size:11px}.hh__title{font-size:clamp(38px,10.5vw,64px)}.hh__title span{display:inline}.hh__sub{margin-top:10px;font-size:15px}.hh__stage{position:relative;left:auto;bottom:auto;flex:none;margin:clamp(18px,4svh,40px) auto 0;transform:none}.hh__words{top:40%}.hh__glow{top:-25%;right:-30%;bottom:-10%;left:-30%}.hh__carousel{position:relative;left:auto;right:auto;bottom:auto;margin-top:4px}.hh__arrow{width:44px;height:44px}.hh__arrow--prev{left:10px}.hh__arrow--next{right:10px}.hh__select-frame{border-radius:14px}.hh__ring{height:calc(var(--hh-item) * 1.1)}.hh__select-frame:after{bottom:-12px}.hh__info{position:relative;right:auto;top:auto;width:auto;padding:10px var(--ms-gutter) 0}.hh__counter{margin-bottom:14px}.hh__info-body{display:grid;grid-template-columns:1fr auto;align-items:end;gap:4px 16px}.hh__team{font-size:19px}.hh__model-name{margin-top:2px;font-size:12px}.hh__meta{grid-column:1 / -1;margin-top:8px}.hh__cta{grid-column:1 / -1;width:100%;margin-top:16px;min-height:52px}}@media(min-width:640px)and (max-width:1023.98px){.hh{--hh-cap-w: min(70vw, calc(42svh * 1.1667), 620px)}.hh__intro{padding-top:24px}.hh__info-body{max-width:640px}.hh__cta{width:auto;grid-column:auto;grid-row:1 / span 2;grid-column-start:2;margin-top:0}}@media(max-width:1023.98px)and (max-height:520px)and (orientation:landscape){.hh{--hh-cap-w: min(40vw, 65.3352svh );min-height:0}.hh__intro{padding-top:8px}.hh__title{font-size:34px}.hh__sub{display:none}.hh__stage{margin-top:8px}}hat-showcase{display:block}.section-hero{position:relative}.hh__soldout:before{display:none}.hh--empty{height:auto;min-height:70svh}.hh--empty .hh__intro{position:relative;left:auto;top:auto;max-width:none;padding:calc(var(--ms-header-h) + 12vh) var(--ms-gutter) 10vh}.hh__notice{margin-top:24px;max-width:46ch;padding:12px 14px;border:1px dashed var(--ms-line-strong);border-radius:var(--ms-radius);font-size:13px;color:var(--ms-ink-2)}
/*# sourceMappingURL=/cdn/shop/t/16/assets/hero.css.map */
