/* Movement and interaction layer shared by the storefront and docs. */
html{scroll-padding-top:94px}
::selection{background:#ff5538;color:#160b08}
.site-header,header{transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
.site-header.scrolled,header.scrolled{background:#0b0a0af5;border-bottom-color:#ff553877;box-shadow:0 14px 36px #0008}
.site-header .brand-mark{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
.site-header .brand:hover .brand-mark{transform:skew(-10deg) rotate(4deg) scale(1.08);box-shadow:4px 5px 0 #ff553866}
.site-header nav a,header nav a{position:relative}
.site-header nav a:after,header nav a:after{content:'';position:absolute;left:0;right:100%;bottom:-7px;height:2px;background:#ff5538;transition:right .25s ease}
.site-header nav a:hover:after,header nav a:hover:after{right:0}
.hero-inner{z-index:1}
.hero:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(340px circle at var(--spot-x,70%) var(--spot-y,45%),#ff553822,transparent 70%);z-index:0}
.hero h1{animation:hero-arrive .85s cubic-bezier(.2,.75,.15,1) both}
.hero-copy>p,.hero-actions{animation:hero-arrive .9s .12s cubic-bezier(.2,.75,.15,1) both}
.hero-art{animation:art-arrive 1s .18s cubic-bezier(.2,.75,.15,1) both}
.logo-frame{transition:box-shadow .4s ease,transform .4s ease}
.logo-frame:hover{box-shadow:20px 22px 0 #0009,0 0 70px #ff553849;transform:translateY(-5px) rotate(-1deg)}
.logo-frame img{animation:logo-breathe 7s ease-in-out infinite}
.logo-frame:after{content:'';position:absolute;inset:-20% auto -20% -70%;width:35%;transform:skewX(-25deg);background:linear-gradient(90deg,transparent,#fff1,transparent);animation:logo-sweep 8s ease-in-out infinite;pointer-events:none}
.ticker{position:relative;z-index:1}
.button,.nav-shop{position:relative;overflow:hidden}
.button:after,.nav-shop:after{content:'';position:absolute;top:-80%;bottom:-80%;left:-45%;width:24%;transform:rotate(25deg);background:#fff3;transition:left .5s ease;pointer-events:none}
.button:hover:after,.nav-shop:hover:after{left:125%}
.video-card,.doc-card{transition:transform .28s cubic-bezier(.2,.7,.15,1),border-color .28s,box-shadow .28s}
.video-card:hover,.doc-card:hover{transform:translateY(-7px);border-color:#ff7055;box-shadow:10px 13px 0 #ff553828}
.video-play img{transition:transform .5s ease,filter .5s ease,opacity .5s ease;filter:saturate(.8)}
.video-play:hover img{filter:saturate(1.15);transform:scale(1.06)}
.play-icon{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.video-play:hover .play-icon{transform:translate(-50%,-50%) scale(1.16);box-shadow:0 0 0 10px #ff55382e,0 8px 30px #000b}
.docs-callout{position:relative}
.docs-callout:before{content:'READ THE MANUAL';position:absolute;right:0;top:10px;font:800 clamp(46px,7vw,120px) 'Barlow Condensed',sans-serif;color:transparent;-webkit-text-stroke:1px #ff553821;pointer-events:none;white-space:nowrap}
.cta-box{transition:box-shadow .35s ease}
.cta-box:hover{box-shadow:0 24px 65px #ff553827}
.motion-ready .reveal{opacity:0;transform:translateY(28px);filter:blur(3px)}
.motion-ready .reveal.is-visible{opacity:1;transform:translateY(0);filter:blur(0);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.75,.18,1),filter .65s ease;transition-delay:var(--reveal-delay,0ms)}
.scroll-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:9998;pointer-events:none;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#ff5538,#ffc29c);box-shadow:0 0 14px #ff5538}
.cursor-dot,.cursor-ring{display:none;position:fixed;top:0;left:0;z-index:9999;pointer-events:none}
.cursor-dot{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 15px #fff8;transform:translate3d(-50%,-50%,0)}
.cursor-ring{width:34px;height:34px;border:1.5px solid #ff7355;border-radius:50%;background:#ff553817;box-shadow:0 0 16px #ff55382a;transform:translate3d(-50%,-50%,0);transition:width .2s,height .2s,background .2s,border-color .2s}
.cursor-ring:after{content:'+';display:grid;place-items:center;height:100%;color:#fff;font:700 16px 'DM Sans',sans-serif;opacity:0;transition:opacity .15s}
.cursor-ring.is-hovering{width:54px;height:54px;background:#ff553833;border-color:#ffaf98}
.cursor-ring.is-hovering:after{opacity:1}
.cursor-ring.is-clicking{width:24px;height:24px;background:#ff553866}
@keyframes hero-arrive{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes art-arrive{from{opacity:0;transform:translate(25px,25px) rotate(8deg)}to{opacity:1;transform:translate(0,0) rotate(2deg)}}
@keyframes logo-breathe{50%{transform:scale(1.025)}}
@keyframes logo-sweep{0%,35%{left:-70%}55%,100%{left:130%}}
@media(pointer:fine) and (hover:hover){html.has-cursor,html.has-cursor a,html.has-cursor button,html.has-cursor input{cursor:none}.has-cursor .cursor-dot,.has-cursor .cursor-ring{display:block}}
@media(max-width:760px){.docs-callout:before{font-size:12vw;top:20px}.hero:after{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero h1,.hero-copy>p,.hero-actions,.hero-art,.logo-frame img,.logo-frame:after{animation:none!important}.motion-ready .reveal{opacity:1;transform:none;filter:none}.motion-ready .reveal.is-visible{transition:none}.video-card,.doc-card,.button,.nav-shop,.play-icon{transition:none!important}.cursor-dot,.cursor-ring{display:none!important}}