@property --hx{syntax: "<percentage>"; inherits: true; initial-value: 50%;}@property --hy{syntax: "<percentage>"; inherits: true; initial-value: 50%;}.hero{--ar-use: var(--ar);position:relative;min-height:max(100svh,760px);padding:0;overflow:clip;isolation:isolate}.hero__room{position:relative;display:block;min-height:inherit}.hero__frame{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;container-type:size}.hero__box{position:absolute;top:50%;left:50%;width:max(100cqw,100cqh * var(--ar-use));height:max(100cqh,100cqw / var(--ar-use));translate:-50% -50%;scale:1.045;transform:translate3d(calc(var(--mx) * -18px),calc(var(--my) * -12px + var(--xp) * 110px),0);transition:scale 2.4s var(--ease-slow),--hx 1s var(--ease-out),--hy 1s var(--ease-out)}.hero__photo,.hero__photo picture{position:absolute;top:0;right:0;bottom:0;left:0}.hero__photo img,.hero__photo svg{width:100%;height:100%;object-fit:cover}.motion .hero[data-reveal]:not(.is-on) .hero__box{scale:1.16}.hero__dim{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at var(--hx) var(--hy),transparent 0 8%,color-mix(in srgb,var(--c-night) 20%,transparent) 26%,color-mix(in srgb,var(--c-night) 30%,transparent) 62%);opacity:0;transition:opacity .8s var(--ease-out);pointer-events:none}.hero__room.has-active .hero__dim{opacity:1}.hero__veil{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--c-bone) 94%,transparent) 0,color-mix(in srgb,var(--c-bone) 84%,transparent) 22%,color-mix(in srgb,var(--c-bone) 38%,transparent) 40%,transparent 54%);pointer-events:none}.hero__inner{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:32px;min-height:inherit;padding-top:calc(var(--header-space) + clamp(16px,3vh,40px));padding-bottom:clamp(20px,4vh,40px);pointer-events:none}.hero__inner>*{pointer-events:auto}.hero__copy{width:min(880px,64%);translate:0 calc(var(--xp) * -60px)}.hero__copy .heading--hero em{white-space:nowrap}.hero__spots{position:absolute;top:0;right:0;bottom:0;left:0}.spot{position:absolute;top:var(--y);left:var(--x);z-index:1;width:0;height:0}.spot.is-active{z-index:2}.spot__hit{position:absolute;top:-24px;left:-24px;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;transition:scale .7s cubic-bezier(.2,1.5,.3,1) calc(1.1s + var(--i) * .14s),opacity .4s calc(1.1s + var(--i) * .14s)}.motion .hero[data-reveal]:not(.is-on) .spot__hit{scale:.3;opacity:0}.spot__dot{position:relative;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--c-cloud) 34%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 0 0 1px color-mix(in srgb,var(--c-cloud) 70%,transparent),0 6px 18px color-mix(in srgb,var(--c-night) 22%,transparent);transition:scale .5s var(--ease-spring),box-shadow .4s var(--ease-out)}.spot__dot:before{content:"";position:absolute;top:10px;right:10px;bottom:10px;left:10px;border-radius:50%;background:var(--c-cloud)}.spot__dot:after{content:"";position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;border:1px solid var(--c-cloud);border-radius:50%;opacity:0}.motion .spot__dot:after{animation:spot-pulse 2.4s var(--ease-out) infinite;animation-delay:calc(var(--i) * .6s)}@keyframes spot-pulse{0%{transform:scale(.7);opacity:.8}80%,to{transform:scale(1.6);opacity:0}}.spot.is-active .spot__dot{scale:1.22;box-shadow:0 0 0 2px var(--c-brass),0 8px 24px color-mix(in srgb,var(--c-night) 30%,transparent)}.spot.is-active .spot__dot:before{background:var(--c-brass)}.spot__tag{position:absolute;top:0;left:30px;display:grid;gap:4px;width:clamp(216px,18vw,260px);padding:14px 16px;border-radius:14px;background:color-mix(in srgb,var(--c-cloud) 95%,transparent);box-shadow:var(--shadow);color:var(--c-ink);text-decoration:none;opacity:0;visibility:hidden;translate:10px -50%;transition:opacity .35s var(--ease-out),translate .5s var(--ease-out),visibility 0s linear .35s}.spot--left .spot__tag{right:30px;left:auto;translate:-10px -50%}.spot--above .spot__tag{top:auto;bottom:30px;left:0;translate:-50% -10px}.spot--below .spot__tag{top:30px;left:0;translate:-50% 10px}.spot.is-active .spot__tag{opacity:1;visibility:visible;transition-delay:0s}.spot--right.is-active .spot__tag,.spot--left.is-active .spot__tag{translate:0 -50%}.spot--above.is-active .spot__tag,.spot--below.is-active .spot__tag{translate:-50% 0}.spot__meta{color:var(--mut)}.spot__title{font-family:var(--font-display);font-weight:var(--font-display-weight);font-size:18px;line-height:1.15}.spot__row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}.spot__view{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:var(--font-body-bold)}.spot__view .icon{width:15px;height:15px}.hero__index{align-self:flex-end;width:min(372px,31vw);padding:16px 16px 10px;border-radius:calc(20px * var(--r-k));background:color-mix(in srgb,var(--c-cloud) 90%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--shadow);color:var(--fg);translate:0 calc(var(--xp) * -30px)}.idx__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}.idx__toggle{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--c-ink) 7%,transparent)}.idx__toggle .icon{width:14px;height:14px}.idx__play,.idx__toggle[aria-pressed=true] .idx__pause{display:none}.idx__toggle[aria-pressed=true] .idx__play{display:block}.idx__row{position:relative;border-top:1px solid var(--line)}.idx__link{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:46px;text-decoration:none}.idx__num{color:var(--mut);font-family:var(--font-label);font-size:11px}.idx__name{overflow:hidden;font-size:14.5px;white-space:nowrap;text-overflow:ellipsis}.idx__price{font-family:var(--font-label);font-size:12.5px}.idx__row.is-active .idx__name{font-weight:var(--font-body-bold)}.idx__bar{position:absolute;right:0;bottom:-1px;left:0;height:2px;overflow:hidden;opacity:0}.idx__bar span{display:block;height:100%;background:var(--c-ink);transform-origin:left;scale:0 1}.hero__room.is-playing .idx__row.is-active .idx__bar,.hero__room.is-held .idx__row.is-active .idx__bar{opacity:1}.hero__room.is-tour .idx__row.is-active .idx__bar span{animation:hero-bar var(--tour) linear forwards}.hero__room:not(.is-playing) .idx__row.is-active .idx__bar span{animation-play-state:paused}@keyframes hero-bar{to{scale:1 1}}.lens{position:absolute;top:0;left:0;z-index:6;display:grid;place-items:center;width:36px;height:36px;margin:-18px 0 0 -18px;border:1.5px solid var(--c-ink);border-radius:50%;color:var(--c-on-brass);font-family:var(--font-label);font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:0;pointer-events:none;transition:width .35s var(--ease-out),height .35s var(--ease-out),margin .35s var(--ease-out),background-color .3s,border-color .3s,opacity .3s}.lens.is-visible{opacity:1}.lens.is-link{width:60px;height:60px;margin:-30px 0 0 -30px}.lens.is-spot{width:84px;height:84px;margin:-42px 0 0 -42px;border-color:transparent;background:var(--c-brass)}.lens__label{opacity:0;transition:opacity .2s}.lens.is-spot .lens__label{opacity:1}@media(max-width:1099px){.hero__copy{width:min(680px,100%)}.hero__index{align-self:stretch;width:auto;margin-inline:calc(var(--pad) * -1);padding:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.idx__head{display:none}.idx__list{display:flex;gap:8px;overflow-x:auto;padding:2px var(--pad) 6px;scroll-snap-type:x mandatory;scrollbar-width:none}.idx__list::-webkit-scrollbar{display:none}.idx__row{flex:none;border:0;scroll-snap-align:start}.idx__link{grid-template-columns:auto auto;min-height:44px;padding:0 16px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--c-cloud) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shadow-sm)}.idx__num{display:none}.idx__row.is-active .idx__link{background:var(--c-ink);color:var(--c-cloud)}.idx__bar{right:16px;bottom:6px;left:16px}.idx__row.is-active .idx__bar span{background:var(--c-brass)}}@media(max-width:639px){.hero{--ar-use: var(--ar-m);min-height:max(100svh,640px)}.hero__box{left:0;translate:var(--panx, calc((100cqw - 100%)/2) ) -50%;transition:scale 2.4s var(--ease-slow),translate .9s var(--ease-out),--hx 1s,--hy 1s}.hero__veil{background:linear-gradient(to bottom,color-mix(in srgb,var(--c-bone) 96%,transparent) 0,color-mix(in srgb,var(--c-bone) 88%,transparent) 30%,color-mix(in srgb,var(--c-bone) 40%,transparent) 50%,transparent 62%)}.hero__copy{width:100%}.hero__copy .btn-row .btn{flex:1 1 100%}.spot__tag,.spot--left .spot__tag{top:auto;right:auto;bottom:30px;left:0;width:min(240px,70vw);translate:-50% -10px}.spot--m-below .spot__tag{top:30px;bottom:auto;translate:-50% 10px}.spot.is-active .spot__tag{translate:-50% 0}}
/*# sourceMappingURL=/cdn/shop/t/5/assets/section-hero-shop-the-room.css.map */