.interactive-hero{--hero-font-display: var(--font-heading--family, "Chakra Petch", sans-serif);--hero-font-mono: var(--font-accent--family, "IBM Plex Mono", monospace);--hero-font-body: var(--font-body--family, "Saira", sans-serif);--hero-black: #0b0b0d;--hero-elev: #131316;--hero-white: #fff;--hero-text: #e8e8ec;--hero-red: #ff2d3f;--hero-red-hover: #ff5564;--hero-red-deep: #7a0e16;--hero-glow: rgba(255, 45, 63, .35);--hero-glow-soft: rgba(255, 45, 63, .15);--hero-border: #26262b;--hero-grain-opacity: .035;--hero-p: 0}.interactive-hero{position:relative;width:100%;min-height:calc(var(--hero-min-height, 90vh) + var(--hero-scroll-length, 220vh));background:var(--hero-black)}.interactive-hero__stage{position:sticky;top:0;height:var(--hero-min-height, 90vh);min-height:540px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--hero-black);perspective:1100px;perspective-origin:50% 42%;isolation:isolate}.interactive-hero__stage:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:24;pointer-events:none;opacity:var(--hero-grain-opacity);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");background-repeat:repeat}.interactive-hero__stage:after{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:23;pointer-events:none;background:linear-gradient(90deg,transparent,var(--hero-red),transparent);opacity:0;transform:translateY(calc(var(--hero-p) * 100%));box-shadow:0 0 18px var(--hero-glow)}@media(prefers-reduced-motion:no-preference){.interactive-hero__stage:after{opacity:calc(.35 * (1 - var(--hero-p)) + .15)}}.interactive-hero__background{position:absolute;top:-8%;right:-8%;bottom:-8%;left:-8%;z-index:1;transform-style:preserve-3d}.interactive-hero__bg-image{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.08)}.interactive-hero__bg-placeholder{width:100%;height:100%;background:radial-gradient(ellipse at 30% 20%,rgba(255,45,63,.14) 0%,transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(122,14,22,.25) 0%,transparent 50%),linear-gradient(135deg,#0a0a0a,#1a0d10,#0a0a0a)}.interactive-hero__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0 / 56px 56px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0 / 56px 56px,radial-gradient(ellipse at 20% 80%,rgba(0,0,0,.6) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(0,0,0,.4) 0%,transparent 50%),linear-gradient(to bottom,#00000040,#0000001a,#0000001f 70%,#0000008c);pointer-events:none;opacity:calc(var(--hero-overlay-opacity, .3) + .2 + var(--hero-p) * .25)}.interactive-hero__horizon{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;overflow:hidden}.interactive-hero__horizon-grid{position:absolute;left:-25%;right:-25%;bottom:-10%;height:62%;background-image:linear-gradient(to right,rgba(255,45,63,.22) 1px,transparent 1px),linear-gradient(to top,rgba(255,45,63,.22) 1px,transparent 1px);background-size:64px 64px;transform:perspective(420px) rotateX(72deg) translateY(calc(var(--hero-p) * -26%)) scale(1.1);transform-origin:bottom center;mask-image:linear-gradient(to top,#000 0%,#000 35%,transparent 95%);-webkit-mask-image:linear-gradient(to top,#000 0%,#000 35%,transparent 95%);opacity:calc(.25 + var(--hero-p) * .5)}.interactive-hero__horizon-sun{position:absolute;left:50%;bottom:32%;width:clamp(280px,46vw,640px);height:clamp(280px,46vw,640px);transform:translate(-50%,50%) scale(calc(.85 + var(--hero-p) * .4));border-radius:50%;background:radial-gradient(circle,rgba(255,45,63,.28) 0%,rgba(255,45,63,.06) 42%,transparent 62%);opacity:calc(.4 + var(--hero-p) * .45);filter:blur(2px)}.interactive-hero__hud-frame{position:absolute;top:3%;right:3.5%;bottom:3%;left:3.5%;width:93%;height:94%;z-index:18;pointer-events:none;overflow:visible}.interactive-hero__hud-path{fill:none;stroke:var(--hero-red);stroke-width:1.4;vector-effect:non-scaling-stroke;opacity:.8;filter:drop-shadow(0 0 4px var(--hero-glow-soft));stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--hero-p))}.interactive-hero__hud-node{fill:var(--hero-red);opacity:var(--hero-p);filter:drop-shadow(0 0 6px var(--hero-glow))}.interactive-hero__products{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;pointer-events:none;transform-style:preserve-3d}.interactive-hero__product{position:absolute;width:var(--product-size, 150px);will-change:transform;transform-style:preserve-3d;opacity:0;animation:heroProductIn .4s ease forwards}.interactive-hero__product--1{animation-delay:.02s}.interactive-hero__product--2{animation-delay:.06s}.interactive-hero__product--3{animation-delay:.1s}.interactive-hero__product--4{animation-delay:.14s}.interactive-hero__product--5{animation-delay:.18s}.interactive-hero__product--6{animation-delay:.22s}.interactive-hero__product--7{animation-delay:.26s}.interactive-hero__product--8{animation-delay:.3s}@keyframes heroProductIn{to{opacity:1}}.interactive-hero__product-image{display:block;max-width:100%;height:auto;filter:drop-shadow(0 25px 50px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(255,45,63,.1))}.interactive-hero--blend-bg .interactive-hero__product-image{mix-blend-mode:multiply;filter:drop-shadow(0 25px 50px rgba(0,0,0,.4))}.interactive-hero__product--1{top:6%;left:10%;z-index:12}.interactive-hero__product--2{top:9%;right:12%;z-index:14}.interactive-hero__product--3{top:46%;left:2%;z-index:11}.interactive-hero__product--4{top:42%;right:1%;z-index:15}.interactive-hero__product--5{bottom:5%;left:32%;z-index:13}.interactive-hero__product--6{bottom:9%;right:22%;z-index:12}.interactive-hero__product--7{top:22%;left:26%;z-index:10}.interactive-hero__product--8{bottom:24%;right:18%;z-index:11}.interactive-hero__products:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;background:radial-gradient(420px circle at var(--hero-mx, 50%) var(--hero-my, 45%),rgba(255,45,63,.1),transparent 65%)}.interactive-hero__content{position:relative;z-index:20;width:100%;max-width:1040px;padding:2rem;text-align:center;transform-style:preserve-3d}@media(prefers-reduced-motion:no-preference){.interactive-hero__content,.interactive-hero__overlay,.interactive-hero__horizon-grid,.interactive-hero__horizon-sun{will-change:transform,opacity}}.interactive-hero__content-inner{display:flex;flex-direction:column;align-items:center;gap:1.4rem}.interactive-hero--align-left .interactive-hero__content{text-align:left}.interactive-hero--align-left .interactive-hero__content-inner{align-items:flex-start}.interactive-hero--align-right .interactive-hero__content{text-align:right}.interactive-hero--align-right .interactive-hero__content-inner{align-items:flex-end}.interactive-hero--pos-top .interactive-hero__stage{align-items:flex-start}.interactive-hero--pos-top .interactive-hero__content{margin-top:clamp(4rem,12vh,9rem)}.interactive-hero--pos-bottom .interactive-hero__stage{align-items:flex-end}.interactive-hero--pos-bottom .interactive-hero__content{margin-bottom:clamp(4rem,12vh,9rem)}.interactive-hero__content:before{content:"";position:absolute;top:-18%;right:-12%;bottom:-18%;left:-12%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,rgba(255,45,63,.14) 0%,transparent 62%);opacity:calc(.7 + var(--hero-p) * .3)}.interactive-hero__eyebrow{font-family:var(--hero-font-mono);font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--hero-red);opacity:.95}.interactive-hero__heading{margin:0;font-family:var(--hero-font-display);font-size:clamp(2.2rem,6vw,5.5rem);font-weight:700;text-transform:uppercase;line-height:1.02;letter-spacing:.01em;color:var(--hero-white);text-shadow:0 0 30px var(--hero-glow),0 2px 10px rgba(0,0,0,.45),0 10px 40px rgba(0,0,0,.3)}.interactive-hero__heading-text{display:inline-block;position:relative}.interactive-hero__subheading{margin:0;font-family:var(--hero-font-mono);font-size:clamp(.8rem,1.6vw,.95rem);font-weight:400;line-height:1.6;letter-spacing:.04em;color:#ffffffc7;max-width:580px}.interactive-hero__subheading:before{content:"> ";color:var(--hero-red);font-weight:600}.interactive-hero__button{display:inline-block;margin-top:.8rem;padding:1.1rem 3rem;font-family:var(--hero-font-mono);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--hero-white);background:#ff2d3f14;border:1px solid var(--hero-red);box-shadow:0 0 18px #ff2d3f33,inset 0 0 12px #ff2d3f14;text-decoration:none;position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,letter-spacing .3s ease,background .3s ease,color .3s ease}.interactive-hero__button span{position:relative;z-index:1}.interactive-hero__button:hover{transform:translateY(-3px);box-shadow:0 0 32px var(--hero-glow),0 15px 40px #0006;letter-spacing:.25em;background:var(--hero-red);color:#fff}.interactive-hero__button:active{transform:translateY(-1px)}.interactive-hero__hud{position:absolute;top:1.6rem;right:1.8rem;z-index:21;width:clamp(150px,18vw,210px);font-family:var(--hero-font-mono);color:#ffffffb3;pointer-events:none}.interactive-hero__hud-row{display:flex;justify-content:space-between;align-items:baseline;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:.4rem}.interactive-hero__hud-pct{color:var(--hero-red);font-size:.75rem;font-weight:600;font-variant-numeric:tabular-nums}.interactive-hero__hud-rail{height:3px;width:100%;background:#ffffff1a;overflow:hidden}.interactive-hero__hud-rail-fill{height:100%;width:100%;transform-origin:left center;transform:scaleX(var(--hero-p));background:linear-gradient(90deg,var(--hero-red-deep),var(--hero-red));box-shadow:0 0 10px var(--hero-glow)}.interactive-hero__scroll-hint{position:absolute;bottom:1.8rem;left:50%;transform:translate(-50%);z-index:21;display:flex;flex-direction:column;align-items:center;gap:.55rem;color:#ffffff8c;font-family:var(--hero-font-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;opacity:calc(1 - var(--hero-p) * 2.2)}.interactive-hero__scroll-hint:after{content:"";width:1px;height:40px;background:linear-gradient(to bottom,var(--hero-red),transparent)}@media(prefers-reduced-motion:no-preference){.interactive-hero__heading-text{animation:heroTextIn .28s ease both}@keyframes heroTextIn{0%{opacity:0}to{opacity:1}}.interactive-hero__eyebrow{animation:heroTextIn .28s ease .03s both}.interactive-hero__subheading{animation:heroTextIn .28s ease .06s both}.interactive-hero__button{animation:heroTextIn .28s ease .09s both}.interactive-hero__scroll-hint:after{animation:heroScrollPulse 2s ease-in-out infinite}@keyframes heroScrollPulse{0%,to{transform:scaleY(1);opacity:.5}50%{transform:scaleY(.55);opacity:1}}.interactive-hero__product{will-change:transform}}@media(prefers-reduced-motion:reduce){.interactive-hero{min-height:var(--hero-min-height, 90vh)}.interactive-hero__stage{position:relative;top:auto}.interactive-hero__product{opacity:1;animation:none;transform:none}.interactive-hero__hud-path{stroke-dashoffset:0}.interactive-hero__hud-node{opacity:1}.interactive-hero__hud-rail-fill{transform:scaleX(0)}.interactive-hero__scroll-hint{opacity:.6}.interactive-hero__horizon-grid{opacity:.4;transform:perspective(420px) rotateX(72deg) scale(1.1)}}@media(max-width:749px){.interactive-hero__stage{min-height:100svh}.interactive-hero{min-height:calc(var(--hero-min-height, 90vh) + min(var(--hero-scroll-length, 220vh),150vh))}.interactive-hero__product{width:min(var(--product-size, 150px),42vw)}.interactive-hero__product--1{top:4%;left:-4%}.interactive-hero__product--2{top:6%;right:-4%}.interactive-hero__product--3{top:30%;left:-8%}.interactive-hero__product--4{top:56%;right:-6%}.interactive-hero__product--5{bottom:18%;left:6%}.interactive-hero__product--6{bottom:10%;right:4%}.interactive-hero__product--7{top:18%;left:20%;opacity:.9}.interactive-hero__product--8{bottom:30%;right:10%}.interactive-hero__content{padding:1.5rem}.interactive-hero__heading{font-size:clamp(2.1rem,11vw,3.2rem)}.interactive-hero__button{padding:1rem 2.4rem}.interactive-hero__hud{top:1rem;right:1rem;width:130px}.interactive-hero__hud-frame{top:2%;right:2.5%;bottom:2%;left:2.5%}.interactive-hero__scroll-hint{bottom:1.4rem}}
/*# sourceMappingURL=/cdn/shop/t/16/assets/interactive-hero.css.map */