.hero{position:relative;width:100%;height:100vh;overflow:visible}.hero__viewport{position:fixed;z-index:1;top:0;left:0;width:100%;height:100vh;height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse 65% 55% at 50% 50%,rgba(255,255,255,.1) 0%,transparent 60%),radial-gradient(ellipse at 50% 45%,#484848,#333,#1a1a1a 50%,#0d0d0d)}.hero__canvas{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;width:100%;height:100%;opacity:0;transition:opacity var(--motion-standard) var(--ease-settle)}.hero__canvas.is-loaded{opacity:1}.hero__canvas canvas{display:block;width:100%;height:100%}.hero__fallback{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;display:flex;align-items:center;justify-content:center;transition:opacity var(--motion-standard) var(--ease-settle)}.hero__fallback img{max-width:60%;max-height:60%;object-fit:contain}.hero__canvas.is-loaded~.hero__fallback{opacity:0;pointer-events:none}.hero__content{position:relative;z-index:1;text-align:center;padding:0 1.5rem;pointer-events:none}.hero__content>*{pointer-events:auto}.hero__logo{position:absolute;top:2rem;left:50%;transform:translate(-50%);z-index:2;width:clamp(100px,15vw,180px)}.hero__logo-svg{width:100%;height:auto;overflow:visible}.hero__logo-svg path{fill:#fffcf3;stroke:none}.hero__logo.is-drawing .hero__logo-svg path{fill:none;stroke:#fffcf3;stroke-width:60;stroke-dasharray:50000;stroke-dashoffset:50000;animation:logo-draw 1.8s var(--ease-settle, ease) forwards}.hero__logo.is-drawing.is-drawn .hero__logo-svg path{fill:#fffcf3;stroke:none;stroke-dashoffset:0;animation:none;transition:fill .4s var(--ease-settle, ease)}.hero__logo.is-drawn .hero__logo-svg path{fill:#fffcf3;stroke:none}@keyframes logo-draw{to{stroke-dashoffset:0}}.hero__headline{font-size:clamp(2.5rem,8vw,7rem);color:var(--color-text);margin-bottom:.25em;will-change:transform,opacity}.hero__subline{font-family:var(--font-body);font-weight:300;font-style:normal;text-transform:none;font-size:clamp(1rem,2vw,1.5rem);color:var(--color-text-secondary);margin-bottom:2em;letter-spacing:0;line-height:1.4;will-change:transform,opacity}.hero__cta{display:inline-block;padding:1em 2.5em;background-color:var(--color-text);color:var(--color-bg);font-family:var(--font-heading);font-weight:var(--font-heading-weight, 900);font-style:var(--font-heading-style, italic);font-size:clamp(.75rem,1.2vw,1rem);text-transform:uppercase;letter-spacing:.08em;border-radius:var(--radius-pill);transition:transform var(--motion-quick) var(--ease-settle),background-color var(--motion-quick) var(--ease-settle);will-change:transform,opacity}.hero__cta:hover{transform:scale(1.05);background-color:var(--color-text-secondary)}.hero__cta:active{transform:scale(.98)}.hero__scroll-indicator{position:absolute;bottom:calc(2rem + env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%);z-index:1;display:flex;flex-direction:column;align-items:center;gap:.5rem;font-family:var(--font-body);font-size:.75rem;color:var(--color-text-secondary);opacity:.6;animation:hero-scroll-hint 2s var(--ease-settle) infinite;will-change:opacity}.hero__scroll-indicator svg{width:20px;height:20px}@keyframes hero-scroll-hint{0%,to{opacity:.6;transform:translate(-50%) translateY(0)}50%{opacity:1;transform:translate(-50%) translateY(6px)}}.hero__loading{position:absolute;bottom:30%;left:50%;transform:translate(-50%);z-index:1;font-family:var(--font-body);font-size:.875rem;color:var(--color-text-secondary);opacity:0;transition:opacity var(--motion-quick) var(--ease-settle)}.hero__loading.is-visible{opacity:.5}@media(max-width:768px){.hero{overflow-x:clip}.hero__logo{width:clamp(80px,25vw,120px);top:1.5rem}.hero__content{padding:0 1rem}.hero__cta{padding:.875em 2em}}.hero__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:48px;height:48px;border:none;border-radius:0;background:none;color:#ffffffb3;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;transition:color var(--motion-quick) var(--ease-settle),transform var(--motion-quick) var(--ease-settle)}.hero__arrow:hover{color:#fff;transform:translateY(-50%) scale(1.15)}.hero__arrow:active{transform:translateY(-50%) scale(.9)}.hero__arrow svg{width:28px;height:28px;stroke-width:2.5}.hero__arrow--left{left:calc(50% - 260px)}.hero__arrow--right{right:calc(50% - 260px)}.hero__product-name{position:absolute;bottom:calc(3rem + env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%);z-index:3;text-align:center}.hero__product-name-text{font-family:var(--font-heading);font-weight:var(--font-heading-weight, 900);font-style:var(--font-heading-style, normal);font-size:clamp(1rem,2vw,1.5rem);text-transform:uppercase;letter-spacing:.15em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.4);transition:opacity var(--motion-quick) var(--ease-settle)}.hero__lighting{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;transition:opacity var(--motion-grand) var(--ease-settle)}.hero__lighting--red{background:radial-gradient(ellipse 90% 80% at 50% 55%,rgba(255,15,15,.55) 0%,rgba(200,5,5,.4) 35%,transparent 65%),radial-gradient(ellipse at 50% 50%,transparent 30%,rgba(15,3,3,.92) 100%)}.hero__lighting--blue{background:radial-gradient(ellipse 90% 80% at 50% 55%,rgba(0,200,220,.55) 0%,rgba(0,160,180,.4) 35%,transparent 65%),radial-gradient(ellipse at 50% 50%,transparent 30%,rgba(2,8,12,.92) 100%)}.hero__backlight{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-45%);width:clamp(350px,50vw,600px);height:clamp(350px,55vh,600px);background:radial-gradient(ellipse 100% 100% at 50% 50%,rgba(255,255,255,.7) 0%,rgba(255,250,240,.45) 20%,rgba(255,245,230,.2) 45%,transparent 70%);opacity:0;pointer-events:none;filter:blur(25px)}@media(max-width:768px){.hero__backlight{width:clamp(200px,45vw,320px);height:clamp(200px,45vh,320px);filter:blur(20px)}}@media(max-width:768px){.hero__arrow{width:40px;height:40px}.hero__arrow svg{width:22px;height:22px}.hero__arrow--left{left:max(8px,calc(50% - 180px))}.hero__arrow--right{right:max(8px,calc(50% - 180px))}.hero__product-name{bottom:calc(2rem + env(safe-area-inset-bottom,0px))}}.hero__phase-eyebrow{display:inline-block;position:relative;overflow:hidden;font-family:var(--font-body);font-weight:500;font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:transparent;padding:.4em 1.1em;border-radius:var(--radius-pill);white-space:nowrap;opacity:0;transform:translateY(8px) scale(.9)}.hero__phase-eyebrow:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.25,.1,.25,1);z-index:-1}[data-active-product=red] .hero__phase-eyebrow:before{background:var(--color-product-red)}[data-active-product=blue] .hero__phase-eyebrow:before{background:var(--color-product-blue)}.hero__phase-eyebrow.is-visible:before{transform:scaleX(1)}.hero{height:600vh}.hero__detail{position:absolute;z-index:3;bottom:10%;left:8%;text-align:left;opacity:0;pointer-events:none;max-width:400px}.hero__detail-inner{display:flex;flex-direction:column;align-items:flex-start;gap:.8rem}.hero__detail-heading{font-size:clamp(2rem,4.5vw,3.6rem);color:#fff;letter-spacing:.15em;line-height:1.1;text-transform:uppercase;text-shadow:0 0 50px rgba(255,255,255,.2),0 2px 20px rgba(0,0,0,.6)}.hero__detail-body{font-family:var(--font-body);font-weight:300;font-size:clamp(.85rem,1.4vw,1.1rem);color:#ffffffb3;letter-spacing:.04em;line-height:1.55;max-width:440px}@media(max-width:768px){.hero__detail{bottom:8%;left:5%;max-width:300px}.hero__detail-heading{letter-spacing:.1em}.hero__detail-body{max-width:280px}}.hero__spotlight-overlay{position:absolute;z-index:2;bottom:4%;left:50%;transform:translate(-50%);width:clamp(320px,55vw,650px);height:clamp(220px,35vh,450px);background:radial-gradient(ellipse 100% 90% at 50% 55%,rgba(255,248,240,.08) 0%,rgba(255,240,220,.04) 35%,transparent 70%);opacity:0;pointer-events:none;filter:blur(30px)}.hero__creatine-reveal{position:absolute;z-index:3;bottom:10%;left:8%;text-align:left;opacity:0;pointer-events:none;max-width:400px}.hero__creatine-inner{display:flex;flex-direction:column;align-items:flex-start;gap:.8rem}.hero__creatine-amount{font-size:clamp(2rem,4.5vw,3.6rem);color:#fff;letter-spacing:.15em;line-height:1.1;text-transform:uppercase;text-shadow:0 0 50px rgba(255,255,255,.2),0 2px 20px rgba(0,0,0,.6)}.hero__creatine-detail{font-family:var(--font-body);font-weight:300;font-size:clamp(.85rem,1.4vw,1.1rem);color:#ffffffb3;letter-spacing:.04em;line-height:1.55;max-width:440px}@media(max-width:768px){.hero__creatine-reveal{bottom:8%;left:5%;max-width:300px}.hero__creatine-amount{letter-spacing:.1em}.hero__creatine-detail{max-width:280px}}.hero__allergen-reveal{position:absolute;z-index:3;bottom:10%;left:8%;text-align:left;opacity:0;pointer-events:none;max-width:400px}.hero__allergen-inner{display:flex;flex-direction:column;align-items:flex-start;gap:.8rem}.hero__allergen-claims{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;margin:0}.hero__allergen-claim{display:block;font-family:var(--font-heading);font-weight:var(--font-heading-weight, 900);font-style:var(--font-heading-style, normal);font-size:clamp(1.5rem,3.2vw,2.6rem);color:#fff;letter-spacing:.12em;line-height:1.15;text-transform:uppercase;white-space:nowrap;text-shadow:0 0 50px rgba(255,255,255,.2),0 2px 20px rgba(0,0,0,.6)}.hero__allergen-detail{font-family:var(--font-body);font-weight:300;font-size:clamp(.85rem,1.4vw,1.1rem);color:#ffffffb3;letter-spacing:.04em;line-height:1.55;max-width:440px}@media(max-width:768px){.hero__allergen-reveal{bottom:8%;left:5%;max-width:300px}.hero__allergen-claim{font-size:clamp(1.2rem,5vw,1.5rem);letter-spacing:.08em}.hero__allergen-detail{max-width:280px}}.hero__ingredients-reveal{position:absolute;z-index:3;bottom:10%;left:8%;text-align:left;opacity:0;pointer-events:none;max-width:400px}.hero__ingredients-inner{display:flex;flex-direction:column;align-items:flex-start;gap:.8rem}.hero__ingredients-heading{font-size:clamp(2rem,4.5vw,3.6rem);color:#fff;letter-spacing:.15em;line-height:1.1;text-transform:uppercase;text-shadow:0 0 50px rgba(255,255,255,.2),0 2px 20px rgba(0,0,0,.6)}.hero__ingredients-body{font-family:var(--font-body);font-weight:300;font-size:clamp(.85rem,1.4vw,1.1rem);color:#ffffffb3;letter-spacing:.04em;line-height:1.55;max-width:440px}@media(max-width:768px){.hero__ingredients-reveal{bottom:8%;left:5%;max-width:300px}.hero__ingredients-heading{letter-spacing:.1em}.hero__ingredients-body{max-width:280px}}.hero__purpose-reveal{position:absolute;z-index:3;bottom:22%;left:50%;transform:translate(-50%);text-align:center;opacity:0;pointer-events:none}.hero__purpose-inner{display:flex;flex-direction:column;align-items:center;gap:.8rem}.hero__purpose-heading{font-size:clamp(2rem,4.5vw,3.6rem);color:#fff;letter-spacing:.15em;line-height:1.1;text-transform:uppercase;text-shadow:0 0 50px rgba(255,255,255,.2),0 2px 20px rgba(0,0,0,.6)}.hero__purpose-body{font-family:var(--font-body);font-weight:300;font-size:clamp(.85rem,1.4vw,1.1rem);color:#ffffffb3;letter-spacing:.04em;line-height:1.55;max-width:440px;opacity:0;transform:translateY(12px);transition:none}@media(max-width:768px){.hero__purpose-reveal{bottom:18%}.hero__purpose-heading{letter-spacing:.1em}.hero__purpose-body{max-width:320px}}.floating-gummies{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;overflow:hidden;contain:strict}.floating-gummy{position:absolute;color:rgba(255,80,70,var(--gummy-alpha, .3));opacity:0;transform:rotate(var(--gummy-rotate, 0deg));animation:gummy-float linear infinite;transition:color 1s ease;will-change:transform,opacity}[data-active-product=blue] .floating-gummy{color:rgba(80,180,255,var(--gummy-alpha, .3))}.floating-gummy svg{display:block;width:100%;height:100%}@keyframes gummy-float{0%{opacity:0;transform:rotate(var(--gummy-rotate, 0deg)) translate(0)}10%{opacity:var(--gummy-alpha, .3)}50%{transform:rotate(calc(var(--gummy-rotate, 0deg) + 180deg)) translate(var(--drift-x, 4px),var(--drift-y, -3px))}90%{opacity:var(--gummy-alpha, .3)}to{opacity:0;transform:rotate(calc(var(--gummy-rotate, 0deg) + 360deg)) translate(0)}}.hero__phase-progress{position:absolute;bottom:2.5rem;left:50%;transform:translate(-50%);z-index:4;width:140px;opacity:0;pointer-events:none;transition:opacity .4s ease}.hero__phase-track{width:100%;height:4px;background:#ffffff1f;border-radius:1px;overflow:hidden}.hero__phase-fill{width:0%;height:100%;background:#ffffff80;border-radius:1px;will-change:width}@media(max-width:768px){.hero__phase-progress{bottom:1.5rem;width:110px}}.hero__skip{display:none}@media(max-width:768px){.hero__skip{display:flex;flex-direction:column;align-items:center;gap:.25rem;position:absolute;bottom:calc(5.5rem + env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%);z-index:4;background:none;border:none;color:#fff6;cursor:pointer;padding:0;animation:hero-skip-float 2.4s ease-in-out infinite;transition:opacity .4s var(--ease-settle, ease)}.hero__skip-label{font-family:var(--font-body);font-size:.7rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}.hero__skip svg{width:20px;height:20px}.hero__skip.is-hidden{opacity:0;pointer-events:none}}@keyframes hero-skip-float{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(5px)}}@media(prefers-reduced-motion:reduce){.hero__scroll-indicator{animation:none;opacity:.6}.hero__canvas,.hero__fallback{transition:none}.hero__logo.is-drawing .hero__logo-svg path{animation:none;fill:#fffcf3;stroke:none;stroke-dashoffset:0}.floating-gummy{animation:none;opacity:var(--gummy-alpha, .3)}.hero__phase-progress{display:none}}
/*# sourceMappingURL=/cdn/shop/t/10/assets/hero.css.map */