/* ═══════════════════════════════════════════════════════════════
   Arsyk Media — Premium FX Layer (fx.css)
   Shared site-wide. Pairs with fx.js. Everything namespaced .fx-*
   Load AFTER theme.css. Respects [data-theme="light"] and
   prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */

/* ── Scroll progress bar ───────────────────────────────────────── */
.fx-progress{
  position:fixed;top:0;left:0;height:2px;width:100%;
  z-index:9990;pointer-events:none;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,#5ab4ff 0%,#6366f1 55%,#a855f7 100%);
  box-shadow:0 0 12px rgba(99,102,241,.55);
  transition:opacity .4s ease;
}

/* ── Back-to-top (circular progress ring) ──────────────────────── */
.fx-top{
  position:fixed;right:22px;bottom:90px;width:46px;height:46px;
  border-radius:50%;z-index:980;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(12,12,14,.72);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.85);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .35s ease,transform .35s ease,visibility .35s,border-color .25s;
}
.fx-top.fx-show{opacity:1;visibility:visible;transform:translateY(0)}
.fx-top:hover{border-color:rgba(99,102,241,.6)}
.fx-top svg.fx-top-ring{position:absolute;inset:-1px;width:48px;height:48px;transform:rotate(-90deg)}
.fx-top svg.fx-top-ring circle{fill:none;stroke:rgba(99,102,241,.9);stroke-width:2;stroke-linecap:round}
.fx-top svg.fx-top-arrow{width:16px;height:16px}
[data-theme="light"] .fx-top{background:rgba(255,255,255,.78)!important;border-color:rgba(0,0,0,.12)!important;color:#0a0a0a!important}
@media (max-width:768px){.fx-top{display:none}}

/* ── Split-text headline reveal ────────────────────────────────── */
[data-split] .fx-w{
  display:inline-block;
  opacity:0;transform:translateY(.55em) rotate(2deg);
  filter:blur(4px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),
             transform .7s cubic-bezier(.22,1,.36,1),
             filter .7s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--fx-i,0)*55ms);
  will-change:transform,opacity;
}
[data-split].fx-split-in .fx-w{opacity:1;transform:translateY(0) rotate(0);filter:blur(0)}

/* ── 3D tilt cards ─────────────────────────────────────────────── */
[data-tilt]{transform-style:preserve-3d;will-change:transform}
[data-tilt] .fx-glare{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle 240px at var(--fx-gx,50%) var(--fx-gy,50%),rgba(255,255,255,.14) 0%,rgba(255,255,255,.05) 35%,transparent 65%);
  opacity:0;transition:opacity .35s ease;z-index:3;
}
[data-tilt]:hover .fx-glare{opacity:1}
[data-tilt] [data-tilt-child]{transform:translateZ(28px)}
[data-theme="light"] [data-tilt] .fx-glare{background:radial-gradient(circle 240px at var(--fx-gx,50%) var(--fx-gy,50%),rgba(99,102,241,.10) 0%,rgba(99,102,241,.04) 35%,transparent 65%)}

/* ── Magnetic buttons ──────────────────────────────────────────── */
[data-magnetic]{transition:transform .35s cubic-bezier(.22,1,.36,1);will-change:transform}
[data-magnetic].fx-mag-active{transition:transform .08s linear}

/* ── Aurora backdrop (decorative, pure CSS) ────────────────────── */
.fx-aurora{position:relative;overflow:hidden}
.fx-aurora::before,.fx-aurora::after{
  content:"";position:absolute;border-radius:50%;
  filter:blur(90px);pointer-events:none;z-index:0;
  opacity:.5;mix-blend-mode:screen;
}
.fx-aurora::before{
  width:520px;height:520px;top:-180px;right:-120px;
  background:radial-gradient(circle,rgba(99,102,241,.45) 0%,rgba(90,180,255,.18) 45%,transparent 70%);
  animation:fx-aurora-a 16s ease-in-out infinite alternate;
}
.fx-aurora::after{
  width:420px;height:420px;bottom:-160px;left:-100px;
  background:radial-gradient(circle,rgba(168,85,247,.32) 0%,rgba(99,102,241,.14) 45%,transparent 70%);
  animation:fx-aurora-b 20s ease-in-out infinite alternate;
}
@keyframes fx-aurora-a{from{transform:translate(0,0) scale(1)}to{transform:translate(-70px,50px) scale(1.15)}}
@keyframes fx-aurora-b{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,-40px) scale(1.12)}}
[data-theme="light"] .fx-aurora::before,
[data-theme="light"] .fx-aurora::after{opacity:.28;mix-blend-mode:multiply}
.fx-aurora>*{position:relative;z-index:1}

/* ── Particle constellation canvas ─────────────────────────────── */
.fx-particles-host{position:relative}
canvas.fx-particles{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;
}

/* ── Animated counter (no layout shift: numbers reserve width) ── */
[data-count]{font-variant-numeric:tabular-nums}

/* ── Gradient text utility ─────────────────────────────────────── */
.fx-grad-text{
  background:linear-gradient(92deg,#fff 0%,#9bb8ff 55%,#c4b5fd 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
[data-theme="light"] .fx-grad-text{
  background:linear-gradient(92deg,#0a0a0a 0%,#4338ca 60%,#7c3aed 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ── Shimmer border utility (premium card edge) ────────────────── */
.fx-border-glow{position:relative}
.fx-border-glow::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(130deg,rgba(90,180,255,.55),rgba(99,102,241,.15) 30%,rgba(255,255,255,.06) 50%,rgba(168,85,247,.15) 70%,rgba(168,85,247,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;opacity:.7;transition:opacity .3s;
}
.fx-border-glow:hover::before{opacity:1}

/* ── Exit-intent modal ─────────────────────────────────────────── */
.fx-exit{
  position:fixed;inset:0;z-index:99960;display:flex;
  align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s;
}
.fx-exit.fx-open{opacity:1;visibility:visible}
.fx-exit-backdrop{position:absolute;inset:0;background:rgba(4,4,6,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.fx-exit-card{
  position:relative;max-width:480px;width:100%;
  background:radial-gradient(120% 140% at 80% 0%,#16161c 0%,#0c0c0f 55%);
  border:1px solid rgba(255,255,255,.1);border-radius:20px;
  padding:42px 38px 34px;text-align:left;
  transform:translateY(22px) scale(.97);
  transition:transform .45s cubic-bezier(.22,1,.36,1);
  box-shadow:0 40px 120px rgba(0,0,0,.55);
  overflow:hidden;
}
.fx-exit.fx-open .fx-exit-card{transform:translateY(0) scale(1)}
.fx-exit-card::before{
  content:"";position:absolute;top:-120px;right:-80px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(99,102,241,.35) 0%,transparent 70%);
  filter:blur(40px);pointer-events:none;
}
.fx-exit-eyebrow{
  font-family:'Syne',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.4em;text-transform:uppercase;color:rgba(255,255,255,.4);
  display:flex;align-items:center;gap:10px;margin-bottom:16px;
}
.fx-exit-eyebrow::before{content:"";width:24px;height:1px;background:rgba(99,102,241,.8)}
.fx-exit-title{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:clamp(24px,4vw,32px);line-height:1.12;color:#fff;margin:0 0 12px;
}
.fx-exit-sub{font-family:'Inter',sans-serif;font-weight:300;font-size:14px;line-height:1.65;color:rgba(255,255,255,.6);margin:0 0 26px}
.fx-exit-sub strong{color:rgba(255,255,255,.9);font-weight:500}
.fx-exit-actions{display:flex;gap:12px;flex-wrap:wrap}
.fx-exit-cta{
  font-family:'Syne',sans-serif;font-weight:700;font-size:13px;letter-spacing:.04em;
  padding:14px 22px;border-radius:999px;text-decoration:none;cursor:pointer;border:none;
  display:inline-flex;align-items:center;gap:8px;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s;
}
.fx-exit-cta.fx-primary{background:#fff;color:#0a0a0a}
.fx-exit-cta.fx-primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(255,255,255,.18)}
.fx-exit-cta.fx-ghost{background:transparent;color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.18)}
.fx-exit-cta.fx-ghost:hover{border-color:rgba(99,102,241,.65);color:#fff}
.fx-exit-close{
  position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.7);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .2s;
}
.fx-exit-close:hover{background:rgba(255,255,255,.12);transform:rotate(90deg)}
.fx-exit-note{margin-top:18px;font-family:'Caveat',cursive;font-size:16px;color:rgba(255,255,255,.35)}
[data-theme="light"] .fx-exit-card{background:#fff!important;border-color:rgba(0,0,0,.1)!important;box-shadow:0 40px 120px rgba(0,0,0,.18)!important}
[data-theme="light"] .fx-exit-title{color:#0a0a0a!important}
[data-theme="light"] .fx-exit-sub{color:rgba(0,0,0,.55)!important}
[data-theme="light"] .fx-exit-sub strong{color:#0a0a0a!important}
[data-theme="light"] .fx-exit-eyebrow{color:rgba(0,0,0,.4)!important}
[data-theme="light"] .fx-exit-cta.fx-primary{background:#0a0a0a!important;color:#fff!important}
[data-theme="light"] .fx-exit-cta.fx-ghost{color:rgba(0,0,0,.65)!important;border-color:rgba(0,0,0,.18)!important}
[data-theme="light"] .fx-exit-close{background:rgba(0,0,0,.05)!important;border-color:rgba(0,0,0,.1)!important;color:rgba(0,0,0,.6)!important}
[data-theme="light"] .fx-exit-note{color:rgba(0,0,0,.35)!important}

/* ── Social-proof toast ────────────────────────────────────────── */
.fx-toast{
  position:fixed;left:22px;bottom:96px;z-index:940;max-width:330px;
  display:flex;gap:14px;align-items:flex-start;
  background:rgba(13,13,16,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.1);border-radius:14px;
  padding:14px 38px 14px 14px;cursor:pointer;text-decoration:none;
  transform:translateX(-120%);transition:transform .55s cubic-bezier(.22,1,.36,1);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.fx-toast.fx-show{transform:translateX(0)}
.fx-toast-dot{
  flex:none;width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(99,102,241,.25),rgba(90,180,255,.15));
  border:1px solid rgba(99,102,241,.3);
}
.fx-toast-dot svg{width:18px;height:18px;stroke:#8ab8ff}
.fx-toast-name{font-family:'Syne',sans-serif;font-weight:700;font-size:12px;color:#fff;margin:0 0 3px;letter-spacing:.02em}
.fx-toast-text{font-family:'Inter',sans-serif;font-weight:300;font-size:12px;line-height:1.5;color:rgba(255,255,255,.6);margin:0}
.fx-toast-text strong{color:#7ee2a8;font-weight:500}
.fx-toast-close{
  position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;
  border:none;background:transparent;color:rgba(255,255,255,.4);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;
}
.fx-toast-close:hover{color:#fff}
[data-theme="light"] .fx-toast{background:rgba(255,255,255,.92)!important;border-color:rgba(0,0,0,.1)!important;box-shadow:0 18px 50px rgba(0,0,0,.15)!important}
[data-theme="light"] .fx-toast-name{color:#0a0a0a!important}
[data-theme="light"] .fx-toast-text{color:rgba(0,0,0,.55)!important}
[data-theme="light"] .fx-toast-text strong{color:#0c7a3e!important}
[data-theme="light"] .fx-toast-close{color:rgba(0,0,0,.4)!important}
@media (max-width:768px){.fx-toast{display:none}}

/* ── Sticky mobile CTA bar ─────────────────────────────────────── */
.fx-sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:950;
  display:none;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(8,8,10,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(255,255,255,.1);
  transform:translateY(110%);transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.fx-sticky-cta.fx-show{transform:translateY(0)}
.fx-sticky-cta a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Syne',sans-serif;font-weight:700;font-size:13px;letter-spacing:.03em;
  padding:13px 10px;border-radius:999px;text-decoration:none;
}
.fx-sticky-cta .fx-cta-wa{background:#1ebe5d;color:#fff}
.fx-sticky-cta .fx-cta-quote{background:#fff;color:#0a0a0a}
.fx-sticky-cta svg{width:16px;height:16px;flex:none}
[data-theme="light"] .fx-sticky-cta{background:rgba(255,255,255,.94)!important;border-top-color:rgba(0,0,0,.1)!important}
[data-theme="light"] .fx-sticky-cta .fx-cta-quote{background:#0a0a0a!important;color:#fff!important}
@media (max-width:768px){.fx-sticky-cta{display:flex}}

/* ── Marquee fade edges utility ────────────────────────────────── */
.fx-fade-edges{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}

/* ── Reduced motion: kill everything ───────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .fx-aurora::before,.fx-aurora::after{animation:none}
  [data-split] .fx-w{opacity:1;transform:none;filter:none;transition:none}
  [data-magnetic],[data-tilt]{transition:none!important;transform:none!important}
  .fx-toast,.fx-exit-card,.fx-sticky-cta{transition:none}
  .fx-progress{transition:none}
}