/* Fignotate motion layer: aurora, spotlight, beams, marquee, floating nav. Driven by motion.js (GSAP + ScrollTrigger + Lenis). */
:root{--ease:cubic-bezier(.16,1,.3,1);overflow-x:clip}
:root[data-theme="twilight"]{scrollbar-color:#8c7ae6 transparent}
:root[data-theme="oatmeal"]{scrollbar-color:#a48763 transparent}
:root[data-theme="safety"]{scrollbar-color:#ff4f00 transparent}
:root[data-theme="earth"]{scrollbar-color:#1f4d3a transparent}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:hidden}

/* Browser surfaces, themed */
::selection{background:color-mix(in srgb,var(--theme-accent-2,#8c7ae6) 55%,#fff);color:var(--theme-ink,#19152d)}
:focus-visible{outline:2px solid var(--theme-accent,#6537e8);outline-offset:3px;border-radius:10px}

/* Scroll progress + cursor light */
.scroll-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:100;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--theme-accent,#6537e8),var(--theme-accent-2,#8c7ae6));pointer-events:none}
.no-motion .scroll-progress,.no-motion .cursor-glow{display:none}
.cursor-glow{position:fixed;left:-280px;top:-280px;width:560px;height:560px;border-radius:50%;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(circle,color-mix(in srgb,var(--theme-accent-2,#8c7ae6) 24%,transparent),transparent 66%)}
.cursor-glow.on{opacity:1}

/* Aurora + dot grid behind the hero */
.aurora{position:absolute;inset:0 0 auto 0;height:980px;z-index:-1;overflow:hidden;pointer-events:none;contain:paint;-webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent)}
.aurora i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.46;animation:aurora-a 17s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:560px;height:460px;left:-6%;top:-14%;background:var(--theme-accent-2,#8c7ae6)}
.aurora i:nth-child(2){width:520px;height:520px;right:-8%;top:-18%;background:var(--theme-accent,#2c2a72);opacity:.28;animation-name:aurora-b;animation-duration:21s}
.aurora i:nth-child(3){width:420px;height:360px;left:38%;top:22%;background:color-mix(in srgb,var(--theme-accent) 45%,var(--theme-accent-2));opacity:.3;animation-duration:25s;animation-delay:-8s}
.aurora::after{content:'';position:absolute;inset:0;background-image:radial-gradient(color-mix(in srgb,var(--theme-ink,#19152d) 22%,transparent) 1px,transparent 1.3px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 22%,#000,transparent 75%);mask-image:radial-gradient(ellipse 60% 55% at 50% 22%,#000,transparent 75%)}
.aurora.is-paused i{animation-play-state:paused}
@keyframes aurora-a{to{transform:translate(120px,70px) scale(1.18)}}
@keyframes aurora-b{to{transform:translate(-140px,90px) scale(.9)}}

/* Floating nav pill */
.site-header{position:sticky;top:0;z-index:60;transition:transform .6s var(--ease)}
.site-header>*{position:relative}
.site-header::before{content:'';position:absolute;inset:10px -20px;border-radius:20px;border:1px solid var(--theme-line,#e9e5f2);background:color-mix(in srgb,var(--theme-surface,#fff) 72%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);box-shadow:0 12px 34px #1a143a14,0 2px 6px #1a143a0a;opacity:0;scale:.94;transition:opacity .45s var(--ease),scale .6s var(--ease)}
.site-header.is-stuck::before{opacity:1;scale:1}
.site-header.is-hidden{transform:translateY(-120%)}

/* Headline + gradient shimmer */
sw-word{display:inline-block}
.hero h1 span,.section-heading h2 span,.feature-copy h2 span,.closing h2 span{display:inline-block}
.hero h1 span{background-size:220% 100%;animation:shimmer 6s ease-in-out infinite alternate}
@keyframes shimmer{to{background-position:100% 0}}
.hero-note .sparkle{display:inline-block;animation:spin-slow 8s linear infinite}
@keyframes spin-slow{to{rotate:360deg}}

/* The motion class hands transforms to GSAP */
.motion .hero-copy,.motion .hero-mascot,.motion .hero-mascot img{animation:none}
.motion .step,.motion .feature-card,.motion .preview{transition:box-shadow .3s}
.motion .step:hover,.motion .feature-card:hover{transform:none}

/* Border beam (Magic UI) */
@property --beam{syntax:'<angle>';inherits:false;initial-value:0deg}
.beam{position:relative;overflow:hidden}
.beam::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--beam),transparent 0 70%,var(--beam-color,#fff) 92%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:beam 4.5s linear infinite}
.preview.beam{overflow:visible;--beam-color:var(--theme-accent,#6537e8)}
@keyframes beam{to{--beam:360deg}}

/* Button sheen + arrow nudge */
.button.primary::before{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(105deg,transparent 35%,#ffffff55 50%,transparent 65%);translate:-120% 0;transition:translate .8s var(--ease)}
.button.primary:hover::before{translate:120% 0}
.button.primary>*,.button.primary{z-index:1}
.button span,.nav-cta span{display:inline-block;transition:translate .35s var(--ease)}
.button:hover span,.nav-cta:hover span{translate:3px -3px}
.button.quiet:hover span{translate:0 3px}

/* Spotlight cards (Magic UI / Aceternity) */
.spot{position:relative;isolation:isolate}
.spot::before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--theme-accent-2,#8c7ae6) 24%,transparent),transparent 70%)}
.spot:hover::before{opacity:1}
.step-icon{transition:rotate .5s var(--ease),scale .5s var(--ease)}
.step:hover .step-icon{rotate:-8deg;scale:1.12}
.preview img{clip-path:inset(0 round 15px)}

/* Annotation marquee: the page demonstrates its own job */
.marquee{overflow:hidden;padding:46px 0 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-rows{display:grid;gap:12px}
.marquee-track{display:flex;gap:12px;width:max-content;animation:marquee 44s linear infinite}
.marquee-track.rev{animation-direction:reverse;animation-duration:52s}
.marquee.is-paused .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(calc(-50% - 6px))}}
.chip{display:inline-flex;align-items:center;gap:9px;padding:8px 16px 8px 8px;border-radius:999px;border:1px solid var(--theme-line,#e9e5f2);background:var(--theme-surface,#fff);color:var(--theme-ink,#19152d);font-size:12px;font-weight:600;white-space:nowrap;box-shadow:0 4px 14px #34255b08}
.chip b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--theme-ink,#19152d);color:var(--theme-page,#fff);font-size:10px;font-variant-numeric:tabular-nums}

/* Linked marker <-> note in the feature card */
.mini-target{transition:background .3s,scale .4s var(--ease)}
.mini-target::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--theme-accent-2,#8c7ae6);animation:ping 2.4s var(--ease) infinite}
.mini-target.target-b::after{animation-delay:-1.2s}
@keyframes ping{0%{transform:scale(1);opacity:.9}80%,100%{transform:scale(2.5);opacity:0}}
.mini-target.is-active{scale:1.35;background:var(--theme-accent,#673fe0)}
.mini-annotations>div{transition:border-color .3s,box-shadow .4s,translate .4s var(--ease)}
.mini-annotations>div.is-active{border-color:var(--theme-accent,#673fe0);box-shadow:0 10px 22px color-mix(in srgb,var(--theme-accent,#673fe0) 18%,transparent);translate:0 -3px}

/* Palette switch: circular reveal from the click point */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:2}

@media(max-width:560px){.site-header::before{inset:9px -10px}.marquee{padding-top:34px}}
@media(prefers-reduced-motion:reduce){.aurora i,.marquee-track,.hero h1 span,.beam::after,.mini-target::after,.hero-note .sparkle{animation:none!important}.site-header.is-hidden{transform:none}}

/* Spring easing (Framer-style) via linear() */
:root{--spring:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 19.9%,1.077 22.9%,1.121 26.2%,1.136 28.6%,1.131 31.2%,1.112 33.9%,1.056 40.6%,1.01 46.2%,.995 51.6%,.998 63.5%,1)}

/* Confetti pins */
.confetti{position:fixed;z-index:200;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 11px Manrope,sans-serif;pointer-events:none;border:2px solid #fff;box-shadow:0 4px 10px #1a143a33}

/* Playful hovers */
.hero-mascot{cursor:pointer}
sw-word{cursor:default}
.marquee:hover .marquee-track{animation-play-state:paused}
.chip{transition:translate .5s var(--spring),rotate .5s var(--spring),box-shadow .3s}
.chip:hover{translate:0 -5px;rotate:-2.5deg;box-shadow:0 12px 24px #34255b1a}
.palette-option:hover{transform:translateY(-3px) rotate(-1deg)}
@media(prefers-reduced-motion:reduce){.pin-dot,.pin-note{animation-duration:.01ms!important}}