@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');
:root{color-scheme:dark;--bg:#0d120e;--panel:#151d17;--line:#364538;--muted:#a2b19f;--fg:#f0f5e9;--lime:#c7ff65;--speed:1;font-family:'DM Sans',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--fg);min-width:315px}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--lime);outline-offset:3px}::selection{background:var(--lime);color:#111}
.topbar{height:82px;position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding:0 clamp(19px,3vw,58px);background:#0d120e}.brand{display:flex;align-items:center;gap:13px;white-space:nowrap}.brand-icon{height:37px;width:37px;position:relative;border:1px solid var(--lime);display:grid;place-items:center}.brand-icon span{height:21px;width:3px;background:var(--lime);position:absolute}.brand-icon span:nth-child(2){transform:rotate(60deg)}.brand-icon span:nth-child(3){transform:rotate(120deg)}.brand strong{font:800 23px/.96 'Space Grotesk',sans-serif;letter-spacing:-.075em;display:block}.brand strong span{color:var(--lime)}.brand small{font:700 9px 'Space Mono',monospace;letter-spacing:.02em;color:#8a9e84;display:block;margin-top:5px}.topnav{display:flex;gap:clamp(14px,2.4vw,38px);font:700 12px 'DM Sans',sans-serif;color:#afc0ac}.topnav a:hover{color:var(--lime)}.top-cta{font:800 12px 'DM Sans',sans-serif;padding:15px 18px;background:var(--lime);color:#10190c;white-space:nowrap}.top-cta span{margin-left:12px;font-size:17px}.hero{padding:clamp(38px,5vw,84px) clamp(19px,3vw,58px) clamp(34px,3vw,52px);min-height:550px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);border-bottom:1px solid var(--line);gap:22px;overflow:hidden}.eyebrow{font:700 10px 'Space Mono',monospace;color:var(--lime);letter-spacing:.055em}.hero-copy{position:relative;z-index:1;padding-top:16px}.hero-copy .eyebrow{display:flex;align-items:center;gap:13px;white-space:nowrap}.pulse-dot{height:7px;width:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 6px #c7ff6520;animation:pulseDot calc(2s * var(--speed)) infinite}.eyebrow-line{width:42px;height:1px;background:#677b61}.hero h1{font:700 clamp(58px,7.3vw,130px)/.94 'Space Grotesk',sans-serif;letter-spacing:-.095em;margin:34px 0 23px;max-width:940px}.hero h1 em{font-style:normal;color:var(--lime);white-space:nowrap}.hero-copy>p{color:#abb8a8;line-height:1.72;font-size:clamp(13px,1.15vw,17px);max-width:575px}.hero-links{display:flex;align-items:center;gap:23px;flex-wrap:wrap;margin-top:26px}.button-primary{display:inline-flex;justify-content:space-between;gap:22px;padding:16px 18px;min-width:215px;background:var(--lime);color:#14200d;font:800 13px 'DM Sans',sans-serif}.button-primary span{font-size:20px;line-height:1}.button-quiet{font:700 12px 'DM Sans',sans-serif;border-bottom:1px solid #7a9471;padding:14px 0;color:#dce8d9}.button-quiet span{color:var(--lime);margin-left:13px}.hero-numbers{display:flex;gap:clamp(16px,3vw,60px);margin-top:clamp(38px,6vw,86px)}.hero-numbers div{display:flex;align-items:baseline;gap:11px}.hero-numbers strong{font:700 35px 'Space Grotesk',sans-serif;letter-spacing:-.07em}.hero-numbers span{color:#95a592;font:700 10px 'Space Mono',monospace;text-transform:uppercase}
.hero-art{position:relative;min-height:440px;isolation:isolate;display:grid;place-items:center}.hero-art:before{content:"";position:absolute;inset:6% 0;background:repeating-linear-gradient(0deg,transparent 0 39px,#63835220 40px),repeating-linear-gradient(90deg,transparent 0 39px,#63835220 40px);mask-image:radial-gradient(ellipse at center,#000 20%,transparent 76%);z-index:-1}.orbit{position:absolute;aspect-ratio:1;border:1px solid #7e9a6b77;border-radius:50%;animation:orbitSpin calc(18s * var(--speed)) linear infinite}.orbit-a{width:74%;transform:rotateX(65deg) rotate(-27deg)}.orbit-b{width:86%;border-color:#4c644a;animation-direction:reverse;transform:rotateY(70deg) rotate(42deg)}.orbit-c{width:97%;border-color:#4a644830;animation-duration:calc(28s * var(--speed))}.orbit:after{content:"";position:absolute;top:9%;left:15%;height:7px;width:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 14px var(--lime)}.motion-core{width:clamp(210px,24vw,330px);aspect-ratio:1;position:relative;border-radius:36% 64% 48% 52% / 56% 42% 58% 44%;transform-style:preserve-3d;background:radial-gradient(circle at 30% 20%,#e1ffad,#afe950 21%,#527822 52%,#1b3918 75%);box-shadow:inset 15px 14px 34px #f0ff9a55,inset -32px -25px 44px #081a0d88,0 0 90px #c7ff6540;animation:coreMorph calc(9s * var(--speed)) ease-in-out infinite alternate,orbRotate calc(22s * var(--speed)) linear infinite}.core-shine{position:absolute;inset:16%;border-radius:50%;border:1px solid #faffcd40;transform:rotate(23deg)}.core-grid{position:absolute;inset:12%;border-radius:inherit;background:repeating-linear-gradient(90deg,transparent 0 21px,#f7ffd016 22px 23px);mix-blend-mode:overlay}.hero-cross{position:absolute;font:300 40px 'Space Grotesk';color:var(--lime)}.cross-a{left:15%;top:21%}.cross-b{right:15%;bottom:24%}.hero-art-label{position:absolute;left:7%;bottom:11%;right:7%;display:flex;justify-content:space-between;font:700 10px 'Space Mono',monospace;color:#aac098}.hero-arrows{position:absolute;right:14%;top:16%;color:var(--lime);transform:rotate(45deg);font-size:18px;letter-spacing:-4px;opacity:.7}
.explorer{padding:70px clamp(19px,3vw,58px) 92px;scroll-margin-top:30px}.explorer-heading{display:flex;align-items:end;justify-content:space-between;gap:45px;margin-bottom:31px}.explorer-heading h2,.outro h2{font:700 clamp(43px,5.25vw,79px)/1 'Space Grotesk',sans-serif;letter-spacing:-.075em;margin:16px 0 0}.explorer-heading h2 em,.outro h2 em{color:var(--lime);font-style:normal}.explorer-heading p{color:var(--muted);max-width:390px;font-size:13px;line-height:1.75;margin:0 0 6px}.toolbar{display:flex;gap:18px;align-items:center;justify-content:space-between;margin:0 0 19px}.searchbar{display:flex;align-items:center;gap:12px;height:52px;max-width:630px;flex:1;min-width:0;background:#1a251c;border:1px solid #3c523e;padding:0 17px}.searchbar:focus-within{border-color:var(--lime)}.searchbar .search-icon{font-size:29px;line-height:1;color:var(--lime)}.searchbar input{width:100%;min-width:0;background:transparent;color:#f6f9f1;border:0;outline:none!important;font-size:13px}.searchbar input::placeholder{color:#889c84}.searchbar kbd{font:700 10px 'Space Mono',monospace;border:1px solid #698062;padding:4px 6px;color:#9ab18e}.toolbar-right{display:flex;align-items:center;gap:19px}.toggle-pill{display:flex;align-items:center;gap:8px;border:1px solid #566b51;background:#1b291d;color:#d9e9d0;font-size:11px;font-weight:800;padding:12px;white-space:nowrap}.toggle-led{height:7px;width:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 7px var(--lime)}.toggle-pill[aria-pressed="true"] .toggle-led{background:#a0aaa0;box-shadow:none}.results-count{font:700 11px 'Space Mono',monospace;color:#9daf91;white-space:nowrap}.category-row{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 26px}.category-btn{display:flex;align-items:center;gap:10px;justify-content:space-between;border:1px solid #3c503c;background:#172119;color:#b0c2ad;font:700 11px 'DM Sans',sans-serif;padding:10px 13px;transition:background .2s,color .2s}.category-btn small{font:700 10px 'Space Mono',monospace;color:#7d9f73}.category-btn.active{background:var(--lime);border-color:var(--lime);color:#111a0f}.category-btn.active small{color:#44602e}.category-btn:hover:not(.active){border-color:#a8c57d;color:#e5f3de}
.effects-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.effect-card{min-width:0;background:#171f19;border:1px solid #344736;transition:border-color .22s,transform .22s;overflow:hidden}.effect-card:hover{border-color:#72955c;transform:translateY(-2px)}.card-number{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;font:700 9px 'Space Mono',monospace;color:#889e86;border-bottom:1px solid #304335}.card-signal{color:#afed76}.effect-preview{height:202px;overflow:hidden;position:relative;padding:10px;display:flex;align-items:stretch;justify-content:stretch}.effect-caption{display:flex;gap:12px;align-items:end;justify-content:space-between;border-top:1px solid #344636;padding:16px 17px 17px}.effect-text{min-width:0}.effect-category{font:800 9px 'Space Mono',monospace;color:#acd67d}.effect-caption h3{font:700 20px/1.2 'Space Grotesk',sans-serif;letter-spacing:-.035em;margin:7px 0 6px}.effect-caption p{color:#a1b19b;font-size:11px;line-height:1.52;margin:0;min-height:34px}.view-btn{width:36px;height:36px;flex:none;border:1px solid #658450;color:var(--lime);background:#1f2e1f;font-size:22px;transition:background .2s,color .2s}.view-btn:hover{background:var(--lime);color:#1a2115}.empty-results{text-align:center;padding:90px 12px;color:#b8c9ac}.empty-results strong{font:700 24px 'Space Grotesk',sans-serif}.empty-results p{font-size:13px}.empty-results button{background:var(--lime);color:#172217;border:0;padding:12px 20px;font-weight:800}
.outro{border-top:1px solid var(--line);padding:65px clamp(19px,3vw,58px) 80px;background:#121c14}.outro-label{display:flex;justify-content:space-between;gap:14px;font:700 10px 'Space Mono';color:#7c9875}.outro-grid{display:grid;grid-template-columns:1fr 1fr;gap:45px;margin-top:30px}.outro h2{margin:0}.outro-points{display:grid;gap:13px}.outro-points article{border-top:1px solid #4a5d43;padding:15px 0;display:grid;grid-template-columns:minmax(155px,.6fr) 1fr;gap:16px}.outro-points strong{font-size:13px}.outro-points p{font-size:12px;line-height:1.7;color:#a5b6a0;margin:0}.outro-action{display:flex;justify-content:space-between;gap:30px;align-items:center;margin-top:70px;padding:30px;border:1px solid #779957;background:linear-gradient(100deg,#1f321c,#132015)}.outro-action p{margin:10px 0 0;color:#bfd5b2;font-size:14px}.outro-action a{display:flex;justify-content:space-between;gap:35px;background:var(--lime);color:#152013;padding:17px 19px;white-space:nowrap;font-weight:800;font-size:13px}.footer{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px clamp(19px,3vw,58px);color:#8ca086;font:700 10px 'Space Mono',monospace}.footer-brand{color:var(--lime)}
.effect-demo{--speed:1;position:relative;isolation:isolate;overflow:hidden;border:1px solid #2f4a33;background:#102015;width:100%;height:100%;display:flex;align-items:center;justify-content:center;min-height:0;user-select:none}.effect-demo .demo-hint{position:absolute;bottom:10px;right:11px;font:700 9px 'Space Mono',monospace;padding:5px 7px;background:#111e13ac;color:#c8ec9f;z-index:7;pointer-events:none}
.effect-dialog{border:1px solid #597749;background:#121b14;color:var(--fg);max-width:1100px;width:min(950px,calc(100vw - 24px));max-height:calc(100vh - 28px);padding:0;overflow-y:auto;box-shadow:0 45px 140px #000c}.effect-dialog::backdrop{background:#000c;backdrop-filter:blur(8px)}.dialog-shell{padding:clamp(16px,3vw,32px)}.dialog-top{display:flex;align-items:start;justify-content:space-between;gap:20px}.dialog-top h2{font:700 clamp(30px,4vw,53px)/1 'Space Grotesk';letter-spacing:-.07em;margin:12px 0}.dialog-close{height:40px;width:40px;border:1px solid #4c6245;background:#29382b;color:#e8f7df;font-size:19px}.dialog-description{color:#a7ba9e;font-size:13px;line-height:1.65;margin:3px 0 17px}.dialog-preview{position:relative;height:340px;border:1px solid #567149;padding:10px;background:#0a100c}.dialog-stage{width:100%;height:100%}.dialog-stage .effect-demo .demo-hint{font-size:11px}.dialog-decor{position:absolute;top:20px;left:22px;color:#bde897;font:700 10px 'Space Mono',monospace;pointer-events:none;z-index:3}.dialog-decor span{color:var(--lime)}.dialog-tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:15px 0;border-bottom:1px solid #40553d}.speed{display:flex;align-items:center;gap:11px;margin-right:auto;font:700 12px 'DM Sans',sans-serif}.speed input{accent-color:var(--lime);width:130px}.speed output{color:var(--lime);font:700 11px 'Space Mono';min-width:45px}.tool-btn{background:#253628;color:#d7f0c6;border:1px solid #4f6e46;padding:11px 13px;font:700 11px 'DM Sans',sans-serif}.tool-btn:hover{background:#36523a}.code-section{margin:15px 0}.code-head{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#b7d29b;font:700 10px 'Space Mono',monospace;margin-bottom:10px}.code-section pre{padding:16px;max-height:210px;overflow:auto;background:#09110b;color:#c5ddaf;border:1px solid #304730;font:11px/1.55 'Space Mono',monospace;white-space:pre-wrap;overflow-wrap:anywhere}.dialog-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#a6b69d;font-size:11px}.dialog-footer button{border:0;color:#182317;background:var(--lime);padding:11px 14px;font-weight:800;white-space:nowrap}
@media(max-width:1300px){.hero{grid-template-columns:1.2fr .8fr}.effects-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:950px){.hero{grid-template-columns:1fr;min-height:0}.hero-art{min-height:310px}.hero-numbers{margin-top:30px}.explorer-heading{align-items:start;flex-direction:column;gap:14px}.outro-grid{grid-template-columns:1fr}.topnav{display:none}}@media(max-width:600px){.topbar{height:70px}.brand strong{font-size:20px}.brand small{font-size:8px}.top-cta{padding:11px 10px;font-size:10px}.top-cta span{display:none}.hero h1{font-size:clamp(46px,12vw,76px)}.hero h1 em{white-space:normal}.hero-copy>p{font-size:13px}.hero-art{min-height:240px}.hero-numbers{gap:17px;flex-wrap:wrap}.hero-numbers strong{font-size:28px}.hero-numbers span{font-size:8px}.explorer{padding-top:40px}.explorer-heading h2{font-size:44px}.toolbar{align-items:stretch;flex-direction:column}.toolbar-right{justify-content:space-between}.category-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}.category-btn{flex:none}.effects-grid{grid-template-columns:1fr}.effect-preview{height:215px}.outro-points article{grid-template-columns:1fr;gap:4px}.outro-action{flex-direction:column;align-items:stretch;padding:20px}.outro-action a{justify-content:space-between}.footer{flex-wrap:wrap}.dialog-preview{height:290px}.dialog-tools{flex-wrap:wrap}.speed{width:100%}.speed input{flex:1}.tool-btn{flex:1}.dialog-footer{align-items:start;flex-direction:column}}
@keyframes pulseDot{50%{box-shadow:0 0 0 10px #c7ff6505;opacity:.65}}@keyframes orbitSpin{to{rotate:360deg}}@keyframes coreMorph{0%{border-radius:36% 64% 48% 52% / 56% 42% 58% 44%}100%{border-radius:61% 39% 54% 46% / 42% 57% 43% 58%}}@keyframes orbRotate{to{transform:rotate(360deg)}}

/* 01. TYPOGRAPHY */
.demo-type{display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:center;max-width:88%}.demo-small,.demo-type-sub{font:700 9px 'Space Mono',monospace;color:#8fae81;letter-spacing:.14em}.demo-type-word{font:900 clamp(29px,4vw,60px)/.95 'Space Grotesk',sans-serif;letter-spacing:-.09em;color:#d8ff8b;white-space:nowrap}.dialog-stage .demo-type-word{font-size:clamp(44px,8vw,98px)}.demo-type-sub{color:#e4f0da}
.fx-rise .demo-type-word{animation:fx-rise calc(2.8s * var(--speed)) ease-in-out infinite}
@keyframes fx-rise{0%,10%{transform:translateY(40px);opacity:0;filter:blur(9px)}32%,77%{opacity:1;transform:translateY(0);filter:blur(0)}98%,100%{transform:translateY(-20px);opacity:0}}
.fx-mask .demo-type-word{clip-path:inset(0 100% 0 0);animation:fx-mask calc(3.4s * var(--speed)) cubic-bezier(.76,0,.24,1) infinite}
@keyframes fx-mask{0%,12%{clip-path:inset(0 100% 0 0)}45%,78%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 100%)}}
.fx-glitch .demo-type-word{color:#efffd5;position:relative;animation:fx-glitch calc(2.3s * var(--speed)) steps(1) infinite;text-shadow:-2px 0 #ff6275,2px 0 #4cffff}
@keyframes fx-glitch{0%,73%,89%,100%{transform:none;text-shadow:-2px 0 #ff6275,2px 0 #4cffff}74%{transform:translate(-5px,1px) skew(4deg);text-shadow:4px 0 #ff6275,-5px 0 #4cffff}78%{transform:translate(5px,-3px);text-shadow:-4px 0 #4cffff,5px 0 #ff6275}82%{transform:translate(-2px,2px);text-shadow:3px 0 #ff6275}}
.fx-gradient .demo-type-word{background:linear-gradient(110deg,#8affdd 0%,#d8ff68 26%,#f6e769 44%,#9d7cfe 65%,#8affdd 100%);background-size:260% auto;color:transparent;background-clip:text;-webkit-background-clip:text;animation:fx-gradient calc(3s * var(--speed)) linear infinite}
@keyframes fx-gradient{to{background-position:260% center}}
.fx-typewriter .demo-type-word{width:0;overflow:hidden;animation:fx-typewriter calc(3.5s * var(--speed)) steps(6,end) infinite;white-space:nowrap;border-right:3px solid #d8ff65}
@keyframes fx-typewriter{0%,8%{width:0}58%,83%{width:6.2ch}95%,100%{width:0}}
.fx-tracking .demo-type-word{animation:fx-tracking calc(3.6s * var(--speed)) ease-in-out infinite;transform-origin:center}
@keyframes fx-tracking{0%,15%{letter-spacing:.36em;opacity:0;filter:blur(5px)}40%,78%{letter-spacing:-.09em;opacity:1;filter:blur(0)}100%{letter-spacing:.09em;opacity:0}}

/* 02. BUTTON MICROINTERACTIONS */
.demo-button-wrap{display:grid;place-items:center;width:100%;height:100%}.demo-action{position:relative;isolation:isolate;overflow:hidden;min-width:163px;display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid #bde96c;background:#c7ff65;color:#18250f;padding:16px 17px;font:900 14px 'DM Sans',sans-serif;transform:translate(var(--mx,0px),var(--my,0px));transition:transform calc(.35s * var(--speed)) cubic-bezier(.16,1,.3,1),box-shadow calc(.35s * var(--speed)),background calc(.3s * var(--speed)),color calc(.3s * var(--speed));cursor:pointer}.demo-action>b{font-size:20px;font-weight:500;transition:transform calc(.3s * var(--speed))}.demo-action span,.demo-action b{z-index:2}.fx-lift .demo-action:hover{transform:translateY(-8px);box-shadow:0 13px 0 #557737,0 21px 35px #b9ff3344}.fx-lift .demo-action:active{transform:translateY(-2px);box-shadow:0 3px 0 #557737}.fx-shine .demo-action:after{content:"";position:absolute;top:-100%;left:-110%;height:300%;width:65%;transform:rotate(30deg);background:linear-gradient(90deg,transparent,#fff9,transparent);transition:left calc(.65s * var(--speed)) ease}.fx-shine .demo-action:hover:after{left:145%}.fx-magnetic .demo-action{background:#1c402d;color:#d3ff9a;border-radius:40px;border-color:#a1d273}.fx-magnetic .demo-action:hover{box-shadow:0 0 36px #d8ff653a}.fx-ripple .demo-action{background:#c8ff68}.fx-ripple .ripple-wave{position:absolute;z-index:1;left:50%;top:50%;width:12px;height:12px;margin-left:-6px;margin-top:-6px;background:#4b6c37aa;border-radius:50%;pointer-events:none;animation:fx-ripple calc(.7s * var(--speed)) ease-out both}
@keyframes fx-ripple{to{transform:scale(28);opacity:0}}
.fx-border .demo-action{border:1px solid #617c52;background:#18241b;color:#d8ff65;box-shadow:inset 0 0 0 0 #c7ff65}.fx-border .demo-action:before,.fx-border .demo-action:after{content:"";position:absolute;background:#c7ff65;transition:transform calc(.42s * var(--speed)) ease;z-index:1}.fx-border .demo-action:before{height:3px;width:100%;top:0;left:0;transform:translateX(-101%)}.fx-border .demo-action:after{height:3px;width:100%;bottom:0;right:0;transform:translateX(101%)}.fx-border .demo-action:hover:before,.fx-border .demo-action:hover:after{transform:translateX(0)}.fx-arrow .demo-action{background:#172619;color:#d7fbb2;border-color:#a8cf73}.fx-arrow .demo-action b{transition:transform calc(.35s * var(--speed)) cubic-bezier(.2,2,.4,1)}.fx-arrow .demo-action:hover b{transform:translate(6px,-6px)}.fx-arrow .demo-action:hover{background:#28482f}

/* 03. CARDS */
.demo-card-wrap{height:100%;width:100%;display:grid;place-items:center;perspective:750px}.demo-tilt-card{position:relative;transform-style:preserve-3d;width:min(73%,225px);height:83%;min-height:128px;background:#1d3226;border:1px solid #6a9457;display:flex;flex-direction:column;justify-content:space-between;padding:13px;overflow:hidden;transition:transform calc(.5s * var(--speed)) cubic-bezier(.16,1,.3,1),box-shadow calc(.4s * var(--speed));box-shadow:6px 8px 0 #0a1609}.card-kicker{font:700 8px 'Space Mono',monospace;color:#d6fbad;position:relative;z-index:2}.card-art{height:48%;width:72%;margin:auto;background:radial-gradient(circle at 35% 32%,#e8ff99,#95cd51 43%,#345a31 73%);border-radius:45% 55% 55% 45%;transform:rotate(-19deg);box-shadow:0 0 28px #a9e96266}.card-foot{display:flex;align-items:end;justify-content:space-between;gap:7px;position:relative;z-index:2}.card-foot strong{font:700 12px 'Space Grotesk',sans-serif}.card-foot span{color:#ddff8c;font-size:18px}.card-back{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font:800 24px 'Space Grotesk',sans-serif;color:#122018;background:#c7ff65;opacity:0;backface-visibility:hidden;transform:rotateY(180deg);line-height:1.1}.fx-float .demo-tilt-card{animation:fx-float calc(3s * var(--speed)) ease-in-out infinite}
@keyframes fx-float{50%{transform:translateY(-13px) rotate(-2deg);box-shadow:14px 22px 14px #0007}}
.fx-tilt .demo-tilt-card{transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}.fx-tilt .demo-tilt-card:hover{box-shadow:10px 13px 0 #0d210a}.fx-spotlight .demo-tilt-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--sx,50%) var(--sy,50%),#d8ff6585,transparent 46%);mix-blend-mode:screen;z-index:1;pointer-events:none}.fx-spotlight .demo-tilt-card:hover{border-color:#dcff9d}.fx-lift-shadow .demo-tilt-card:hover{transform:translateY(-16px) scale(1.04);box-shadow:4px 22px 26px #0009}.fx-flip .demo-tilt-card{overflow:visible}.fx-flip .demo-tilt-card:hover{transform:rotateY(180deg)}.fx-flip .card-back{opacity:1}.fx-flip .card-kicker,.fx-flip .card-art,.fx-flip .card-foot{backface-visibility:hidden}.fx-border-run .demo-tilt-card{border:2px solid transparent;background:linear-gradient(#1d3226,#1d3226) padding-box,conic-gradient(from var(--twist,0deg),#c7ff65,#408053,#152d17,#c7ff65) border-box;animation:fx-border-run calc(4s * var(--speed)) linear infinite}
@property --twist{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes fx-border-run{to{--twist:360deg}}

/* 04. AMBIENT BACKGROUNDS */
.demo-ambient{position:absolute;inset:0;isolation:isolate;overflow:hidden;background:#18281a}.ambient-layer{position:absolute;border-radius:50%;pointer-events:none}.ambient-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:3;gap:9px;text-shadow:0 3px 20px #000c}.ambient-content span{font:800 8px 'Space Mono';letter-spacing:.1em;color:#edffdf}.ambient-content strong{font:800 clamp(18px,3vw,32px) 'Space Grotesk',sans-serif;letter-spacing:-.06em;color:#f1ffe8}.fx-mesh .demo-ambient{background:#2e334c}.fx-mesh .ambient-one{width:125%;height:175%;top:-100%;left:-35%;background:#6d49d2;filter:blur(28px);animation:fx-mesh-a calc(6s * var(--speed)) ease-in-out infinite alternate}.fx-mesh .ambient-two{width:130%;height:130%;top:27%;right:-54%;background:#3febbc;filter:blur(30px);animation:fx-mesh-b calc(7s * var(--speed)) ease-in-out infinite alternate}.fx-mesh .ambient-three{width:85%;height:100%;bottom:-67%;left:15%;background:#fb9f62;filter:blur(24px);animation:fx-mesh-a calc(5s * var(--speed)) ease-in-out infinite alternate-reverse}
@keyframes fx-mesh-a{to{transform:translate(28%,22%) scale(1.15)}}@keyframes fx-mesh-b{to{transform:translate(-35%,-25%) scale(.8)}}
.fx-aurora .demo-ambient{background:#050c17}.fx-aurora .ambient-layer{border-radius:40%;filter:blur(22px);mix-blend-mode:screen}.fx-aurora .ambient-one{inset:-50% 37% 0 10%;background:linear-gradient(150deg,transparent,#23f2b0bb,transparent);animation:fx-aurora calc(5s * var(--speed)) ease-in-out infinite alternate}.fx-aurora .ambient-two{inset:-24% 17% -25% 38%;background:linear-gradient(230deg,transparent,#697aff88,transparent);animation:fx-aurora calc(6s * var(--speed)) ease-in-out infinite alternate-reverse}.fx-aurora .ambient-three{inset:-20% 0 -30% 50%;background:linear-gradient(180deg,transparent,#c0ff6490,transparent);animation:fx-aurora calc(4s * var(--speed)) ease-in-out infinite alternate}
@keyframes fx-aurora{to{transform:translate(32%,16%) rotate(32deg) skew(-17deg)}}
.fx-grid .demo-ambient{perspective:260px;background:radial-gradient(circle at center,#173f36,#050e0e)}.fx-grid .ambient-one{inset:-30%;border-radius:0;background:linear-gradient(#7cffbd45 1px,transparent 1px),linear-gradient(90deg,#7cffbd45 1px,transparent 1px);background-size:27px 27px;transform:rotateX(62deg) scale(1.4);animation:fx-grid calc(3s * var(--speed)) linear infinite}
@keyframes fx-grid{to{background-position:0 27px,27px 0;transform:rotateX(62deg) scale(1.6)}}
.fx-orbs .demo-ambient{background:#121a2b}.fx-orbs .ambient-layer{width:40%;height:64%;filter:blur(4px);box-shadow:inset 6px 8px 20px #fff6,inset -9px -13px 23px #13203fa8,0 0 33px #647eff33}.fx-orbs .ambient-one{top:-13%;left:4%;background:radial-gradient(circle at 34% 25%,#c3f1ff,#4c91d5 45%,#274b86);animation:fx-orbs-a calc(5s * var(--speed)) ease-in-out infinite alternate}.fx-orbs .ambient-two{right:10%;top:17%;background:radial-gradient(circle at 34% 25%,#f1c9ff,#9c4bd5 45%,#552786);animation:fx-orbs-b calc(4s * var(--speed)) ease-in-out infinite alternate}.fx-orbs .ambient-three{bottom:-34%;left:31%;background:radial-gradient(circle at 34% 25%,#eaffc9,#69bc51 45%,#26552a);animation:fx-orbs-a calc(6s * var(--speed)) ease-in-out infinite alternate-reverse}
@keyframes fx-orbs-a{to{transform:translate(30%,-17%) scale(1.14)}}@keyframes fx-orbs-b{to{transform:translate(-36%,34%) scale(.85)}}
.fx-lines .demo-ambient{background:#090f18}.fx-lines .ambient-layer{position:absolute;inset:-100%;border-radius:0;background:repeating-linear-gradient(120deg,transparent 0 15px,#6ef9c50b 16px 18px,transparent 20px 39px,#a5cbff70 40px 41px,transparent 42px 64px);animation:fx-lines calc(8s * var(--speed)) linear infinite}.fx-lines .ambient-two{opacity:.35;animation-direction:reverse;background:repeating-linear-gradient(120deg,transparent 0 39px,#ad77fb 40px 43px,transparent 44px 63px)}.fx-lines .ambient-three{display:none}
@keyframes fx-lines{to{transform:translate(0,130px)}}
.fx-pulse .demo-ambient{background:radial-gradient(circle,#1c4631,#08150f)}.fx-pulse .ambient-layer{height:60px;width:60px;border:2px solid #caff9e;border-radius:50%;left:calc(50% - 30px);top:calc(50% - 30px);animation:fx-field calc(3s * var(--speed)) ease-out infinite}.fx-pulse .ambient-two{animation-delay:calc(-1s * var(--speed))}.fx-pulse .ambient-three{animation-delay:calc(-2s * var(--speed))}
@keyframes fx-field{from{transform:scale(.2);opacity:1}to{transform:scale(6);opacity:0}}

/* 05. LOADERS */
.demo-loading{display:flex;flex-direction:column;gap:18px;align-items:center;justify-content:center}.demo-loading>span{font:700 9px 'Space Mono',monospace;letter-spacing:.09em;color:#99be80}.loading-object{position:relative;width:78px;height:70px;display:flex;align-items:center;justify-content:center;gap:5px}.loading-object i{display:block;background:#c7ff65}.fx-spinner .loading-object i:first-child{width:54px;height:54px;border-radius:50%;border:5px solid #4b6a42;border-top-color:#c7ff65;border-right-color:#c7ff65;background:transparent;animation:fx-spin calc(1s * var(--speed)) linear infinite}.fx-spinner .loading-object i:not(:first-child){display:none}@keyframes fx-spin{to{transform:rotate(360deg)}}
.fx-dots .loading-object i{height:10px;width:10px;border-radius:50%;animation:fx-dot calc(.9s * var(--speed)) ease-in-out infinite alternate}.fx-dots .loading-object i:nth-child(2){animation-delay:calc(-.75s * var(--speed))}.fx-dots .loading-object i:nth-child(3){animation-delay:calc(-.55s * var(--speed))}.fx-dots .loading-object i:nth-child(n+4){display:none}@keyframes fx-dot{to{transform:translateY(-22px);opacity:.3}}
.fx-bars .loading-object i{width:7px;height:35px;animation:fx-bar calc(.9s * var(--speed)) ease-in-out infinite alternate}.fx-bars .loading-object i:nth-child(2n){animation-delay:calc(-.35s * var(--speed))}.fx-bars .loading-object i:nth-child(3n){animation-delay:calc(-.6s * var(--speed))}@keyframes fx-bar{from{height:7px;opacity:.5}to{height:53px;opacity:1}}
.fx-skeleton .loading-object{width:145px;height:80px;display:block;background:linear-gradient(90deg,#2a432b 15%,#4e6850 40%,#2a432b 75%);background-size:300% 100%;animation:fx-skeleton calc(2s * var(--speed)) linear infinite;border-radius:8px}.fx-skeleton .loading-object i{position:absolute;background:#152c1c;left:13px;right:13px;height:9px;border-radius:4px}.fx-skeleton .loading-object i:nth-child(1){top:15px;width:26px;height:26px}.fx-skeleton .loading-object i:nth-child(2){top:15px;left:48px;right:12px}.fx-skeleton .loading-object i:nth-child(3){top:34px;left:48px;right:21px}.fx-skeleton .loading-object i:nth-child(4){top:59px}.fx-skeleton .loading-object i:nth-child(n+5){display:none}@keyframes fx-skeleton{to{background-position-x:-300%}}
.fx-orbit .loading-object{animation:fx-spin calc(2.8s * var(--speed)) linear infinite}.fx-orbit .loading-object i{position:absolute;width:9px;height:9px;border-radius:50%;top:0;left:50%;transform-origin:0 36px}.fx-orbit .loading-object i:nth-child(2){transform:rotate(60deg)}.fx-orbit .loading-object i:nth-child(3){transform:rotate(120deg)}.fx-orbit .loading-object i:nth-child(4){transform:rotate(180deg)}.fx-orbit .loading-object i:nth-child(5){transform:rotate(240deg)}.fx-orbit .loading-object i:nth-child(6){transform:rotate(300deg)}.fx-morph .loading-object i:first-child{width:58px;height:58px;border-radius:11px;background:linear-gradient(145deg,#caff80,#3da66d);animation:fx-morph calc(2.2s * var(--speed)) ease-in-out infinite}.fx-morph .loading-object i:not(:first-child){display:none}@keyframes fx-morph{0%,100%{border-radius:10px;transform:rotate(0)}50%{border-radius:50%;transform:rotate(180deg)}}

/* 06. NAVIGATION */
.demo-navigation{width:88%;max-width:350px;padding:14px 13px;border:1px solid #456146;background:#213225;box-shadow:0 12px 26px #09130d88}.nav-logo{display:block;color:#c7ff65;font:800 12px 'Space Grotesk',sans-serif;letter-spacing:-.04em;margin-bottom:15px}.nav-items{display:flex;align-items:center;justify-content:space-between;gap:3px}.nav-item{position:relative;isolation:isolate;border:0;background:transparent;color:#d1e7ca;flex:1;padding:12px 5px;text-align:center;font:700 11px 'DM Sans',sans-serif;cursor:pointer}.nav-item span{display:inline-block;position:relative;z-index:2}.fx-underline .nav-item:after{content:"";position:absolute;left:15%;right:85%;bottom:0;height:2px;background:#c7ff65;transition:right calc(.4s * var(--speed)) cubic-bezier(.2,.8,.2,1)}.fx-underline .nav-item:hover:after,.fx-underline .nav-item:focus-visible:after{right:15%}
.fx-pill .nav-item:before{content:"";position:absolute;inset:1px;border-radius:24px;background:#c7ff65;transform:scaleX(.2);opacity:0;transition:transform calc(.35s * var(--speed)) ease,opacity calc(.35s * var(--speed))}.fx-pill .nav-item:hover:before{transform:scaleX(1);opacity:1}.fx-pill .nav-item:hover{color:#0c190d}.fx-split .nav-item{overflow:hidden}.fx-split .nav-item span{transition:transform calc(.35s * var(--speed));transform:translateY(0)}.fx-split .nav-item:after{content:"↗";position:absolute;inset:0;display:grid;place-items:center;color:#c7ff65;transform:translateY(110%);transition:transform calc(.35s * var(--speed))}.fx-split .nav-item:hover span{transform:translateY(-190%)}.fx-split .nav-item:hover:after{transform:translateY(0)}
.fx-dot .nav-item:before{content:"";position:absolute;bottom:1px;left:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:#c7ff65;opacity:0;transform:translateY(7px);transition:transform calc(.3s * var(--speed)),opacity calc(.3s * var(--speed))}.fx-dot .nav-item:hover:before{opacity:1;transform:translateY(0)}
.fx-scale .nav-item span{transition:transform calc(.3s * var(--speed)),color calc(.3s * var(--speed))}.fx-scale .nav-item:hover span{transform:scale(1.23);color:#c7ff65}.fx-active .nav-item:after{content:"";position:absolute;inset:auto 6px 0;height:2px;background:#c7ff65;opacity:.28;transform:scaleX(.25);transition:transform calc(.4s * var(--speed)),opacity calc(.4s * var(--speed))}.fx-active .nav-item:hover:after,.fx-active .nav-item:focus-visible:after{transform:scaleX(1);opacity:1}.fx-active .nav-item:hover{color:#e4ffcd}

/* 07. GALLERY */
.demo-gallery{width:88%;height:82%;display:flex;align-items:center;justify-content:center;perspective:670px}.gallery-track{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:8px;transform-style:preserve-3d}.gallery-tile{width:31%;height:76%;flex:0 0 31%;position:relative;background:#263b2d;overflow:hidden;transition:transform calc(.5s * var(--speed)) cubic-bezier(.16,1,.3,1),filter calc(.4s * var(--speed));border:1px solid #5b8750;cursor:crosshair}.tile-art{position:absolute;inset:0;background:radial-gradient(ellipse at 35% 35%,#dfff96 0 12%,#79a848 35%,transparent 36%),linear-gradient(135deg,#3d8d8c,#233a4c);transform:scale(1);transition:transform calc(.7s * var(--speed)),filter calc(.4s * var(--speed));display:block}.tile-2 .tile-art{background:radial-gradient(circle at 35% 30%,#ffb0bd,#b0437e 39%,#562b67 65%),#392c57}.tile-3 .tile-art{background:radial-gradient(circle at 45% 70%,#fee9ab,#afba60 25%,#435d41 64%),#263f35}.tile-caption{position:absolute;inset:auto 0 0;display:flex;align-items:center;justify-content:space-between;gap:5px;padding:6px;background:linear-gradient(transparent,#0a130bba);color:#f9ffe8;font:700 8px 'Space Mono';z-index:2}.tile-caption span{white-space:nowrap;font-size:12px}
.fx-zoom .gallery-tile:hover .tile-art{transform:scale(1.35)}.fx-zoom .gallery-tile:hover{z-index:2}
.fx-wipe .gallery-tile:after{content:"";position:absolute;inset:0;background:#c7ff65bb;transform-origin:left;transition:transform calc(.6s * var(--speed)) cubic-bezier(.8,0,.2,1)}.fx-wipe .gallery-tile:hover:after{transform:scaleX(0)}
.fx-grayscale .gallery-tile .tile-art{filter:grayscale(1)}.fx-grayscale .gallery-tile:hover .tile-art{filter:grayscale(0);transform:scale(1.06)}
.fx-stack .gallery-track{position:relative}.fx-stack .gallery-tile{position:absolute;width:36%;height:85%;left:32%;top:8%;transform-origin:50% 95%;transform:rotate(-3deg)}.fx-stack .tile-2{transform:rotate(8deg)}.fx-stack .tile-3{transform:rotate(-13deg)}.fx-stack .gallery-track:hover .tile-1{transform:translateX(-66%) rotate(-22deg)}.fx-stack .gallery-track:hover .tile-2{transform:translateX(66%) rotate(22deg)}.fx-stack .gallery-track:hover .tile-3{transform:translateY(-9%) rotate(0)}
.fx-slide .gallery-track{justify-content:start;gap:13px;width:230%;max-width:none;transform:translateX(0);animation:fx-gallery-slide calc(5s * var(--speed)) ease-in-out infinite alternate}.fx-slide .gallery-tile{width:31%;flex:0 0 31%}.fx-slide .demo-gallery{overflow:hidden}
@keyframes fx-gallery-slide{from{transform:translateX(24%)}to{transform:translateX(-41%)}}
.fx-caption .tile-caption{transform:translateY(105%);transition:transform calc(.42s * var(--speed)) cubic-bezier(.25,1,.5,1);background:#132217e8}.fx-caption .gallery-tile:hover .tile-caption{transform:translateY(0)}.fx-caption .gallery-tile:hover .tile-art{transform:scale(1.06)}

/* 08. THREE-DIMENSIONAL EFFECTS */
.demo-3d{width:100%;height:100%;display:grid;place-items:center;perspective:570px}.solid-3d{position:relative;width:90px;height:90px;transform-style:preserve-3d;animation:fx-cube calc(7s * var(--speed)) linear infinite}.solid-3d .face{position:absolute;inset:0;border:1px solid #d9ffa7a8;background:linear-gradient(135deg,#b9ff6a88,#1e724d99);display:grid;place-items:center;font:700 38px 'Space Grotesk';color:#e7ffcc;backface-visibility:visible;box-shadow:inset 0 0 23px #dcff7744}.face-front{transform:translateZ(45px)}.face-back{transform:rotateY(180deg) translateZ(45px)}.face-left{transform:rotateY(-90deg) translateZ(45px)}.face-right{transform:rotateY(90deg) translateZ(45px)}.face-top{transform:rotateX(90deg) translateZ(45px)}.face-bottom{transform:rotateX(-90deg) translateZ(45px)}.solid-inner{display:none}
@keyframes fx-cube{from{transform:rotateX(-25deg) rotateY(0)}to{transform:rotateX(335deg) rotateY(360deg)}}
.fx-coin .solid-3d{border-radius:50%;background:radial-gradient(circle at 25% 24%,#faffca,#c7ff65 35%,#4a7e42 70%);box-shadow:inset -10px -5px 14px #19432e,0 0 25px #c7ff6566;border:5px ridge #a5e663;animation:fx-coin calc(4s * var(--speed)) ease-in-out infinite}.fx-coin .face{display:none}.fx-coin .solid-inner{display:grid;place-items:center;inset:0;position:absolute;color:#23401c;font:800 46px 'Space Grotesk'}
@keyframes fx-coin{50%{transform:rotateY(180deg) rotateZ(-20deg)}}
.fx-rings .solid-3d{width:125px;height:125px;animation:fx-cube calc(16s * var(--speed)) linear infinite}.fx-rings .solid-3d .face{border:6px solid #c7ff65aa;border-radius:50%;background:transparent;box-shadow:0 0 15px #c7ff6554,inset 0 0 14px #c7ff6544}.fx-rings .face-front{transform:rotateY(25deg)}.fx-rings .face-back{transform:rotateX(70deg)}.fx-rings .face-left{transform:rotateY(85deg)}.fx-rings .face-right{transform:rotateX(120deg) rotateY(35deg)}.fx-rings .face-top,.fx-rings .face-bottom{display:none}
.fx-prism .solid-3d{animation:fx-cube calc(9s * var(--speed)) linear infinite;width:100px;height:100px}.fx-prism .face{background:linear-gradient(110deg,#0beeba77,#b958ff77);border:1px solid #b7e1d0ae;box-shadow:inset 0 0 32px #b8ffbb44}.fx-prism .face-front,.fx-prism .face-back{clip-path:polygon(50% 0,100% 100%,0 100%)}.fx-prism .face-left,.fx-prism .face-right{clip-path:polygon(50% 0,100% 100%,0 100%)}
.fx-sphere .solid-3d{border-radius:50%;background:radial-gradient(circle at 33% 26%,#f1ffce 0,#c6ff68 19%,#3a7c43 60%,#102415 100%);box-shadow:inset -15px -20px 24px #001d1055,0 0 28px #c7ff6566;animation:fx-sphere calc(4s * var(--speed)) ease-in-out infinite alternate}.fx-sphere .face{display:none}
@keyframes fx-sphere{to{transform:translateY(-24px) rotate(90deg) scale(1.1);box-shadow:inset -15px -20px 24px #001d1055,0 22px 25px #0009}}
.fx-flip-tile .solid-3d{width:110px;height:110px;animation:none;transition:transform calc(.8s * var(--speed)) cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}.fx-flip-tile .solid-3d .face{display:none}.fx-flip-tile .solid-3d .face-front{display:grid;inset:0;backface-visibility:hidden;background:#bdf26f;color:#183010;font-size:55px}.fx-flip-tile .solid-3d .face-back{display:grid;inset:0;backface-visibility:hidden;transform:rotateY(180deg);background:#633c9e;color:#e7d9ff}.fx-flip-tile .demo-3d:hover .solid-3d{transform:rotateY(180deg)}

/* 09. SCROLL MOTION */
.demo-scroll{width:100%;height:100%;overflow-y:auto;overscroll-behavior:contain;position:relative;isolation:isolate;background:linear-gradient(#12251c,#192c27);--progress:0;scrollbar-width:thin;scrollbar-color:#7b9d57 #18271c}.demo-scroll .scroll-progress{position:sticky;top:0;height:4px;width:calc(var(--progress) * 100%);background:#c7ff65;z-index:6;pointer-events:none}.scroll-scene{height:80%;position:relative;min-height:120px;display:flex;align-items:center;justify-content:center;overflow:hidden}.scroll-layer{position:absolute;font:900 43px 'Space Grotesk';letter-spacing:-.08em;color:#ffffff1a;pointer-events:none}.scroll-back{top:11%;left:5%}.scroll-front{bottom:-8%;right:13%;font-size:110px;color:#c7ff6544}.scroll-panel{position:absolute;width:68%;height:62%;top:23%;left:16%;background:#547b4970;border:1px solid #a4e06e;color:#f7ffe7;display:flex;align-items:center;justify-content:center;font:800 11px 'Space Mono',monospace;transition:transform calc(.4s * var(--speed)),opacity calc(.4s * var(--speed)),clip-path calc(.4s * var(--speed))}.scroll-panel.b,.scroll-panel.c{opacity:0}.scroll-down{position:sticky;top:65%;left:10px;background:#102016db;padding:5px;color:#d7e8be;font:700 8px 'Space Mono';z-index:4}.scroll-space{height:145%;pointer-events:none}
.fx-reveal .scroll-panel.a{opacity:calc(1 - var(--progress) * 2);transform:translateY(calc(var(--progress) * -35px))}.fx-reveal .scroll-panel.b{opacity:clamp(0,calc((var(--progress) - .23) * 3.5),1);transform:translateY(calc((1 - var(--progress)) * 30px))}.fx-reveal .scroll-panel.c{opacity:clamp(0,calc((var(--progress) - .62) * 5),1);transform:translateX(calc((1 - var(--progress)) * 40px))}
.fx-parallax .scroll-back{transform:translateY(calc(var(--progress) * -55px))}.fx-parallax .scroll-front{transform:translateY(calc(var(--progress) * -108px))}.fx-parallax .scroll-panel.a{transform:translateY(calc(var(--progress) * -20px)) rotate(calc(var(--progress) * -14deg))}
.fx-progress .scroll-scene{font-size:20px}.fx-progress .scroll-panel.a{width:58%;height:55%;border-radius:50%;transform:rotate(calc(var(--progress) * 360deg)) scale(calc(1 - var(--progress) * .2))}.fx-progress .scroll-front{color:#d8ff6566}
.fx-scale .scroll-panel.a{transform:scale(calc(.55 + var(--progress) * 1.2));border-radius:calc((1 - var(--progress)) * 45px)}.fx-scale .scroll-panel.b{opacity:clamp(0,calc((var(--progress) - .55) * 3),.9);transform:scale(calc(.4 + var(--progress)))}
.fx-horizontal .scroll-panel.a{transform:translateX(calc(var(--progress) * -120px))}.fx-horizontal .scroll-panel.b{opacity:1;transform:translateX(calc(130px - var(--progress) * 260px));background:#8760a577}.fx-horizontal .scroll-panel.c{opacity:.65;transform:translateX(calc(260px - var(--progress) * 310px));background:#b07a6b88}
.fx-sticky .scroll-panel.a{transform:translateY(calc(var(--progress) * -32px)) rotate(calc(var(--progress) * -10deg))}.fx-sticky .scroll-panel.b{opacity:clamp(0,calc(var(--progress) * 3),1);transform:translateY(calc(90px - var(--progress) * 102px)) rotate(calc(var(--progress) * 12deg));background:#6a5aa899}.fx-sticky .scroll-panel.c{opacity:clamp(0,calc((var(--progress) - .3) * 3),1);transform:translateY(calc(145px - var(--progress) * 150px)) rotate(calc(var(--progress) * -5deg));background:#a38b5e99}

/* PAUSE, REDUCED MOTION, INTERACTION SETTINGS */
.paused *,.paused *:before,.paused *:after{animation-play-state:paused!important}
.reduced-motion *,.reduced-motion *:before,.reduced-motion *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
.reduced-motion .demo-scroll .scroll-panel{transition:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero .motion-core,.hero .orbit,.hero .pulse-dot{animation:none}.effect-demo *,.effect-demo *:before,.effect-demo *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* Performance: do not animate the 54 effect previews while they are off-screen. */
.effect-demo.offscreen *, .effect-demo.offscreen *::before, .effect-demo.offscreen *::after{animation-play-state:paused!important}