/* ===== fx-ink-image : Ink Reveal Image (organic watercolor bleed-in on scroll) ===== */
.fx-ink-image{position:relative;display:block;overflow:hidden;border-radius:14px;isolation:isolate;background:var(--shadow)}
.fx-ink-image::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line),inset 0 24px 60px -28px rgba(2,8,23,.9)}
.fx-ink-image img,.fx-ink-image picture,.fx-ink-image video{display:block;width:100%;height:100%;object-fit:cover}
.fx-ink-image[data-fx-ready] .fx-ink-image__media{-webkit-mask-image:var(--fx-ink-url);mask-image:var(--fx-ink-url);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-position:center;mask-position:center;will-change:transform,filter,opacity}
.fx-ink-image__media{position:relative;z-index:1;display:block;transform:scale(1.05);filter:saturate(.4) brightness(.7);opacity:0;transition:transform 1.5s var(--ease),filter 1.5s var(--ease),opacity .6s linear}
.fx-ink-image[data-fx-in] .fx-ink-image__media{transform:scale(1);filter:saturate(1) brightness(1);opacity:1}
.fx-ink-image__wash{position:absolute;inset:-12%;z-index:2;pointer-events:none;border-radius:50%;background:radial-gradient(circle at 50% 42%,rgba(85,255,255,.22),rgba(0,207,255,.10) 38%,transparent 66%);opacity:0;mix-blend-mode:screen;transform:scale(.35);transition:opacity .9s var(--ease),transform 1.6s var(--ease)}
.fx-ink-image[data-fx-in] .fx-ink-image__wash{opacity:1;transform:scale(1.15);animation:fxk-inkimg-wash 5.5s var(--ease) .9s infinite alternate}
@keyframes fxk-inkimg-wash{0%{transform:scale(1.05) translate3d(0,0,0)}100%{transform:scale(1.2) translate3d(0,-1.5%,0)}}
@media (prefers-reduced-motion:reduce){.fx-ink-image .fx-ink-image__media{-webkit-mask-image:none!important;mask-image:none!important;transform:none!important;filter:none!important;opacity:1!important;transition:none!important}.fx-ink-image .fx-ink-image__wash{display:none}}

/* ===== fx-ink-wipe : Ink Curtain Wipe (organic ink sheet wipes a section open) ===== */
.fx-ink-wipe{position:relative}
.fx-ink-wipe>:not(.fx-ink-wipe__curtain){position:relative;z-index:1}
.fx-ink-wipe__curtain{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden;opacity:0}
.fx-ink-wipe[data-fx-armed] .fx-ink-wipe__curtain{opacity:1}
.fx-ink-wipe__curtain svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.fx-ink-wipe__sheet{transform:translate3d(0,0,0)}
.fx-ink-wipe__edge{transform:translate3d(0,0,0)}
@media (prefers-reduced-motion:reduce){.fx-ink-wipe__curtain{display:none!important}}

/* ===== fx-ink-hover : Ink Hover Ripple (media re-inks and ripples under the pointer) ===== */
.fx-ink-hover{position:relative;display:block;overflow:hidden;border-radius:14px;isolation:isolate;background:var(--shadow)}
.fx-ink-hover img,.fx-ink-hover picture,.fx-ink-hover video,.fx-ink-hover__media{display:block;width:100%;height:100%;object-fit:cover}
.fx-ink-hover__media{position:relative;z-index:1;transform:scale(1);transition:transform .8s var(--ease),filter .8s var(--ease)}
.fx-ink-hover[data-fx-on] .fx-ink-hover__media{transform:scale(1.035);filter:saturate(1.12) contrast(1.05)}
.fx-ink-hover[data-fx-ready] .fx-ink-hover__media{-webkit-mask-image:var(--fx-ink-hurl);mask-image:var(--fx-ink-hurl);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;will-change:filter,transform}
.fx-ink-hover__ripple{position:absolute;z-index:2;left:0;top:0;width:42%;padding-bottom:42%;height:0;border-radius:50%;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle,rgba(142,235,255,.5),rgba(0,207,255,.22) 42%,transparent 68%);opacity:0;transform:translate3d(-50%,-50%,0) scale(.2);will-change:transform,opacity}
.fx-ink-hover__ripple.fx-is-firing{animation:fxk-inkhover-ripple .85s var(--ease) forwards}
@keyframes fxk-inkhover-ripple{0%{opacity:.9;transform:translate3d(-50%,-50%,0) scale(.15)}70%{opacity:.45}100%{opacity:0;transform:translate3d(-50%,-50%,0) scale(2.6)}}
.fx-ink-hover::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);opacity:.6;transition:opacity .6s var(--ease)}
.fx-ink-hover[data-fx-on]::after{opacity:1;box-shadow:inset 0 0 0 1px rgba(85,255,255,.35),inset 0 0 26px -6px rgba(85,255,255,.35)}
@media (prefers-reduced-motion:reduce){.fx-ink-hover__media{-webkit-mask-image:none!important;mask-image:none!important;transform:none!important;filter:none!important;transition:none!important}.fx-ink-hover__ripple{display:none}.fx-ink-hover[data-fx-on]::after{box-shadow:inset 0 0 0 1px rgba(85,255,255,.35)}}

/* ===== fx-ink-text : Ink Bleed Headline (text reveals through a watery ink mask) ===== */
.fx-ink-text{position:relative;display:inline-block;max-width:100%}
.fx-ink-text[data-fx-ready]{-webkit-mask-image:var(--fx-ink-turl);mask-image:var(--fx-ink-turl);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-position:left center;mask-position:left center;will-change:filter}
.fx-ink-text[data-fx-ready]{opacity:0;transform:translate3d(0,.18em,0);transition:opacity .5s linear,transform 1.2s var(--ease)}
.fx-ink-text[data-fx-ready][data-fx-in]{opacity:1;transform:translate3d(0,0,0)}
.fx-ink-text__sheen{position:absolute;inset:-2px 0;z-index:2;pointer-events:none;background:linear-gradient(100deg,transparent 0,rgba(85,255,255,.0) 38%,rgba(142,235,255,.55) 50%,rgba(85,255,255,0) 62%,transparent 100%);opacity:0;mix-blend-mode:screen;transform:translate3d(-30%,0,0)}
.fx-ink-text[data-fx-in] .fx-ink-text__sheen{animation:fxk-inktext-sheen 1.5s var(--ease) .15s 1}
@keyframes fxk-inktext-sheen{0%{opacity:0;transform:translate3d(-60%,0,0)}30%{opacity:1}100%{opacity:0;transform:translate3d(60%,0,0)}}
@media (prefers-reduced-motion:reduce){.fx-ink-text[data-fx-ready]{-webkit-mask-image:none!important;mask-image:none!important;opacity:1!important;transform:none!important;transition:none!important}.fx-ink-text__sheen{display:none}}

/* ===== fx-reveal : Scroll Reveal (blur-in + stagger) ===== */
.fx-reveal{opacity:0;transform:translate3d(0,34px,0) scale(.965);filter:blur(10px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);transition-delay:calc(var(--i,0) * 90ms);will-change:transform,opacity,filter}
.fx-reveal.fx-reveal-in{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}
.fx-reveal[data-fx-reveal="slide-left"]{transform:translate3d(-44px,0,0) scale(.98)}
.fx-reveal[data-fx-reveal="slide-right"]{transform:translate3d(44px,0,0) scale(.98)}
.fx-reveal[data-fx-reveal="slide-left"].fx-reveal-in,.fx-reveal[data-fx-reveal="slide-right"].fx-reveal-in{transform:translate3d(0,0,0) scale(1)}
@media (prefers-reduced-motion: reduce){.fx-reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important;transition-delay:0ms!important}}

/* ===== fx-parallax : Multi-layer Scroll Parallax (single shared rAF) ===== */
[data-fx-parallax]{will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden}
@media (prefers-reduced-motion: reduce){[data-fx-parallax]{transform:none!important;will-change:auto}}

/* ===== fx-sectiondots : Fixed Section-Dot Nav ===== */
.fx-dots{position:fixed;right:clamp(10px,2.2vw,26px);top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:14px;align-items:center;pointer-events:none}
.fx-dots-btn{pointer-events:auto;position:relative;display:flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none}
.fx-dots-btn::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--steel,#6F86A6);box-shadow:0 0 0 1px var(--line,rgba(142,235,255,.14)) inset;opacity:.55;transform:scale(.82);transition:transform .5s var(--ease),opacity .5s var(--ease),background-color .5s var(--ease),box-shadow .5s var(--ease)}
.fx-dots-btn:hover::after{opacity:.9;transform:scale(1)}
.fx-dots-btn:focus-visible{outline:2px solid var(--aqua,#55FFFF);outline-offset:3px;border-radius:50%}
.fx-dots-btn[aria-current="true"]::after{background:var(--aqua,#55FFFF);opacity:1;transform:scale(1.18);box-shadow:0 0 0 1px rgba(85,255,255,.5),0 0 12px 1px rgba(85,255,255,.45)}
.fx-dots-lbl{position:absolute;right:32px;top:50%;transform:translateY(-50%) translateX(8px);white-space:nowrap;font-family:'Oxanium',ui-monospace,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ice,#8EEBFF);background:rgba(6,17,38,.82);padding:4px 9px;border:1px solid var(--line,rgba(142,235,255,.14));border-radius:4px;opacity:0;pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.fx-dots-btn:hover .fx-dots-lbl,.fx-dots-btn:focus-visible .fx-dots-lbl{opacity:1;transform:translateY(-50%) translateX(0)}
@media (max-width:560px){.fx-dots{gap:11px;right:8px}.fx-dots-lbl{display:none}}
@media (prefers-reduced-motion: reduce){.fx-dots-btn::after,.fx-dots-lbl{transition:none}}

/* ===== fx-linedraw : Scroll-Tied SVG Line Draw ===== */
.fx-linedraw{overflow:visible}
.fx-linedraw [data-fx-draw]{fill:none;stroke:var(--aqua,#55FFFF);stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(85,255,255,.45));transition:stroke-dashoffset .12s linear}
.fx-linedraw [data-fx-draw-track]{fill:none;stroke:var(--line,rgba(142,235,255,.14));stroke-linecap:round}
@media (prefers-reduced-motion: reduce){.fx-linedraw [data-fx-draw]{stroke-dashoffset:0!important;transition:none}}

/* ===== fx-sticky-reveal : Sticky Step Reveal (no scroll hijack) ===== */
.fx-sticky{position:relative}
.fx-sticky-pin{position:-webkit-sticky;position:sticky;top:0;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.fx-sticky-stage{position:relative;width:100%}
.fx-sticky-step{transition:opacity .55s var(--ease),transform .55s var(--ease),filter .55s var(--ease);will-change:opacity,transform,filter}
.fx-sticky-step[data-fx-stack]{position:absolute;inset:0}
.fx-sticky-step:not(.fx-sticky-active){opacity:0;transform:translate3d(0,26px,0) scale(.985);filter:blur(6px);pointer-events:none}
.fx-sticky-step.fx-sticky-active{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0);pointer-events:auto}
.fx-sticky-prog{position:absolute;left:0;right:0;bottom:0;height:2px;transform-origin:left center;transform:scaleX(0);background:linear-gradient(90deg,var(--cyan,#00CFFF),var(--aqua,#55FFFF));opacity:.85;pointer-events:none}
@media (prefers-reduced-motion: reduce){.fx-sticky-step{transition:none!important}.fx-sticky-step:not(.fx-sticky-active){opacity:1;transform:none;filter:none;position:relative;inset:auto;pointer-events:auto}.fx-sticky-prog{display:none}}

/* ===== fx-splitchars : Split-char 3D rise stagger ===== */
[data-fx="splitchars"]{perspective:800px}
.fx-sc-word{display:inline-block;white-space:nowrap}
.fx-sc-char{display:inline-block;will-change:transform,opacity;transform-origin:50% 100%;backface-visibility:hidden}
[data-fx="splitchars"][data-fx-ready] .fx-sc-char{opacity:0;transform:translate3d(0,.7em,0) rotateX(-92deg);filter:blur(2px)}
[data-fx="splitchars"][data-fx-in] .fx-sc-char{animation:fxk-sc-rise .72s var(--ease,cubic-bezier(.16,1,.3,1)) both;animation-delay:var(--fx-d,0ms)}
@keyframes fxk-sc-rise{0%{opacity:0;transform:translate3d(0,.7em,0) rotateX(-92deg);filter:blur(2px)}55%{opacity:1;filter:blur(0)}100%{opacity:1;transform:translate3d(0,0,0) rotateX(0);filter:blur(0)}}
@media (prefers-reduced-motion:reduce){[data-fx="splitchars"][data-fx-ready] .fx-sc-char,[data-fx="splitchars"][data-fx-in] .fx-sc-char{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}}

/* ===== fx-scramble : Cyberpunk decrypt scramble ===== */
.fx-scr{position:relative}
.fx-scr-out{display:inline}
.fx-scr-glyph{color:var(--aqua,#55FFFF);opacity:.92;text-shadow:0 0 6px rgba(85,255,255,.35)}
.fx-scr-fixed{color:inherit}
.fx-scr[data-fx-done] .fx-scr-glyph{color:inherit;text-shadow:none;opacity:1}
@media (prefers-reduced-motion:reduce){.fx-scr-glyph{color:inherit!important;text-shadow:none!important;opacity:1!important}}

/* ===== fx-shimmer : Gradient sheen text sweep ===== */
.fx-shimmer{background-image:linear-gradient(100deg,var(--body,#C2D2E4) 0%,var(--body,#C2D2E4) 38%,var(--aqua,#55FFFF) 48%,var(--ice,#8EEBFF) 52%,var(--body,#C2D2E4) 62%,var(--body,#C2D2E4) 100%);background-size:280% 100%;background-position:140% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;will-change:background-position}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.fx-shimmer{-webkit-text-fill-color:currentColor;color:inherit;background:none}}
.fx-shimmer[data-fx-anim]{animation:fxk-shimmer 5.5s linear infinite}
@keyframes fxk-shimmer{0%{background-position:140% 0}55%{background-position:-40% 0}100%{background-position:-40% 0}}
@media (prefers-reduced-motion:reduce){.fx-shimmer{animation:none!important;background:none!important;-webkit-text-fill-color:currentColor!important;color:inherit!important}}

/* ===== fx-typewriter : Type-on tagline with caret ===== */
.fx-tw{position:relative}
.fx-tw-text{display:inline}
.fx-tw-caret{display:inline-block;width:.6ch;height:1em;transform:translateY(.12em);background:var(--aqua,#55FFFF);margin-left:.06em;box-shadow:0 0 6px rgba(85,255,255,.5);animation:fxk-tw-blink 1s steps(1,end) infinite;will-change:opacity}
.fx-tw[data-fx-done] .fx-tw-caret{animation:fxk-tw-blink 1.1s steps(1,end) infinite}
@keyframes fxk-tw-blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.fx-tw-caret{display:none!important;animation:none!important}}

/* ===== fx-odometer : Rolling-digit odometer counter ===== */
.fx-odo{display:inline-flex;align-items:baseline;line-height:1;font-variant-numeric:tabular-nums}
.fx-odo-digit{display:inline-block;height:1em;overflow:hidden;position:relative;vertical-align:baseline}
.fx-odo-reel{display:block;will-change:transform;transition:transform 1.1s var(--ease,cubic-bezier(.16,1,.3,1))}
.fx-odo-reel span{display:block;height:1em;text-align:center}
.fx-odo-sep{display:inline-block}
@media (prefers-reduced-motion:reduce){.fx-odo-reel{transition:none!important}}

/* ===== fx-meteors : Meteors / shooting-star streaks ===== */
.fx-meteors{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;contain:strict}
.fx-meteors .fx-meteor{position:absolute;top:0;left:0;width:2px;height:2px;border-radius:50%;background:var(--aqua,#55FFFF);box-shadow:0 0 6px 1px rgba(85,255,255,.55);opacity:0;will-change:transform,opacity;transform:translate3d(-10vw,-10vh,0) rotate(var(--fx-mt-ang,225deg))}
.fx-meteors .fx-meteor::before{content:"";position:absolute;top:50%;left:0;width:var(--fx-mt-len,120px);height:1px;transform:translateY(-50%);background:linear-gradient(90deg,rgba(142,235,255,.9),rgba(142,235,255,0));border-radius:1px}
.fx-meteors .fx-meteor.fx-mt-run{animation:fxk-meteor-fall var(--fx-mt-dur,1400ms) cubic-bezier(.16,1,.3,1) forwards}
@keyframes fxk-meteor-fall{0%{opacity:0;transform:translate3d(var(--fx-mt-x0,0),var(--fx-mt-y0,0),0) rotate(var(--fx-mt-ang,225deg)) scaleX(.2)}8%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate3d(var(--fx-mt-x1,0),var(--fx-mt-y1,0),0) rotate(var(--fx-mt-ang,225deg)) scaleX(1)}}
@media (prefers-reduced-motion: reduce){.fx-meteors{display:none}}

/* ===== fx-beams : Slow diagonal light beams ===== */
.fx-beams{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;contain:strict}
.fx-beams .fx-beam{position:absolute;top:-30%;left:0;width:42%;height:160%;opacity:0;transform:translate3d(-60%,0,0) rotate(18deg);transform-origin:top center;will-change:transform,opacity;background:linear-gradient(90deg,rgba(0,207,255,0) 0%,rgba(85,255,255,.10) 45%,rgba(142,235,255,.16) 50%,rgba(85,255,255,.10) 55%,rgba(0,207,255,0) 100%);mix-blend-mode:screen;filter:blur(6px)}
.fx-beams .fx-beam.fx-bm-2{width:30%;background:linear-gradient(90deg,rgba(0,207,255,0),rgba(0,207,255,.12) 50%,rgba(0,207,255,0));animation-delay:-7s !important}
.fx-beams .fx-beam.fx-bm-3{width:24%;background:linear-gradient(90deg,rgba(142,235,255,0),rgba(142,235,255,.14) 50%,rgba(142,235,255,0));animation-delay:-14s !important}
.fx-beams[data-fx-on="1"] .fx-beam{animation:fxk-beam-sweep 22s linear infinite}
@keyframes fxk-beam-sweep{0%{opacity:0;transform:translate3d(-60%,0,0) rotate(18deg)}12%{opacity:1}50%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translate3d(360%,0,0) rotate(18deg)}}
@media (prefers-reduced-motion: reduce){.fx-beams .fx-beam{animation:none !important;opacity:.10;transform:translate3d(120%,0,0) rotate(18deg)}}

/* ===== fx-particles : Constellation / network particle field ===== */
.fx-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;contain:strict}
.fx-particles canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.9}
@media (prefers-reduced-motion: reduce){.fx-particles canvas{opacity:.5}}

/* ===== fx-dotgrid : Drifting masked dot grid ===== */
.fx-dotgrid{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;contain:strict;-webkit-mask-image:radial-gradient(120% 100% at 50% 40%,#000 35%,rgba(0,0,0,.45) 70%,transparent 100%);mask-image:radial-gradient(120% 100% at 50% 40%,#000 35%,rgba(0,0,0,.45) 70%,transparent 100%)}
.fx-dotgrid .fx-dg-layer{position:absolute;top:-40px;left:-40px;right:-40px;bottom:-40px;background-image:radial-gradient(rgba(142,235,255,.35) 1px,transparent 1.6px);background-size:26px 26px;background-position:0 0;opacity:.55;will-change:transform;transform:translate3d(0,0,0)}
.fx-dotgrid[data-fx-on="1"] .fx-dg-layer{animation:fxk-dotgrid-drift 26s linear infinite}
@keyframes fxk-dotgrid-drift{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(26px,26px,0)}}
@media (prefers-reduced-motion: reduce){.fx-dotgrid .fx-dg-layer{animation:none !important;transform:none}}

/* ===== fx-mesh : Morphing aurora mesh gradient ===== */
.fx-mesh{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;contain:strict}
.fx-mesh .fx-mesh-blob{position:absolute;border-radius:50%;filter:blur(48px);mix-blend-mode:screen;opacity:.55;will-change:transform}
.fx-mesh .fx-mesh-a{top:-15%;left:-10%;width:55%;height:60%;background:radial-gradient(closest-side,rgba(85,255,255,.55),rgba(85,255,255,0) 70%)}
.fx-mesh .fx-mesh-b{top:20%;right:-12%;left:auto;width:50%;height:55%;background:radial-gradient(closest-side,rgba(0,207,255,.5),rgba(0,207,255,0) 70%)}
.fx-mesh .fx-mesh-c{bottom:-18%;left:25%;width:48%;height:58%;background:radial-gradient(closest-side,rgba(142,235,255,.45),rgba(142,235,255,0) 70%)}
.fx-mesh[data-fx-on="1"] .fx-mesh-a{animation:fxk-mesh-a 28s ease-in-out infinite}
.fx-mesh[data-fx-on="1"] .fx-mesh-b{animation:fxk-mesh-b 34s ease-in-out infinite}
.fx-mesh[data-fx-on="1"] .fx-mesh-c{animation:fxk-mesh-c 31s ease-in-out infinite}
@keyframes fxk-mesh-a{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(12%,8%,0) scale(1.15)}66%{transform:translate3d(6%,-6%,0) scale(.92)}}
@keyframes fxk-mesh-b{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(-10%,10%,0) scale(.9)}66%{transform:translate3d(-6%,-8%,0) scale(1.18)}}
@keyframes fxk-mesh-c{0%,100%{transform:translate3d(0,0,0) scale(1.05)}33%{transform:translate3d(8%,-10%,0) scale(.95)}66%{transform:translate3d(-8%,4%,0) scale(1.2)}}
@media (prefers-reduced-motion: reduce){.fx-mesh .fx-mesh-blob{animation:none !important}}

/* ===== fx-tilt : Pointer 3D Tilt with Glare and Parallax ===== */
.fx-tilt{position:relative;transform-style:preserve-3d;transform:perspective(900px) rotateX(0deg) rotateY(0deg) translateZ(0);transition:transform .5s var(--ease,cubic-bezier(.16,1,.3,1));will-change:transform;--fx-tilt-gx:50%;--fx-tilt-gy:50%;--fx-tilt-go:0}
.fx-tilt[data-fx-tilt-active="1"]{transition:transform .08s linear}
.fx-tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6;opacity:var(--fx-tilt-go);transition:opacity .4s var(--ease,cubic-bezier(.16,1,.3,1));background:radial-gradient(circle at var(--fx-tilt-gx) var(--fx-tilt-gy),rgba(85,255,255,.32),rgba(0,207,255,.12) 28%,transparent 60%);mix-blend-mode:screen}
.fx-tilt [data-fx-tilt-layer]{transform:translateZ(var(--fx-tilt-depth,28px)) translate3d(calc(var(--fx-tilt-px,0) * 1px),calc(var(--fx-tilt-py,0) * 1px),0);transition:transform .5s var(--ease,cubic-bezier(.16,1,.3,1));will-change:transform}
.fx-tilt[data-fx-tilt-active="1"] [data-fx-tilt-layer]{transition:transform .08s linear}
@media (hover:none),(pointer:coarse){.fx-tilt{transform:none}.fx-tilt::after{display:none}.fx-tilt [data-fx-tilt-layer]{transform:none}}
@media (prefers-reduced-motion:reduce){.fx-tilt,.fx-tilt[data-fx-tilt-active="1"]{transform:none;transition:none}.fx-tilt::after{display:none;opacity:0}.fx-tilt [data-fx-tilt-layer]{transform:none;transition:none}}

/* ===== fx-spotlight : Cursor-Tracking Radial Spotlight + Revealing Border ===== */
.fx-spot{position:relative;isolation:isolate;--fx-spot-mx:50%;--fx-spot-my:50%;--fx-spot-o:0}
.fx-spot::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:var(--fx-spot-o);transition:opacity .45s var(--ease,cubic-bezier(.16,1,.3,1));background:radial-gradient(220px circle at var(--fx-spot-mx) var(--fx-spot-my),rgba(85,255,255,.16),rgba(0,207,255,.07) 40%,transparent 70%)}
.fx-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;padding:1px;opacity:var(--fx-spot-o);transition:opacity .45s var(--ease,cubic-bezier(.16,1,.3,1));background:radial-gradient(180px circle at var(--fx-spot-mx) var(--fx-spot-my),rgba(142,235,255,.85),rgba(0,207,255,.35) 45%,transparent 72%);-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,linear-gradient(#000 0 0);mask-composite:exclude}
.fx-spot>*{position:relative;z-index:2}
.fx-spot-grid{position:relative}
@media (prefers-reduced-motion:reduce){.fx-spot::before,.fx-spot::after{opacity:0!important;transition:none}}

/* ===== fx-magnetic : Magnetic Pull Toward Cursor with Spring-Back ===== */
.fx-mag{display:inline-block;transform:translate3d(0,0,0);transition:transform .55s var(--ease,cubic-bezier(.16,1,.3,1));will-change:transform}
.fx-mag[data-fx-mag-active="1"]{transition:transform .14s var(--ease,cubic-bezier(.16,1,.3,1))}
.fx-mag>[data-fx-mag-text]{display:inline-block;transform:translate3d(0,0,0);transition:transform .55s var(--ease,cubic-bezier(.16,1,.3,1));will-change:transform}
.fx-mag[data-fx-mag-active="1"]>[data-fx-mag-text]{transition:transform .14s var(--ease,cubic-bezier(.16,1,.3,1))}
@media (hover:none),(pointer:coarse){.fx-mag,.fx-mag>[data-fx-mag-text]{transform:none!important}}
@media (prefers-reduced-motion:reduce){.fx-mag,.fx-mag>[data-fx-mag-text]{transform:none!important;transition:none}}

/* ===== fx-borderbeam : Conic Border Beam Traveling the Edge ===== */
@property --fx-beam-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.fx-beam{position:relative;isolation:isolate}
.fx-beam::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;padding:var(--fx-beam-w,1.5px);background:conic-gradient(from var(--fx-beam-a) at 50% 50%,transparent 0deg,transparent 300deg,rgba(0,207,255,.35) 330deg,var(--aqua,#55FFFF) 350deg,var(--ice,#8EEBFF) 358deg,transparent 360deg);-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,linear-gradient(#000 0 0);mask-composite:exclude;animation:fxk-beam-spin var(--fx-beam-dur,5s) linear infinite}
.fx-beam>*{position:relative;z-index:1}
.fx-beam[data-fx-beam-hover="1"]::after{animation-play-state:paused;opacity:.35}
.fx-beam[data-fx-beam-hover="1"][data-fx-beam-on="1"]::after{animation-play-state:running;opacity:1}
@keyframes fxk-beam-spin{to{--fx-beam-a:360deg}}
@media (prefers-reduced-motion:reduce){.fx-beam::after{animation:none;background:conic-gradient(from 0deg,transparent 0deg,transparent 320deg,rgba(85,255,255,.5) 350deg,transparent 360deg);opacity:.6}}

/* ===== fx-sparkle : Sparkle Burst on Hover and Click ===== */
.fx-sparkle{position:relative}
.fx-sparkle-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:7;border-radius:inherit}
.fx-spark{position:absolute;top:0;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;opacity:0;transform:translate3d(0,0,0) scale(0) rotate(0deg);will-change:transform,opacity;background:radial-gradient(circle,var(--ice,#8EEBFF) 0,var(--aqua,#55FFFF) 35%,transparent 70%);-webkit-mask:radial-gradient(circle,#000 0,#000 32%,transparent 33%) 0 50%/100% 28% no-repeat,radial-gradient(circle,#000 0,#000 32%,transparent 33%) 50% 0/28% 100% no-repeat;mask:radial-gradient(circle,#000 0,#000 32%,transparent 33%) 0 50%/100% 28% no-repeat,radial-gradient(circle,#000 0,#000 32%,transparent 33%) 50% 0/28% 100% no-repeat}
.fx-spark[data-fx-spark-go="1"]{animation:fxk-spark-pop var(--fx-spark-life,720ms) var(--ease,cubic-bezier(.16,1,.3,1)) forwards}
@keyframes fxk-spark-pop{0%{opacity:0;transform:translate3d(0,0,0) scale(0) rotate(0deg)}18%{opacity:1}55%{opacity:1;transform:translate3d(var(--fx-spark-x,0),var(--fx-spark-y,0),0) scale(1) rotate(120deg)}100%{opacity:0;transform:translate3d(calc(var(--fx-spark-x,0) * 1.25),calc(var(--fx-spark-y,0) * 1.25 + 6px),0) scale(.2) rotate(200deg)}}
@media (prefers-reduced-motion:reduce){.fx-spark{display:none!important}.fx-spark[data-fx-spark-go="1"]{animation:none}}

/* ===== fx-marquee : Season banner infinite marquee ribbon ===== */
.fx-marquee{position:relative;overflow:hidden;width:100%;max-width:100%;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(10,31,68,.55),rgba(2,8,23,.25),rgba(10,31,68,.55));-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fx-marquee__viewport{display:flex;width:max-content;will-change:transform;animation:fxk-marquee-roll var(--fx-marquee-dur,28s) linear infinite}
.fx-marquee:hover .fx-marquee__viewport,.fx-marquee:focus-within .fx-marquee__viewport{animation-play-state:paused}
.fx-marquee__track{display:flex;align-items:center;flex:0 0 auto;white-space:nowrap;padding:14px 0}
.fx-marquee__item{display:inline-flex;align-items:center;gap:.85em;padding:0 1.4em;font-family:'Chakra Petch',sans-serif;text-transform:uppercase;letter-spacing:.22em;font-size:clamp(13px,1.9vw,18px);font-weight:600;color:var(--ice);text-shadow:0 0 14px rgba(85,255,255,.18)}
.fx-marquee__item[data-accent]{color:var(--aqua)}
.fx-marquee__dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px rgba(0,207,255,.65);transform:rotate(45deg)}
@keyframes fxk-marquee-roll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.fx-marquee__viewport{animation:none;transform:none;justify-content:center;flex-wrap:wrap}.fx-marquee{-webkit-mask-image:none;mask-image:none}.fx-marquee__track:nth-child(2){display:none}}

/* ===== fx-shine : Diagonal glare sweep on image hover ===== */
.fx-shine{position:relative;display:inline-block;overflow:hidden;border-radius:inherit;isolation:isolate}
.fx-shine>img,.fx-shine>picture,.fx-shine>video{display:block;max-width:100%;height:auto}
.fx-shine::after{content:"";position:absolute;top:-60%;left:-160%;width:90%;height:220%;pointer-events:none;z-index:2;transform:translate3d(0,0,0) rotate(20deg);background:linear-gradient(90deg,rgba(142,235,255,0) 0%,rgba(142,235,255,.10) 38%,rgba(85,255,255,.55) 50%,rgba(142,235,255,.10) 62%,rgba(142,235,255,0) 100%);opacity:0;will-change:transform,opacity}
.fx-shine:hover::after,.fx-shine:focus-within::after{animation:fxk-shine-sweep .85s var(--ease) forwards}
@keyframes fxk-shine-sweep{0%{opacity:0;transform:translate3d(0,0,0) rotate(20deg)}12%{opacity:1}100%{opacity:0;transform:translate3d(360%,0,0) rotate(20deg)}}
@media (prefers-reduced-motion:reduce){.fx-shine::after{display:none}.fx-shine:hover::after,.fx-shine:focus-within::after{animation:none}}

/* ===== fx-glass : On-theme glassmorphism panel utility ===== */
.fx-glass{position:relative;border-radius:16px;background:linear-gradient(160deg,rgba(10,31,68,.55),rgba(2,8,23,.62));-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);border:1px solid var(--line);box-shadow:0 18px 50px -22px rgba(2,8,23,.85),inset 0 1px 0 rgba(142,235,255,.18),inset 0 0 0 1px rgba(6,17,38,.35);overflow:hidden;isolation:isolate}
.fx-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 90% at 12% -10%,rgba(142,235,255,.16),transparent 55%);z-index:0}
.fx-glass::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(85,255,255,.55),transparent);opacity:.7;z-index:1}
.fx-glass>*{position:relative;z-index:2}
.fx-glass--tight{border-radius:12px}
.fx-glass--strong{-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);background:linear-gradient(160deg,rgba(10,31,68,.68),rgba(2,8,23,.74))}
.fx-glass--flat{box-shadow:inset 0 1px 0 rgba(142,235,255,.16)}
@supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){.fx-glass{background:linear-gradient(160deg,rgba(10,31,68,.92),rgba(2,8,23,.95))}}
@media (prefers-reduced-motion:reduce){.fx-glass{transition:none}}

/* ===== fx-ripple : Material click ripple from pointer point ===== */
.fx-ripple{position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}
.fx-ripple__ink{position:absolute;border-radius:50%;pointer-events:none;transform:translate3d(-50%,-50%,0) scale(0);background:radial-gradient(circle,rgba(85,255,255,.45) 0%,rgba(0,207,255,.28) 45%,rgba(142,235,255,0) 72%);will-change:transform,opacity;z-index:0}
.fx-ripple__ink.fx-is-run{animation:fxk-ripple-spread .62s var(--ease) forwards}
@keyframes fxk-ripple-spread{0%{transform:translate3d(-50%,-50%,0) scale(0);opacity:.85}60%{opacity:.5}100%{transform:translate3d(-50%,-50%,0) scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.fx-ripple__ink{display:none}}

/* ===== fx-cursorglow : Global soft cursor glow trail ===== */
.fx-cursorglow{position:fixed;top:0;left:0;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:60;opacity:0;transform:translate3d(-50%,-50%,0);background:radial-gradient(circle,rgba(85,255,255,.16) 0%,rgba(0,207,255,.10) 30%,rgba(10,31,68,0) 68%);mix-blend-mode:screen;filter:blur(6px);will-change:transform,opacity;transition:opacity .45s var(--ease)}
.fx-cursorglow.fx-is-live{opacity:1}
@media (hover:none),(pointer:coarse){.fx-cursorglow{display:none}}
@media (prefers-reduced-motion:reduce){.fx-cursorglow{display:none}}

/* =========================================================
   PERF HARDENING (appended last so it wins). The page bg is
   near-black, so screen-blend ~= normal here: dropping blend modes,
   trimming idle will-change, and shrinking blur radii avoids a
   compositor-layer overload with no meaningful visual change.
   ========================================================= */
.fx-ink-image__wash,.fx-ink-hover__ripple,.fx-ink-text__sheen,
.fx-beams .fx-beam,.fx-mesh .fx-mesh-blob,.fx-tilt::after,
.fx-shine::after,.fx-sparkle .fx-spark,.fx-ripple__ink{mix-blend-mode:normal}
.fx-mesh .fx-mesh-blob{filter:blur(30px);opacity:.4}
.fx-beams .fx-beam{filter:blur(4px)}
/* the always-on fixed, blurred, screen-blended glow is the heaviest layer: retire it */
.fx-cursorglow{display:none!important}
/* keep will-change only on actively-animating ambients; let idle elements drop their layers */
.fx-ink-image__media,.fx-reveal,.fx-sc-char,.fx-shimmer,.fx-odo-reel,
.fx-meteors .fx-meteor,.fx-dotgrid .fx-dg-layer,.fx-tilt,
.fx-tilt [data-fx-tilt-layer],.fx-mag,.fx-mag>[data-fx-mag-text],
.fx-shine::after,.fx-ink-hover__ripple,.fx-sticky-step{will-change:auto}