.hero-gen4-collage{position:relative;overflow-x:clip;padding-block:var(--hgc-top-spacing) var(--hgc-bottom-spacing);background:var(--hgc-section-bg);color:var(--hgc-text-color);isolation:isolate}@supports not (overflow: clip){.hero-gen4-collage{overflow-x:hidden}}.hero-gen4-collage *,.hero-gen4-collage *:before,.hero-gen4-collage *:after{box-sizing:border-box}.hero-gen4-collage__container{width:min(var(--hgc-max-width),calc(100% - (var(--hgc-page-inset) * 2)));margin-inline:auto}.hero-gen4-collage__panel{position:relative;padding:var(--hgc-panel-padding);border-radius:var(--hgc-panel-radius);background:var(--hgc-panel-bg);overflow:visible;isolation:isolate;animation:hgc-panel-reveal .9s cubic-bezier(.22,1,.36,1) backwards}.hero-gen4-collage__grid{display:grid;grid-template-columns:minmax(0,var(--hgc-left-width)) minmax(0,calc(100% - var(--hgc-left-width)));gap:var(--hgc-column-gap);align-items:stretch}.hero-gen4-collage__left-media,.hero-gen4-collage__right-media{position:relative;overflow:hidden;border-radius:var(--hgc-media-radius);background:#f3f3f3;transform:translateZ(0);transition:transform .65s cubic-bezier(.22,1,.36,1),box-shadow .65s cubic-bezier(.22,1,.36,1)}.hero-gen4-collage__left-media{height:var(--hgc-left-height);animation:hgc-media-reveal-left .98s 80ms cubic-bezier(.22,1,.36,1) backwards}.hero-gen4-collage__right-media{height:var(--hgc-right-height);animation:hgc-media-reveal-right .98s .16s cubic-bezier(.22,1,.36,1) backwards}.hero-gen4-collage__left-media:hover,.hero-gen4-collage__left-media:focus-within,.hero-gen4-collage__right-media:hover,.hero-gen4-collage__right-media:focus-within{transform:translateY(-5px) translateZ(0);box-shadow:0 24px 48px #1111111f}.hero-gen4-collage__media-link{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:inherit;color:inherit;text-decoration:none;isolation:isolate}.hero-gen4-collage__media-link:before{content:"";position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:linear-gradient(115deg,transparent 18%,rgba(255,255,255,.08) 40%,rgba(255,255,255,.42) 50%,rgba(255,255,255,.08) 60%,transparent 82%);opacity:0;transform:translate(-120%);pointer-events:none;transition:opacity .3s ease}.hero-gen4-collage__media-link:after{content:"";position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:linear-gradient(180deg,#fff0 55%,#00000014);opacity:0;pointer-events:none;transition:opacity .5s ease}.hero-gen4-collage__left-media:hover .hero-gen4-collage__media-link:before,.hero-gen4-collage__left-media:focus-within .hero-gen4-collage__media-link:before,.hero-gen4-collage__right-media:hover .hero-gen4-collage__media-link:before,.hero-gen4-collage__right-media:focus-within .hero-gen4-collage__media-link:before{opacity:1;animation:hgc-media-shine 1.1s cubic-bezier(.22,1,.36,1)}.hero-gen4-collage__left-media:hover .hero-gen4-collage__media-link:after,.hero-gen4-collage__left-media:focus-within .hero-gen4-collage__media-link:after,.hero-gen4-collage__right-media:hover .hero-gen4-collage__media-link:after,.hero-gen4-collage__right-media:focus-within .hero-gen4-collage__media-link:after{opacity:1}.hero-gen4-collage__media-link:focus-visible,.hero-gen4-collage__graphic-link:focus-visible,.hero-gen4-collage__floating-link:focus-visible{outline:2px solid currentColor;outline-offset:4px}.hero-gen4-collage__right-column{min-width:0;display:grid;grid-template-rows:auto 1fr;gap:24px}.hero-gen4-collage__image,.hero-gen4-collage__video,.hero-gen4-collage__placeholder{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.22,1,.36,1),filter .7s ease;will-change:transform}.hero-gen4-collage__video{border:0;pointer-events:none}.hero-gen4-collage__placeholder{background:#efefef}.hero-gen4-collage__left-media:hover .hero-gen4-collage__image,.hero-gen4-collage__left-media:focus-within .hero-gen4-collage__image,.hero-gen4-collage__right-media:hover .hero-gen4-collage__image,.hero-gen4-collage__right-media:focus-within .hero-gen4-collage__image,.hero-gen4-collage__right-media:hover .hero-gen4-collage__video,.hero-gen4-collage__right-media:focus-within .hero-gen4-collage__video{transform:scale(1.055);filter:saturate(1.06) contrast(1.025)}.hero-gen4-collage__button{position:absolute;z-index:4;left:var(--hgc-button-x);top:var(--hgc-button-y);transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:11px 21px;overflow:hidden;border:1px solid rgba(255,255,255,.78);border-radius:999px;color:var(--hgc-button-text);background:var(--hgc-button-bg);-webkit-backdrop-filter:blur(18px) saturate(145%);backdrop-filter:blur(18px) saturate(145%);box-shadow:0 12px 30px #0000001f,inset 1px 1px 1px #ffffffd1,inset -1px -1px 1px #0000000d;font:inherit;font-weight:750;line-height:1;text-decoration:none;letter-spacing:-.015em;isolation:isolate;animation:hgc-button-breathe 3.2s ease-in-out infinite;transition:transform .42s cubic-bezier(.22,1,.36,1),box-shadow .42s cubic-bezier(.22,1,.36,1),background-color .42s ease,letter-spacing .42s ease}.hero-gen4-collage__button:before{content:"";position:absolute;z-index:-1;top:-80%;bottom:-80%;left:-45%;width:34%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);transform:rotate(18deg) translate(-260%);animation:hgc-button-shimmer 3.8s .9s ease-in-out infinite;pointer-events:none}.hero-gen4-collage__button:after{content:"";position:absolute;z-index:-2;top:1px;right:1px;bottom:1px;left:1px;border-radius:inherit;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.5),transparent 45%);opacity:.75;pointer-events:none}.hero-gen4-collage__button-label,.hero-gen4-collage__button-icon{position:relative;z-index:1}.hero-gen4-collage__button-icon{display:none;font-size:1.05em;transform:translate(0);animation:hgc-arrow-nudge 2.4s ease-in-out infinite;transition:transform .42s cubic-bezier(.22,1,.36,1)}.hero-gen4-collage__button:hover{transform:translate(-50%,-50%) translateY(-3px) scale(1.065);box-shadow:0 20px 44px #0000002b,0 0 0 7px #ffffff29,inset 1px 1px 1px #ffffffeb;letter-spacing:0}.hero-gen4-collage__button:hover .hero-gen4-collage__button-icon{transform:translate(4px)}.hero-gen4-collage__button:active{transform:translate(-50%,-50%) scale(.985)}.hero-gen4-collage__button:focus-visible{outline:2px solid currentColor;outline-offset:4px}.hero-gen4-collage__content{min-width:0;padding:0 max(12px,var(--hgc-content-right-space)) 70px 12px;animation:hgc-content-reveal .9s .26s cubic-bezier(.22,1,.36,1) backwards}.hero-gen4-collage__graphic-wrap{width:min(100%,var(--hgc-graphic-width))}.hero-gen4-collage__graphic-link{display:block;width:100%;color:inherit;text-decoration:none}.hero-gen4-collage__graphic{display:block;width:100%;height:auto;object-fit:contain;transform-origin:left center;transition:transform .65s cubic-bezier(.22,1,.36,1),filter .65s ease}.hero-gen4-collage__graphic-link:hover .hero-gen4-collage__graphic,.hero-gen4-collage__graphic-link:focus-visible .hero-gen4-collage__graphic{transform:translateY(-4px) scale(1.025);filter:drop-shadow(0 14px 18px rgba(0,0,0,.12))}.hero-gen4-collage__graphic-placeholder{display:inline-flex;padding:12px 18px;font-size:clamp(2.25rem,5vw,5.4rem);font-weight:900;line-height:1}.hero-gen4-collage__description{width:min(100%,var(--hgc-description-width));margin-top:14px;color:var(--hgc-muted-color);font-size:clamp(.9rem,1.05vw,1.05rem);line-height:1.55;transition:color .35s ease,transform .5s cubic-bezier(.22,1,.36,1)}.hero-gen4-collage__content:hover .hero-gen4-collage__description{color:var(--hgc-text-color);transform:translateY(-2px)}.hero-gen4-collage__description>*{margin-block:0}.hero-gen4-collage__floating-area{position:absolute;z-index:99999;right:var(--hgc-headphone-right);bottom:var(--hgc-headphone-bottom);width:var(--hgc-headphone-width);pointer-events:none;transform-origin:center}.hero-gen4-collage__floating-area--linked{pointer-events:auto}.hero-gen4-collage__floating-link{display:block;width:100%;color:inherit;text-decoration:none}.hero-gen4-collage__floating-image,.hero-gen4-collage__floating-placeholder{display:block;width:100%;height:auto;object-fit:contain;transition:transform .7s cubic-bezier(.22,1,.36,1),filter .7s ease}.hero-gen4-collage__floating-link:hover .hero-gen4-collage__floating-image,.hero-gen4-collage__floating-link:focus-visible .hero-gen4-collage__floating-image{transform:translateY(-8px) rotate(-2deg) scale(1.055);filter:drop-shadow(0 26px 28px rgba(0,0,0,.2))}.hero-gen4-collage__floating-area--float{animation:hgc-soft-float 5.6s ease-in-out infinite}.hero-gen4-collage__floating-area--tilt{animation:hgc-soft-tilt 6.8s ease-in-out infinite}.hero-gen4-collage__floating-area--pulse{animation:hgc-soft-pulse 5.8s ease-in-out infinite}@keyframes hgc-panel-reveal{0%{opacity:0;transform:translateY(18px) scale(.992)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes hgc-media-reveal-left{0%{opacity:0;transform:translate3d(-24px,12px,0) scale(.985)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes hgc-media-reveal-right{0%{opacity:0;transform:translate3d(24px,12px,0) scale(.985)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes hgc-content-reveal{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes hgc-media-shine{0%{transform:rotate(.001deg) translate(-120%)}to{transform:rotate(.001deg) translate(420%)}}@keyframes hgc-button-breathe{0%,to{box-shadow:0 12px 30px #0000001f,0 0 #fff0,inset 1px 1px 1px #ffffffd1}50%{box-shadow:0 16px 38px #00000029,0 0 0 7px #ffffff21,inset 1px 1px 1px #ffffffe6}}@keyframes hgc-button-shimmer{0%,56%{transform:rotate(18deg) translate(-260%)}78%,to{transform:rotate(18deg) translate(720%)}}@keyframes hgc-arrow-nudge{0%,to{transform:translate(0)}50%{transform:translate(3px)}}@keyframes hgc-soft-float{0%,to{transform:translateZ(0)}50%{transform:translate3d(0,-12px,0)}}@keyframes hgc-soft-tilt{0%,to{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}@keyframes hgc-soft-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.025)}}@media screen and (max-width:989px){.hero-gen4-collage__grid{grid-template-columns:1fr}.hero-gen4-collage__left-media{height:var(--hgc-mobile-left-height)}.hero-gen4-collage__right-media{height:var(--hgc-mobile-right-height)}.hero-gen4-collage__right-column{gap:20px}.hero-gen4-collage__content{padding-right:clamp(110px,24vw,var(--hgc-content-right-space));padding-left:0}}@media screen and (max-width:699px){.hero-gen4-collage{--hgc-page-inset: min(var(--hgc-page-inset), 12px);padding-block:var(--hgc-mobile-top-spacing) var(--hgc-mobile-bottom-spacing)}.hero-gen4-collage__panel{overflow:hidden;padding:12px}.hero-gen4-collage__grid{display:flex;flex-direction:column;gap:12px}.hero-gen4-collage__right-column{display:contents}.hero-gen4-collage__left-media{order:1;height:var(--hgc-mobile-left-height)}.hero-gen4-collage__content{position:relative;z-index:2;order:2;width:100%;padding:16px 4px 18px}.hero-gen4-collage__right-media{order:3;height:var(--hgc-mobile-right-height)}.hero-gen4-collage__left-media:hover,.hero-gen4-collage__left-media:focus-within,.hero-gen4-collage__right-media:hover,.hero-gen4-collage__right-media:focus-within{transform:translateY(-3px) translateZ(0);box-shadow:0 16px 30px #1111111a}.hero-gen4-collage__button{left:var(--hgc-mobile-button-x);top:var(--hgc-mobile-button-y);min-height:44px;padding:10px 18px}.hero-gen4-collage__graphic-wrap{width:min(100%,var(--hgc-mobile-graphic-width))}.hero-gen4-collage__description{width:min(100%,var(--hgc-description-width));margin-top:12px;font-size:.92rem}.hero-gen4-collage__floating-area{position:relative;z-index:1;right:auto;bottom:auto;display:flex;width:min(var(--hgc-mobile-headphone-width),92vw);min-height:var(--hgc-mobile-headphone-space);margin-top:8px;margin-right:var(--hgc-mobile-headphone-right);margin-bottom:var(--hgc-mobile-headphone-bottom);margin-left:auto;align-items:flex-end;justify-content:flex-end}.hero-gen4-collage__floating-image,.hero-gen4-collage__floating-placeholder{width:min(var(--hgc-mobile-headphone-width),92vw)}.hero-gen4-collage--hide-mobile-float .hero-gen4-collage__floating-area{display:none}.hero-gen4-collage__floating-area--float{animation-name:hgc-mobile-float}.hero-gen4-collage__floating-area--tilt{animation-name:hgc-mobile-tilt}.hero-gen4-collage__floating-area--pulse{animation-name:hgc-mobile-pulse}@keyframes hgc-mobile-float{0%,to{transform:translateZ(0)}50%{transform:translate3d(0,-7px,0)}}@keyframes hgc-mobile-tilt{0%,to{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}@keyframes hgc-mobile-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.018)}}}
/*# sourceMappingURL=/cdn/shop/t/60/assets/section-hero-gen4-collage.css.map */