/* ============================================================
   NexusFinLabs — EFFECTS KIT  (effects.css)
   A curated, reusable background + interaction layer.
   Palette: teal #008D96 / amber #F2A93B. All subtle & translucent.
   Reference effects BY CLASS NAME (not by catalog number).
   ------------------------------------------------------------
   Pairs with effects.js. See EFFECTS-GUIDE.md for wiring.
   ============================================================ */

:root{
  --fx-teal:#008D96;
  --fx-teal-line:#bfe2e0;
  --fx-amber:#F2A93B;
  --fx-page:#EEF7F5;   /* used by the vignette fade — match your bg */
}

/* ---- z-index layering (back → front) ----
   -3 aurora · -2 sheen · -1 mesh + mesh-hot + vignette · content 0+ */

/* [fx-aurora] slow translucent colour blooms */
.fx-aurora{position:fixed;inset:0;z-index:-3;pointer-events:none;overflow:hidden}
.fx-aurora i{position:absolute;border-radius:50%;filter:blur(72px);opacity:.5;will-change:transform;display:block}
.fx-aurora .a1{width:46vw;height:46vw;left:-12vw;top:-14vw;background:radial-gradient(circle,rgba(0,141,150,.16),transparent 70%);animation:fxDrift1 28s ease-in-out infinite}
.fx-aurora .a2{width:40vw;height:40vw;right:-10vw;top:4vw;background:radial-gradient(circle,rgba(0,141,150,.10),transparent 70%);animation:fxDrift2 34s ease-in-out infinite}
.fx-aurora .a3{width:34vw;height:34vw;left:34vw;bottom:-16vw;background:radial-gradient(circle,rgba(242,169,59,.06),transparent 70%);animation:fxDrift3 40s ease-in-out infinite}
@keyframes fxDrift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(7vw,5vw) scale(1.12)}}
@keyframes fxDrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vw,7vw) scale(1.08)}}
@keyframes fxDrift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4vw,-6vw) scale(1.15)}}

/* [fx-sheen] barely-there conic gradient, very slow spin */
.fx-sheen{position:fixed;left:50%;top:-30vh;width:130vw;height:130vw;transform:translateX(-50%);z-index:-2;pointer-events:none;opacity:.32;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(0,141,150,.05) 60deg,transparent 130deg,rgba(0,141,150,.04) 220deg,transparent 300deg);
  animation:fxSpin 90s linear infinite;will-change:transform}
@keyframes fxSpin{to{transform:translateX(-50%) rotate(360deg)}}

/* [fx-mesh] faint dot grid + [fx-mesh-hot] reactive dots that solidify near the cursor */
.fx-mesh,.fx-mesh-hot{position:fixed;inset:0;z-index:-1;pointer-events:none;background-size:28px 28px}
.fx-mesh{background-image:radial-gradient(circle,rgba(0,141,150,.09) 1px,transparent 1.5px);
  -webkit-mask-image:radial-gradient(ellipse 85% 60% at 50% 0%,#000 30%,transparent 88%);
  mask-image:radial-gradient(ellipse 85% 60% at 50% 0%,#000 30%,transparent 88%)}
.fx-mesh-hot{background-image:radial-gradient(circle,rgba(0,141,150,.85) 1.5px,transparent 2px);
  -webkit-mask-image:radial-gradient(circle 150px at var(--mx,-400px) var(--my,-400px),#000,transparent 70%);
  mask-image:radial-gradient(circle 150px at var(--mx,-400px) var(--my,-400px),#000,transparent 70%)}

/* [fx-vignette] calms the edges, keeps focus centred (set --fx-page to your bg) */
.fx-vignette{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 92% 78% at 50% 28%,transparent 56%,rgba(238,247,245,.55))}

/* [fx-progress] thin teal bar that fills as you scroll */
.fx-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--fx-teal);z-index:200;transition:width .1s linear}

/* [reveal-init] elements fade-up once when entering the viewport (add class via JS) */
.reveal-init{opacity:0;transform:translateY(26px)}
.reveal-init.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}

/* [fx-arc] SVG line/arc that draws itself on load (put inside a hero) */
.fx-arc .arc{fill:none;stroke:var(--fx-teal-line);stroke-width:1.5;stroke-dasharray:1600;stroke-dashoffset:1600;animation:fxDraw 2.2s cubic-bezier(.4,0,.2,1) .25s forwards}
.fx-arc .axis{stroke:var(--fx-teal-line);stroke-width:1;opacity:.45}
.fx-arc .node{fill:var(--fx-teal)}
.fx-arc .node.amber{fill:var(--fx-amber)}
.fx-arc .node.pulse{transform-box:fill-box;transform-origin:center;animation:fxNode 2.8s ease-in-out 1.6s infinite}
@keyframes fxDraw{to{stroke-dashoffset:0}}
@keyframes fxNode{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)}}

/* [fx-float] gentle up/down loop — add to an icon/badge/card */
.fx-float{animation:fxFloat 4s ease-in-out infinite}
@keyframes fxFloat{0%,100%{transform:translateY(-7px)}50%{transform:translateY(7px)}}

/* [fx-underline] animated underline that grows from the left on hover — add to a link */
.fx-underline{position:relative;text-decoration:none}
.fx-underline::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--fx-teal);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.fx-underline:hover::after{transform:scaleX(1)}

/* [fx-lift] card elevation on hover — add to a card; nest .fx-lift-ico for the icon swap */
.fx-lift{transition:border-color .22s,box-shadow .22s,transform .22s}
.fx-lift:hover{border-color:var(--fx-teal-line);box-shadow:0 26px 50px -34px rgba(0,90,95,.45);transform:translateY(-4px)}
.fx-lift-ico{transition:background .22s,color .22s,transform .22s}
.fx-lift:hover .fx-lift-ico{background:var(--fx-teal);color:#fff;transform:translateY(-2px)}

/* [nav.scrolled] add the .scrolled class via JS to lift your sticky nav */
.fx-nav{transition:box-shadow .25s}
.fx-nav.scrolled{box-shadow:0 12px 34px -22px rgba(0,80,80,.4)}

/* accessibility + touch: kill motion / cursor effects where appropriate */
@media(prefers-reduced-motion:reduce){
  .fx-aurora i,.fx-sheen,.fx-float,.fx-arc .arc,.fx-arc .node.pulse{animation:none}
  .fx-arc .arc{stroke-dashoffset:0}
  .fx-mesh-hot{display:none}
  .reveal-init,.reveal-init.in{opacity:1;transform:none;transition:none}
}
@media(max-width:760px){ .fx-mesh-hot{display:none} }