/* ============================================================
   fx.css — Swifty premium global FX layer
   Loaded by every public page. Purely additive: it only styles
   elements that fx.js injects (.fx-*) plus a few safe globals
   (scrollbar, ::selection) and opt-in utility classes.
   Nothing here overrides existing page class names.
   ============================================================ */

:root {
  --fx-teal:   #00e5c0;
  --fx-teal-2: #00ffd5;
  --fx-gold:   #ffce4a;
  --fx-gold-2: #ffb020;
  --fx-violet: #8b7bff;
  --fx-ink:    #05060f;
  --fx-ease:   cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Premium scrollbar ---------------------------------------------------- */
html { scroll-behavior: smooth; }

* { scrollbar-width: thin; scrollbar-color: rgba(0,229,192,0.5) transparent; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: rgba(5,6,15,0.6); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(0,229,192,0.55), rgba(0,180,255,0.45));
  border-radius: 20px;
  border: 2px solid rgba(5,6,15,0.6);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--fx-teal-2), rgba(0,200,255,0.7));
}

::selection { background: rgba(0,229,192,0.3); color: #fff; }

/* ---- 3D WebGL canvas (sits behind everything) ----------------------------- */
.fx-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;                 /* behind page bg-pattern (z:0) and content */
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.fx-canvas.fx-ready { opacity: 1; }

/* ---- Aurora wash (adds depth above the canvas, below content) ------------- */
.fx-aurora {
  position: fixed;
  inset: -20% -10% -10% -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 50% at 18% 12%, rgba(0,229,192,0.16), transparent 60%),
    radial-gradient(38% 48% at 85% 8%,  rgba(255,206,74,0.12), transparent 60%),
    radial-gradient(45% 55% at 80% 88%, rgba(139,123,255,0.14), transparent 62%),
    radial-gradient(40% 50% at 12% 92%, rgba(0,180,255,0.10), transparent 60%);
  filter: blur(8px) saturate(115%);
  animation: fxAuroraDrift 22s ease-in-out infinite alternate;
}
@keyframes fxAuroraDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-2%, 1.5%, 0) scale(1.05); }
  100% { transform: translate3d(2%, -1.5%, 0) scale(1.02); }
}

/* ---- Film grain + vignette overlay (top, never blocks input) -------------- */
.fx-grain {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  opacity: 0.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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: fxGrain 0.6s steps(2) infinite;
}
@keyframes fxGrain {
  0%   { transform: translate(0,0); }
  50%  { transform: translate(-4%, 3%); }
  100% { transform: translate(3%, -2%); }
}
.fx-vignette {
  position: fixed;
  inset: 0;
  z-index: 9989;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(2,3,10,0.55) 100%);
}

/* ---- Custom glow cursor (desktop, fine pointers only) --------------------- */
.fx-cursor, .fx-cursor-dot {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.fx-cursor {
  width: 38px; height: 38px;
  border: 1.5px solid rgba(0,229,192,0.55);
  background: radial-gradient(circle, rgba(0,229,192,0.12), transparent 70%);
  transition: width .25s var(--fx-ease), height .25s var(--fx-ease),
              border-color .25s ease, background .25s ease;
}
.fx-cursor-dot {
  width: 6px; height: 6px;
  background: var(--fx-teal-2);
  box-shadow: 0 0 12px rgba(0,229,192,0.9);
}
.fx-cursor.fx-hot {
  width: 64px; height: 64px;
  border-color: rgba(255,206,74,0.7);
  background: radial-gradient(circle, rgba(255,206,74,0.14), transparent 70%);
}
.fx-cursor.fx-press {
  width: 26px; height: 26px;
  border-color: rgba(0,255,213,0.9);
  background: radial-gradient(circle, rgba(0,229,192,0.25), transparent 70%);
}
@media (hover: hover) and (pointer: fine) {
  body.fx-cursor-on { cursor: none; }
  body.fx-cursor-on a,
  body.fx-cursor-on button,
  body.fx-cursor-on input,
  body.fx-cursor-on [onclick],
  body.fx-cursor-on .clickable { cursor: none; }
}

/* ---- Scroll reveal -------------------------------------------------------- */
/* Gated on html.fx-anim (set by fx.js) so a failed/blocked script never
   leaves content permanently hidden. */
.fx-anim [data-reveal] {
  opacity: 0;
  transform: translateY(34px) scale(.985);
  transition: opacity .9s var(--fx-ease), transform .9s var(--fx-ease);
  transition-delay: var(--d, 0s);
  will-change: transform, opacity;
}
.fx-anim [data-reveal="left"]  { transform: translateX(-44px); }
.fx-anim [data-reveal="right"] { transform: translateX(44px); }
.fx-anim [data-reveal="zoom"]  { transform: scale(.9); }
.fx-anim [data-reveal].fx-in { opacity: 1; transform: none; }

/* ---- 3D tilt + glare (opt-in via .fx-tilt) -------------------------------- */
.fx-tilt {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .35s var(--fx-ease), box-shadow .35s var(--fx-ease);
  will-change: transform;
}
.fx-tilt .fx-glare {
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
              rgba(255,255,255,0.16), transparent 60%);
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 2;
}
.fx-tilt:hover .fx-glare { opacity: 1; }

/* ---- Magnetic / shine buttons (opt-in via .fx-magnetic / .fx-shine) ------- */
.fx-magnetic { transition: transform .25s var(--fx-ease); }
.fx-shine { position: relative; overflow: hidden; }
.fx-shine::after {
  content: "";
  position: absolute; top: 0; left: -120%;
  width: 70%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-18deg);
  transition: none;
  pointer-events: none;
}
.fx-shine:hover::after { animation: fxSweep .85s var(--fx-ease); }
@keyframes fxSweep { from { left: -120%; } to { left: 130%; } }

/* ---- Animated gradient border (opt-in via .fx-border) --------------------- */
.fx-border { position: relative; }
.fx-border::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--a,0deg),
              var(--fx-teal), var(--fx-gold), var(--fx-violet), var(--fx-teal));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .6;
  animation: fxSpin 6s linear infinite;
  pointer-events: none;
}
@property --a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes fxSpin { to { --a: 360deg; } }

/* ---- Page load fade ------------------------------------------------------- */
.fx-boot { opacity: 0; }
.fx-boot.fx-lit { opacity: 1; transition: opacity .6s ease; }

/* ---- Reduced motion / touch ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fx-aurora, .fx-grain { animation: none; }
  [data-reveal] { transition-duration: .01s; }
  .fx-shine:hover::after { animation: none; }
}