/* =====================================================================
   XEOMICS FX LAYER — interactive light & motion (Syntium sub-site)
   Pointer effects are enabled only for fine pointers; everything is off
   under prefers-reduced-motion.
   ===================================================================== */
@property --fx-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{--fx-c1:45,212,191;--fx-c2:59,130,246;--fx-c3:34,211,238}
.t-part{--fx-c1:245,181,68;--fx-c2:251,146,60;--fx-c3:247,200,115}

/* ---------- grain + cursor aura ---------- */
#fx-grain{position:fixed;inset:-50%;z-index:260;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:fx-grain 1.2s steps(6) infinite}
@keyframes fx-grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
#fx-aura{position:fixed;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;z-index:255;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--fx-c1),.10),rgba(var(--fx-c2),.05) 45%,transparent 70%);mix-blend-mode:screen;opacity:0;transition:opacity .5s;will-change:transform}
html.fx-on #fx-aura{opacity:1}

/* ---------- spotlight cards: glowing border that follows the cursor ---------- */
.fx-card{--mx:-400px;--my:-400px;--fx-o:0}
.fx-card>.fx-b,.fx-card>.fx-s{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:var(--fx-o);transition:opacity .35s ease}
.fx-card>.fx-b{z-index:3;padding:1.2px;
  background:radial-gradient(300px circle at var(--mx) var(--my),rgba(var(--fx-c1),1),rgba(var(--fx-c2),.55) 35%,transparent 65%);
  -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)}
.fx-card>.fx-s{z-index:0;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(var(--fx-c1),.10),transparent 60%)}
.fx-card>*:not(.fx-b):not(.fx-s):not(.fx-r){position:relative;z-index:1}
.fx-card.fx-lit{--fx-o:1;box-shadow:0 0 0 1px rgba(var(--fx-c1),.10),0 24px 60px -30px rgba(var(--fx-c1),.45),0 30px 60px -40px rgba(0,0,0,.9)!important}
/* keep absolutely-positioned internals where they were */
.fx-card>.glyph,.fx-card>.play{position:relative}
.door.fx-card>.glyph{position:absolute}

/* 3D tilt */
.fx-tilt{transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.fx-tilt.fx-lit{transition:transform .08s linear,box-shadow .35s,border-color .35s}

/* ---------- rotating conic ring (featured panels) ---------- */
.fx-ring{position:relative;isolation:isolate}
.fx-ring>.fx-r{position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--fx-ang),transparent 0 62%,rgba(var(--fx-c1),.95) 74%,rgba(var(--fx-c3),.9) 80%,rgba(var(--fx-c2),.8) 86%,transparent 94%);
  -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:fx-spin 6s linear infinite;filter:drop-shadow(0 0 6px rgba(var(--fx-c1),.6))}
@keyframes fx-spin{to{--fx-ang:360deg}}

/* ---------- buttons: magnetic, shine sweep, glow ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn-primary,.btn-accent{box-shadow:0 0 0 0 rgba(var(--fx-c1),0),0 10px 30px -12px rgba(var(--fx-c1),.7)}
.btn-primary::after,.btn-accent::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%);transform:translateX(-120%);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.btn-primary:hover::after,.btn-accent:hover::after{transform:translateX(120%)}
.btn-primary:hover,.btn-accent:hover{box-shadow:0 0 0 6px rgba(var(--fx-c1),.12),0 0 40px -4px rgba(var(--fx-c1),.65),0 16px 36px -12px rgba(var(--fx-c1),.8)!important}
.btn-outline:hover{box-shadow:0 0 0 4px rgba(var(--fx-c1),.08),0 0 28px -8px rgba(var(--fx-c1),.55)}
.fx-mag{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .3s,background .25s,color .25s,border-color .25s!important}
.fx-mag.fx-magging{transition:transform .08s linear,box-shadow .3s,background .25s,color .25s,border-color .25s!important}
/* breathing halo on the hero primary CTA */
.fx-pulse{animation:fx-pulse 2.8s ease-in-out infinite}
@keyframes fx-pulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--fx-c1),.45),0 10px 30px -12px rgba(var(--fx-c1),.7)}50%{box-shadow:0 0 0 10px rgba(var(--fx-c1),0),0 10px 34px -10px rgba(var(--fx-c1),.9)}}

/* ---------- gradient text shimmer ---------- */
.grad,.hero h1 .grad{background-size:220% 100%!important;animation:fx-shimmer 6s ease-in-out infinite}
@keyframes fx-shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.grad{background-image:linear-gradient(110deg,var(--teal),var(--cyan) 30%,#8BE9FF 45%,var(--blue) 60%,var(--teal) 85%)!important}

/* ---------- word-by-word headline reveal ---------- */
.fx-w{display:inline-block;opacity:0;transform:translateY(.45em) rotateX(-40deg);filter:blur(8px);transform-origin:50% 100%;
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .7s ease;transition-delay:calc(var(--i)*55ms)}
.fx-words.fx-go .fx-w{opacity:1;transform:none;filter:none}
.fx-w.grad{padding-bottom:.06em}

/* ---------- hero: aurora + particle net ---------- */
.fx-aurora{position:absolute;inset:-10%;z-index:1;pointer-events:none;overflow:hidden;mix-blend-mode:screen;opacity:.9}
.fx-aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
.fx-aurora i:nth-child(1){width:46vw;height:46vw;left:48%;top:-8%;background:radial-gradient(circle,rgba(45,212,191,.55),transparent 65%);animation:fx-a1 18s ease-in-out infinite}
.fx-aurora i:nth-child(2){width:38vw;height:38vw;left:62%;top:38%;background:radial-gradient(circle,rgba(59,130,246,.5),transparent 65%);animation:fx-a2 22s ease-in-out infinite}
.fx-aurora i:nth-child(3){width:30vw;height:30vw;left:-6%;top:55%;background:radial-gradient(circle,rgba(34,211,238,.35),transparent 65%);animation:fx-a3 26s ease-in-out infinite}
@keyframes fx-a1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-12vw,8vh) scale(1.15)}}
@keyframes fx-a2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-8vw,-10vh) scale(.9)}}
@keyframes fx-a3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(10vw,-6vh) scale(1.2)}}
.fx-net{position:absolute;inset:0;z-index:3;pointer-events:none;width:100%;height:100%}
.hero>.wrap,.hero .hero-grid{position:relative;z-index:4}
.hero .stats{position:relative;z-index:4}

/* ---------- stat numbers glow ---------- */
.stat .n{text-shadow:0 0 28px rgba(var(--fx-c1),.28)}

/* ---------- nav: sliding active indicator ---------- */
.fx-ink{position:absolute;top:50%;height:36px;margin-top:-18px;border-radius:999px;pointer-events:none;z-index:-1;
  background:linear-gradient(120deg,rgba(var(--fx-c1),.16),rgba(var(--fx-c2),.12));box-shadow:inset 0 0 0 1px rgba(var(--fx-c1),.28),0 0 22px -6px rgba(var(--fx-c1),.6);
  opacity:0;transition:left .45s cubic-bezier(.2,.7,.2,1),width .45s cubic-bezier(.2,.7,.2,1),opacity .3s}
.nav-links{position:relative;isolation:isolate}
.nav-links a.fx-cur{color:var(--text)!important}

/* ---------- animated section hairline ---------- */
.fx-line{position:relative}
.fx-line::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;pointer-events:none;z-index:4;
  background:linear-gradient(90deg,transparent,rgba(var(--fx-c1),.0) 20%,rgba(var(--fx-c1),.7) 50%,rgba(var(--fx-c2),.0) 80%,transparent);
  background-size:200% 100%;animation:fx-line 7s linear infinite;opacity:.8}
@keyframes fx-line{from{background-position:100% 0}to{background-position:-100% 0}}

/* ---------- icons: glow on card hover ---------- */
.fx-card.fx-lit .ic,.fx-card.fx-lit .fi,.fx-card.fx-lit .idx,.fx-card.fx-lit .circ{box-shadow:0 0 22px -2px rgba(var(--fx-c1),.55);transition:box-shadow .3s}

@media (hover:none),(pointer:coarse){#fx-aura{display:none}.fx-card>.fx-b,.fx-card>.fx-s{display:none}}
@media (prefers-reduced-motion:reduce){
  #fx-grain,.fx-aurora i,.fx-ring>.fx-r,.grad,.fx-pulse,.fx-line::before{animation:none!important}
  .fx-w{opacity:1;transform:none;filter:none;transition:none}
  #fx-aura{display:none}
}