/* =========================================================
   Futuristic 3D FX layer
   - Custom glowing cursor
   - Holographic grid floor
   - Floating 3D wireframe shapes
   - Particle network canvas
   - Neon traced borders
   - Holographic shimmer / scanlines
   - Scroll parallax depth
   ========================================================= */

/* ---------- Custom cursor ---------- */
.fx-cursor {
  position: fixed; top: 0; left: 0; z-index: 9999;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--cyan-400);
  pointer-events: none; transform: translate(-50%, -50%);
  transition: width 0.25s var(--ease), height 0.25s var(--ease), background 0.25s, border-color 0.25s;
  mix-blend-mode: screen;
  display: none;
}
.fx-cursor__dot {
  position: fixed; top: 0; left: 0; z-index: 9999;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan-400); pointer-events: none;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px var(--cyan-400);
  display: none;
}
.fx-cursor.is-hover {
  width: 56px; height: 56px;
  background: rgba(34, 211, 238, 0.12);
  border-color: var(--emerald-400);
}
.fx-cursor.is-down { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .fx-cursor, .fx-cursor__dot { display: block; }
  body { cursor: none; }
  a, button, .chip, .gallery__item, input, textarea, select, label { cursor: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-cursor, .fx-cursor__dot { display: none !important; }
  body { cursor: auto !important; }
}

/* ---------- Particle network canvas ---------- */
.fx-particles {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.55;
}

/* ---------- Holographic grid floor (hero) ---------- */
.fx-grid-floor {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 45%; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0%, rgba(8,21,46,0.04) 100%),
    linear-gradient(90deg, transparent 0%, transparent 49.5%, rgba(34,211,238,0.18) 49.5%, rgba(34,211,238,0.18) 50.5%, transparent 50.5%),
    linear-gradient(0deg, transparent 0%, transparent 49.5%, rgba(15,181,127,0.16) 49.5%, rgba(15,181,127,0.16) 50.5%, transparent 50.5%);
  background-size: 100% 100%, 60px 60px, 60px 60px;
  transform: perspective(420px) rotateX(62deg);
  transform-origin: bottom;
  mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 100%);
  animation: gridScroll 14s linear infinite;
}
@keyframes gridScroll {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 0 0, 0 60px, 60px 0; }
}
.fx-grid-floor--navy {
  background:
    linear-gradient(180deg, transparent 0%, rgba(34,211,238,0.05) 100%),
    linear-gradient(90deg, transparent 49.5%, rgba(34,211,238,0.22) 49.5%, rgba(34,211,238,0.22) 50.5%, transparent 50.5%),
    linear-gradient(0deg, transparent 49.5%, rgba(15,181,127,0.18) 49.5%, rgba(15,181,127,0.18) 50.5%, transparent 50.5%);
  background-size: 100% 100%, 60px 60px, 60px 60px;
}

/* ---------- Floating 3D wireframe shapes ---------- */
.fx-shapes { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fx-shape {
  position: absolute; opacity: 0.5;
  animation: floatShape 16s ease-in-out infinite;
}
.fx-shape svg { width: 100%; height: 100%; }
.fx-shape--ring { width: 120px; height: 120px; top: 18%; left: 8%; animation-delay: -2s; }
.fx-shape--cube { width: 90px; height: 90px; top: 65%; left: 14%; animation-delay: -7s; }
.fx-shape--tri { width: 80px; height: 80px; top: 22%; right: 12%; animation-delay: -4s; }
.fx-shape--hex { width: 110px; height: 110px; top: 70%; right: 8%; animation-delay: -10s; }
@keyframes floatShape {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-30px) rotate(180deg); }
}
.fx-shape svg { animation: spinShape 24s linear infinite; }
@keyframes spinShape { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .fx-shape, .fx-shape svg, .fx-grid-floor { animation: none; }
}

/* ---------- Neon traced border (for feature cards / CTA) ---------- */
.fx-neon {
  position: relative;
}
.fx-neon::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1.5px; pointer-events: none;
  background: linear-gradient(135deg, var(--emerald-400), var(--cyan-400), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--t);
}
.fx-neon:hover::after { opacity: 1; }

/* ---------- Holographic shimmer overlay ---------- */
.fx-holo {
  position: relative; overflow: hidden;
}
.fx-holo::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(34,211,238,0.14) 45%, rgba(15,181,127,0.14) 55%, transparent 70%);
  background-size: 200% 100%;
  animation: holoShimmer 5s linear infinite;
  pointer-events: none; z-index: 2; mix-blend-mode: screen;
}
@keyframes holoShimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* ---------- Scanline overlay ---------- */
.fx-scanlines {
  position: relative;
}
.fx-scanlines::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(8,21,46,0.04) 0, rgba(8,21,46,0.04) 1px, transparent 1px, transparent 4px);
  opacity: 0.5; border-radius: inherit; z-index: 1;
}

/* ---------- Glow pulse ring ---------- */
.fx-glow-ring {
  position: absolute; border-radius: 50%; pointer-events: none;
  border: 1.5px solid var(--cyan-400); opacity: 0;
  animation: glowPulse 3s ease-out infinite;
}
@keyframes glowPulse {
  0% { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* ---------- 3D tilt wrapper (data-parallax) ---------- */
[data-parallax] { will-change: transform; transition: transform 0.15s var(--ease-out); }

/* ---------- Hero title 3D extrude ---------- */
.fx-extrude {
  text-shadow:
    0 1px 0 rgba(8,21,46,0.08),
    0 2px 0 rgba(8,21,46,0.06),
    0 4px 0 rgba(8,21,46,0.04),
    0 8px 20px rgba(8,21,46,0.12);
}

/* ---------- Reveal: 3D cube flip ---------- */
.reveal-cube {
  opacity: 0;
  transform: perspective(1000px) rotateY(-25deg) translateZ(-40px);
  transform-origin: left center;
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal-cube.is-visible {
  opacity: 1; transform: perspective(1000px) rotateY(0) translateZ(0);
}

/* ---------- Reveal: clip-path wipe ---------- */
.reveal-wipe {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s var(--ease-out), opacity 0.4s ease;
}
.reveal-wipe.is-visible {
  opacity: 1; clip-path: inset(0 0 0 0);
}

/* ---------- Glitch text (subtle, for hero accent) ---------- */
.fx-glitch {
  position: relative; display: inline-block;
}
.fx-glitch::before, .fx-glitch::after {
  content: attr(data-text); position: absolute; left: 0; top: 0;
  width: 100%; background: transparent;
  opacity: 0.6; pointer-events: none;
}
.fx-glitch::before { color: var(--cyan-400); transform: translate(2px, 0); mix-blend-mode: screen; animation: glitchA 4s infinite; }
.fx-glitch::after { color: var(--emerald-400); transform: translate(-2px, 0); mix-blend-mode: screen; animation: glitchB 4s infinite; }
@keyframes glitchA {
  0%, 92%, 100% { transform: translate(2px, 0); opacity: 0; }
  93% { transform: translate(-3px, 1px); opacity: 0.7; }
  96% { transform: translate(2px, -1px); opacity: 0.5; }
}
@keyframes glitchB {
  0%, 92%, 100% { transform: translate(-2px, 0); opacity: 0; }
  94% { transform: translate(3px, -1px); opacity: 0.7; }
  97% { transform: translate(-2px, 1px); opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-glitch::before, .fx-glitch::after { display: none; }
  .fx-holo::before, .fx-scanlines::after { animation: none; }
}

/* ---------- Section divider with animated gradient ---------- */
.fx-divider {
  height: 1px; width: 100%; border: 0;
  background: linear-gradient(90deg, transparent, var(--emerald-400), var(--cyan-400), transparent);
  background-size: 200% 100%;
  animation: dividerFlow 6s linear infinite;
  opacity: 0.5;
}
@keyframes dividerFlow {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* ---------- Loading veil ---------- */
.fx-veil {
  position: fixed; inset: 0; z-index: 9998;
  background: var(--navy-950);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.8s var(--ease), visibility 0.8s;
}
.fx-veil.is-hidden { opacity: 0; visibility: hidden; }
.fx-veil__mark {
  width: 64px; height: 64px; border-radius: 14px;
  background: linear-gradient(135deg, var(--emerald-500), var(--cyan-500));
  display: flex; align-items: center; justify-content: center;
  animation: veilPulse 1.4s ease-in-out infinite;
}
.fx-veil__mark svg { width: 34px; height: 34px; }
@keyframes veilPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34,211,238,0.5); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 24px rgba(34,211,238,0); }
}

/* ---------- Responsive: reduce heavy FX on mobile ---------- */
@media (max-width: 768px) {
  .fx-shapes { display: none; }
  .fx-particles { opacity: 0.3; }
  .fx-grid-floor { height: 30%; }
}
@media (max-width: 560px) {
  .fx-grid-floor { display: none; }
}