.cpp-3d{--cpp-3d-white: 255 255 255;--cpp-3d-deep: 76 29 149;--cpp-3d-purple: 109 40 217;--cpp-3d-pink: 190 24 93;--cpp-3d-glow: 244 114 182;--cpp-3d-gold: 251 191 36;--cpp-3d-accent: 253 230 138;--cpp-3d-header: 144px;position:relative;color:rgb(var(--cpp-3d-white));background:radial-gradient(circle at 88% 16%,rgb(var(--cpp-3d-gold) / .28),transparent 20rem),radial-gradient(circle at 8% 90%,rgb(var(--cpp-3d-glow) / .3),transparent 22rem),linear-gradient(128deg,rgb(var(--cpp-3d-deep)),rgb(var(--cpp-3d-purple)) 54%,rgb(var(--cpp-3d-pink)) 130%)}.cpp-3d *,.cpp-3d__before-after *{box-sizing:border-box}.cpp-3d-section{margin-top:0}.cpp-3d .cpp-home2-hero__curve{position:absolute;top:0;left:0;width:100%;line-height:0;pointer-events:none;z-index:2}.cpp-3d .cpp-home2-hero__curve svg{display:block;width:100%;height:auto;fill:rgb(var(--cpp-3d-white))}.cpp-3d__stage{position:relative;height:calc(100svh - var(--cpp-3d-header));min-height:420px;padding:54px 28px 64px;display:grid;align-items:center}.cpp-3d__inner{width:min(1180px,100%);margin:0 auto;display:grid;grid-template-columns:1.04fr .96fr;align-items:center;gap:clamp(20px,4vw,64px)}.cpp-3d__copy{min-width:0;position:relative}.cpp-3d__act{max-width:540px}.cpp-3d__act[hidden],.cpp-3d__hud[hidden]{display:none}.cpp-3d__eyebrow{display:table;margin:0 0 20px;padding:7px 15px;border:1px solid rgb(var(--cpp-3d-white) / .4);border-radius:99px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.cpp-3d h1{margin:0;color:inherit;font-size:clamp(48px,5vw,72px);line-height:1.03;letter-spacing:-.04em;font-weight:900}.cpp-3d h1 span{display:inline}.cpp-3d h2{margin:0;color:inherit;font-size:clamp(30px,3.4vw,48px);line-height:1.1;letter-spacing:-.025em;font-weight:800}.cpp-3d__accent{color:rgb(var(--cpp-3d-accent))}.cpp-3d__lede{max-width:40ch;margin:20px 0 0;color:rgb(var(--cpp-3d-white) / .9);font-size:clamp(16px,1.5vw,19px);line-height:1.6}.cpp-3d__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.cpp-3d__button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;border:1.5px solid rgb(var(--cpp-3d-white) / .6);border-radius:99px;color:inherit;font-size:14px;font-weight:800;text-decoration:none}.cpp-3d__button--primary{background:rgb(var(--cpp-3d-white));color:rgb(var(--cpp-3d-deep))}.cpp-3d__button:focus-visible{outline:3px solid rgb(var(--cpp-3d-accent));outline-offset:4px}.cpp-3d__button:hover{text-decoration:underline;text-underline-offset:4px}.cpp-3d__act ul{padding:0 0 0 20px;margin:22px 0 0;font-size:16px;line-height:1.7}.cpp-3d__act li{padding-left:4px;margin:10px 0}.cpp-3d__act li::marker{color:rgb(var(--cpp-3d-accent))}.cpp-3d__visual{position:relative;min-width:0;height:min(62svh,590px);display:grid;place-items:center}.cpp-3d__visual canvas{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;opacity:0}.cpp-3d__poster{position:relative;width:180px;aspect-ratio:4 / 5;overflow:hidden;box-shadow:9px 10px rgb(var(--cpp-3d-white) / .25),16px 24px 50px rgb(var(--cpp-3d-deep) / .4);transform:perspective(900px) rotateY(-12deg)}.cpp-3d__poster img{display:block;width:100%;height:100%;object-fit:cover}.cpp-3d[data-state=ready] .cpp-3d__poster{opacity:0}.cpp-3d[data-state=ready] canvas{opacity:1}.cpp-3d[data-enhanced]{height:700svh}.cpp-3d[data-enhanced] .cpp-3d__stage{position:sticky;top:var(--cpp-3d-header);height:calc(100svh - var(--cpp-3d-header));min-height:420px;padding:54px 28px 64px;display:grid;align-items:center}.cpp-3d[data-enhanced] .cpp-3d__visual{height:min(62svh,590px)}.cpp-3d__hud{position:absolute;left:max(28px,calc((100% - 1180px)/2));right:max(28px,calc((100% - 1180px)/2));bottom:24px;display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.04em;text-transform:uppercase}.cpp-3d__hud>[data-phase]{opacity:.6}.cpp-3d__hud>[data-current]{color:rgb(var(--cpp-3d-accent));opacity:1}.cpp-3d__track{flex:1;height:3px;background:rgb(var(--cpp-3d-white) / .25)}.cpp-3d__track i{display:block;width:100%;height:100%;background:rgb(var(--cpp-3d-accent));transform:scaleX(0);transform-origin:left}.cpp-3d[data-state=ready] [data-enter]{animation:cpp-3d-enter .36s both;animation-delay:var(--cpp-enter-delay, 0ms)}@keyframes cpp-3d-enter{0%{transform:translateY(12px)}to{transform:translateY(0)}}.cpp-3d__before-after{margin:0;padding:clamp(24px,4vw,48px) 24px;background:rgb(var(--color-background))}.cpp-3d__before-after>div{width:min(1180px,100%);margin:0 auto;overflow:hidden;border-radius:24px}.cpp-3d__before-after img{width:100%;height:auto;display:block}@media(max-width:879px){.cpp-3d__inner{grid-template-columns:1fr;gap:12px}.cpp-3d__stage{padding:calc(22px + 4.5vw) 16px 44px;min-height:550px;align-items:start}.cpp-3d__act{max-width:600px;margin:0 auto;text-align:center}.cpp-3d__eyebrow{margin:0 auto 12px;font-size:10px}.cpp-3d h1{font-size:clamp(48px,7vw,54px)}.cpp-3d__lede{margin:14px auto 0;font-size:16px}.cpp-3d__actions{justify-content:center;margin-top:16px;gap:8px}.cpp-3d__button{font-size:12px;padding:10px 13px}.cpp-3d__visual{height:clamp(160px,28svh,270px)}.cpp-3d__poster{width:128px}.cpp-3d[data-enhanced]{height:340svh}.cpp-3d[data-enhanced] .cpp-3d__stage{padding:calc(22px + 4.5vw) 16px 44px;min-height:550px;align-items:start}.cpp-3d[data-enhanced] .cpp-3d__visual{height:clamp(160px,28svh,270px)}.cpp-3d__hud{left:20px;right:20px;bottom:16px}.cpp-3d .cpp-3d__desktop{display:none}}@media(max-width:700px){.cpp-3d{--cpp-3d-header: 140px}}@media(max-width:560px){.cpp-3d__before-after{padding:20px 16px}.cpp-3d__before-after>div{border-radius:16px}}@media(prefers-reduced-motion:reduce){.cpp-3d [data-enter]{animation:none}}body:has(.cpp-3d){--cpp-home-readable-muted: 75 85 99;--cpp-home-readable-pink: 194 24 91}body:has(.cpp-3d) .cpp-header__cta{background:rgb(var(--cpp-home-readable-pink))}body:has(.cpp-3d) .cpp-home2-proof__context,body:has(.cpp-3d) .cpp-footer__brand-text,body:has(.cpp-3d) .cpp-footer__col ul a,body:has(.cpp-3d) .cpp-footer__copy,body:has(.cpp-3d) .cpp-footer__bottom-links a{color:rgb(var(--cpp-home-readable-muted))}
/*# sourceMappingURL=/cdn/shop/t/18/assets/cpp-home-hero-3d.css.map */