.demo{position:relative;background:var(--color-bg)}.demo__sticky{position:sticky;top:0;height:100svh;overflow:hidden;--demo-dark: 0;--demo-ink: 0;--demo-night: color-mix(in srgb, var(--lav-1) 38%, var(--lav-0));--demo-clear-x: 50%;--demo-clear-y: 72%;background:radial-gradient(ellipse 72% 62% at var(--demo-clear-x) var(--demo-clear-y),rgb(255 255 255 / .97) 0%,rgb(255 255 255 / .62) 52%,transparent 80%),radial-gradient(ellipse 78% 62% at calc(20% + var(--demo-wash, 0) * 52%) calc(80% - var(--demo-wash, 0) * 46%),color-mix(in srgb,var(--lav-3) 62%,transparent) 0%,transparent 60%),radial-gradient(ellipse 68% 54% at calc(84% - var(--demo-wash, 0) * 44%) calc(16% + var(--demo-wash, 0) * 50%),color-mix(in srgb,var(--violet-300) 46%,transparent) 0%,transparent 56%),radial-gradient(ellipse 46% 60% at -6% 30%,color-mix(in srgb,var(--lav-3) 85%,transparent) 0%,transparent 58%),radial-gradient(ellipse 50% 44% at 106% 10%,color-mix(in srgb,var(--violet-300) 68%,transparent) 0%,transparent 60%),radial-gradient(ellipse 80% 46% at 55% 112%,color-mix(in srgb,color-mix(in srgb,var(--violet-300) 45%,var(--lav-3)) 88%,transparent) 0%,transparent 62%),linear-gradient(180deg,color-mix(in srgb,var(--violet-200) 62%,var(--lav-4)) 0%,color-mix(in srgb,var(--violet-100) 70%,var(--lav-4)) 38%,var(--color-bg) 100%)}@media(min-width:60rem){.demo__sticky{--demo-clear-x: 70%;--demo-clear-y: 46%}}.demo__sticky:before{content:"";position:absolute;top:-30%;right:-30%;bottom:-30%;left:-30%;z-index:0;pointer-events:none;opacity:.6;background:repeating-conic-gradient(from calc(88deg + var(--demo-wash, 0) * 6deg) at 128% 26%,transparent 0deg .55deg,rgb(255 255 255 / .75) .55deg .72deg,transparent .72deg 2.4deg),linear-gradient(101deg,transparent 0%,color-mix(in srgb,var(--lav-3) 42%,transparent) 16%,rgb(150 205 225 / .3) 32%,rgb(158 219 200 / .26) 46%,color-mix(in srgb,var(--violet-300) 40%,transparent) 62%,color-mix(in srgb,var(--violet-400) 42%,transparent) 78%,transparent 96%);filter:blur(7px);transform:translate3d(calc(var(--demo-wash, 0) * -70px),calc(var(--demo-wash, 0) * 44px),0) scale(1.04)}.demo__sticky:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;opacity:var(--demo-dark, 0);background:linear-gradient(168deg,color-mix(in srgb,var(--lav-1) 34%,#000),color-mix(in srgb,var(--lav-1) 78%,#000) 58%,color-mix(in srgb,var(--lav-1) 34%,#000))}.demo__sticky{border-color:color-mix(in srgb,var(--lav-1) 34%,#000)}.demo__sticky{box-shadow:inset 0 0 clamp(6rem,18vw,16rem) clamp(3rem,9vw,8rem) rgb(6 5 14 / calc(var(--demo-slide1, 0) * .85))}.demo__nightglow{position:absolute;top:-8%;right:-8%;bottom:-8%;left:-8%;z-index:1;pointer-events:none;opacity:var(--demo-dark, 0);filter:blur(38px);background:radial-gradient(118% 118% at 38% 10%,#000000 12%,var(--lav-0) 34%,var(--lav-1) 58%,var(--lav-2) 82%,color-mix(in srgb,var(--lav-3) 72%,#000) 100%);animation:demo-night-breathe 26s ease-in-out infinite alternate;will-change:transform}.demo__nightglow:before,.demo__nightglow:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;will-change:transform}.demo__nightglow:before{opacity:.55;mix-blend-mode:screen;background:radial-gradient(62% 58% at 26% 78%,color-mix(in srgb,var(--lav-3) 62%,transparent) 0%,color-mix(in srgb,var(--lav-2) 34%,transparent) 42%,transparent 72%);animation:demo-night-b 19s ease-in-out infinite alternate}.demo__nightglow:after{opacity:.85;background:radial-gradient(58% 62% at 74% 48%,rgb(0 0 0 / .9) 0%,transparent 68%),radial-gradient(50% 46% at 50% 88%,rgb(0 0 0 / .75) 0%,transparent 70%);animation:demo-night-c 31s ease-in-out infinite alternate}@keyframes demo-night-breathe{0%{transform:scale(1) translateZ(0)}50%{transform:scale(1.22) translate3d(-5%,3.5%,0)}to{transform:scale(1.1) translate3d(4.5%,-3%,0)}}@keyframes demo-night-b{0%{transform:translate3d(-9%,6%,0) scale(1)}to{transform:translate3d(11%,-8%,0) scale(1.45)}}@keyframes demo-night-c{0%{transform:translate3d(7%,-4%,0) scale(1.24)}to{transform:translate3d(-8%,7%,0) scale(.96)}}.demo__canvas{display:block;width:100%;height:100%;position:relative;z-index:1}@media(prefers-reduced-motion:reduce){.demo__sticky{--demo-wash: 0 !important;--demo-dark: 0 !important}.demo__nightglow,.demo__nightglow:before,.demo__nightglow:after{animation:none}}.demo__canvas:not([data-ready]){opacity:0}.demo__canvas[data-ready]{opacity:1;transition:opacity .8s var(--ease)}.demo__copy{padding:var(--section-y) var(--gutter);display:grid;gap:2.5rem}.demo--live .demo__copy{position:absolute;left:0;right:0;bottom:clamp(4.5rem,15vh,8rem);padding:0 var(--gutter);gap:0;display:grid;justify-items:center;pointer-events:none;z-index:2}.demo--live .demo__beat{grid-area:1 / 1;max-width:32rem;text-align:center;opacity:0;transform:translateY(1rem);transition:opacity .45s var(--ease),transform .45s var(--ease)}.demo--live .demo__beat.is-active{opacity:1;transform:none}.demo__beat-icon{display:inline-flex;width:24px;height:24px;margin-bottom:.8rem;color:var(--beat-accent, var(--lav-2))}.demo__beat-icon svg{width:100%;height:100%}.demo__beat[data-beat="0"]{--beat-accent: var(--lav-3)}.demo__beat[data-beat="1"]{--beat-accent: #c9b4ff}.demo__beat[data-beat="2"]{--beat-accent: #ef8a97}.demo__beat[data-beat="3"]{--beat-accent: #e0475a}.demo__beat[data-beat="4"]{--beat-accent: #b7adff}.demo__beat[data-beat="5"]{--beat-accent: #3f9d6c}.demo__eyebrow{font-size:var(--fs-xs);font-weight:var(--weight-strong);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--color-text-muted);color:color-mix(in srgb,rgb(255 255 255 / .72) calc(var(--demo-ink, 0) * 100%),var(--color-text-muted));margin:0 0 .75rem}.demo__heading{font-size:var(--fs-xl);font-weight:var(--weight-heading);letter-spacing:-.015em;line-height:1.1;color:var(--color-text);color:color-mix(in srgb,#fff calc(var(--demo-ink, 0) * 100%),var(--color-text));margin:0 0 .5rem;text-wrap:balance}.demo__text{font-size:var(--fs-base);line-height:1.55;color:var(--color-text-muted);color:color-mix(in srgb,rgb(255 255 255 / .78) calc(var(--demo-ink, 0) * 100%),var(--color-text-muted));margin:0;text-wrap:pretty}.demo__hero{position:absolute;z-index:2;inset:0 0 auto;top:clamp(5rem,12vh,8.5rem);display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.1rem;padding-inline:var(--gutter);pointer-events:none}.demo__hero>*{pointer-events:auto}.demo__hero-heading{font-family:var(--font-body);font-size:var(--fs-display);font-weight:600;line-height:var(--leading-display);letter-spacing:-.03em;color:var(--color-text);max-width:15ch;margin:0;text-wrap:balance}.demo__hero-text{font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.45;color:var(--color-text-muted);max-width:46ch;margin:0;text-wrap:pretty}.demo__hero-cta{display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.7rem;border-radius:var(--radius-pill);background:var(--color-accent);color:var(--color-on-accent);font-weight:var(--weight-strong);font-size:var(--fs-sm);box-shadow:0 14px 30px -12px color-mix(in srgb,var(--violet-500) 62%,transparent),0 2px 10px -4px color-mix(in srgb,var(--violet-500) 42%,transparent);transition:box-shadow .18s var(--ease),transform .18s var(--ease),filter .18s var(--ease)}.demo__hero-cta:hover{text-decoration:none;transform:translateY(-1px);filter:saturate(1.08) brightness(1.04);box-shadow:0 20px 38px -12px color-mix(in srgb,var(--violet-500) 75%,transparent),0 3px 12px -4px color-mix(in srgb,var(--violet-500) 52%,transparent)}.demo__qr{position:absolute;z-index:3;right:2rem;bottom:1.25rem;display:flex;align-items:center;gap:.8rem;max-width:282px;padding:.75rem;border-radius:18px;background:var(--color-text);color:#fff;box-shadow:0 14px 30px -20px #0f0e178c;border:1px solid rgb(255 255 255 / calc(var(--demo-dark, 0) * .18))}.demo__qr-code{flex:0 0 auto;width:72px;height:72px;border-radius:7px;overflow:hidden;background:#fff;padding:5px}.demo__qr-code svg{display:block}.demo__qr-copy{min-width:0}.demo__qr-heading{margin:0 0 .15rem;font-family:var(--font-body);font-size:var(--fs-base);font-weight:var(--weight-heading);letter-spacing:-.015em;color:#fff}.demo__qr-text{margin:0;font-size:var(--fs-xs);line-height:1.35;color:color-mix(in srgb,#fff 62%,transparent);text-wrap:pretty}@media(max-width:959px){.demo__qr{display:none}}.demo__skip{position:absolute;z-index:3;left:2rem;bottom:1.25rem;display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .95rem;border-radius:var(--radius-pill);font-size:var(--fs-xs);font-weight:var(--weight-strong);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--color-text-muted);color:color-mix(in srgb,rgb(255 255 255 / .82) calc(var(--demo-ink, 0) * 100%),var(--color-text-muted));border:1px solid var(--color-line);border:1px solid color-mix(in srgb,rgb(255 255 255 / .3) calc(var(--demo-ink, 0) * 100%),var(--color-line));background:#ffffff80;background:color-mix(in srgb,rgb(255 255 255 / .08) calc(var(--demo-ink, 0) * 100%),rgb(255 255 255 / .5));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .18s var(--ease),opacity .18s var(--ease)}.demo__skip:hover{text-decoration:none;transform:translateY(-1px)}.demo__skip svg{width:.95em;height:.95em}@media(max-width:959px){.demo__skip{left:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px))}}.demo__end{position:absolute;left:0;bottom:0;width:1px;height:1px}.demo__steps{position:absolute;z-index:3;bottom:1.25rem;left:50%;transform:translate(-50%);display:flex;gap:.25rem;color:var(--color-text-muted);color:color-mix(in srgb,rgb(255 255 255 / .75) calc(var(--demo-ink, 0) * 100%),var(--color-text-muted))}.demo__step{width:1.5rem;height:1.5rem;padding:.5rem;border:0;border-radius:50%;color:inherit;background:currentColor;background-clip:content-box;opacity:.32;cursor:pointer;transition:opacity var(--dur) var(--ease)}.demo__step:hover{opacity:.7}.demo__step[aria-current=true]{opacity:1}@media(max-width:59.999rem){.demo--live .demo__copy{bottom:max(calc(4.5rem + env(safe-area-inset-bottom,0px)),14svh)}.demo--live .demo__beat{align-self:end}.demo--live .demo__beat-icon,.demo--live .demo__eyebrow{display:none}.demo__steps{bottom:calc(1rem + env(safe-area-inset-bottom,0px))}}@media(max-width:29.999rem){.demo--live .demo__copy{bottom:calc(4.5rem + env(safe-area-inset-bottom,0px))}}.demo__fallback{display:none}.demo--fallback{height:auto!important}.demo--fallback .demo__sticky{position:static;height:auto}.demo--fallback .demo__canvas,.demo--fallback .demo__steps{display:none}.demo--fallback .demo__fallback{display:block;padding:var(--section-y) var(--gutter) 0;text-align:center}.demo__fallback-phone{width:min(240px,60vw);margin:0 auto;aspect-ratio:9 / 19.5;border-radius:2rem;background:#14161a;border:1px solid var(--color-line)}.demo--fallback .demo__beat{text-align:center;max-width:32rem;margin-inline:auto}@media(prefers-reduced-motion:reduce){.demo--live .demo__beat{transition:none}}@media(min-width:60rem){.demo--live .demo__copy{top:0;bottom:0;left:50%;right:0;align-content:center;justify-items:start;padding-inline:clamp(2rem,6vw,5rem) var(--gutter)}.demo--live .demo__beat{text-align:left}.demo__heading{font-size:var(--fs-2xl);letter-spacing:-.018em;line-height:1.05}.demo__text{font-size:var(--fs-lg);line-height:1.45}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/ourpwr-demo.css.map */