/* ============================================================
   GOD'S EYE DESIGN SYSTEM v3.0 — Special Effects
   Visual effects inspired by the Furious 7 God's Eye interface.

   ALL effects are OPT-IN only via .ge-fx-* classes.
   No effect applies automatically; you must explicitly add classes.

   Performance annotations:
     /* PERF: uses backdrop-filter */     — GPU-intensive compositing
     /* PERF: uses box-shadow */          — triggers paint
     /* PERF: uses filter */              — triggers paint
     /* PERF: uses clip-path animation */ — triggers layout in some engines
     /* PERF: uses pseudo-element */      — additional layer

   Token references used throughout:
     --ge-cyan / --ge-cyan-rgb
     --ge-magenta / --ge-magenta-rgb
     --ge-yellow / --ge-yellow-rgb
     --ge-bg-primary, --ge-bg-secondary, --ge-bg-tertiary, --ge-bg-elevated
     --ge-accent-cyan-rgb, --ge-accent-magenta-rgb (legacy)
     --ge-z-below (-1), --ge-z-raised (10)
     --ge-duration-fast (150ms) ... --ge-duration-glacial (2000ms)

   Light mode support:
     All effects that use color have [data-theme="light"] overrides.
     Effects are subtle by default; add *-intense for full effect.
   ============================================================ */


/* ============================================================
   1. ANIMATED GRID BACKGROUND
   ============================================================ */

/* PERF: uses pseudo-element, mask-image */
.ge-fx-grid {
  position: relative;
}

.ge-fx-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: var(--ge-z-below, -1);
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

/* Intense variant */
.ge-fx-grid-intense::before {
  background-image:
    linear-gradient(rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.08) 1px, transparent 1px);
}

.ge-fx-grid-dense::before {
  background-size: 20px 20px;
}

.ge-fx-grid-sparse::before {
  background-size: 60px 60px;
}

.ge-fx-grid-magenta::before {
  background-image:
    linear-gradient(rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.03) 1px, transparent 1px);
}

.ge-fx-grid-animated::before {
  animation: ge-gridShift 8s linear infinite;
  will-change: background-position;
}

@keyframes ge-gridShift {
  0% {
    background-position: 0 0, 0 0;
  }
  100% {
    background-position: 40px 40px, 40px 40px;
  }
}

/* Light mode: lighter grid lines */
[data-theme="light"] .ge-fx-grid::before {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
}

[data-theme="light"] .ge-fx-grid-intense::before {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.08) 1px, transparent 1px);
}

[data-theme="light"] .ge-fx-grid-magenta::before {
  background-image:
    linear-gradient(rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.06) 1px, transparent 1px);
}


/* ============================================================
   2. SCANLINE OVERLAY
   ============================================================ */

/* PERF: uses pseudo-element */
.ge-fx-scanlines {
  position: relative;
}

.ge-fx-scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.05) 2px,
    rgba(0, 0, 0, 0.05) 4px
  );
  pointer-events: none;
  z-index: var(--ge-z-raised, 10);
}

/* Intense variant */
.ge-fx-scanlines-intense::after {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.12) 2px,
    rgba(0, 0, 0, 0.12) 4px
  );
}

.ge-fx-scanlines-subtle::after {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.02) 2px,
    rgba(0, 0, 0, 0.02) 4px
  );
}

.ge-fx-scanlines-strong::after {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.18) 2px,
    rgba(0, 0, 0, 0.18) 4px
  );
}

.ge-fx-scanlines-animated::after {
  animation: ge-scanlineScroll 6s linear infinite;
}

@keyframes ge-scanlineScroll {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100px;
  }
}

/* Light mode: much lighter scanlines */
[data-theme="light"] .ge-fx-scanlines::after {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.02) 2px,
    rgba(0, 0, 0, 0.02) 4px
  );
}

[data-theme="light"] .ge-fx-scanlines-intense::after {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.06) 2px,
    rgba(0, 0, 0, 0.06) 4px
  );
}

[data-theme="light"] .ge-fx-scanlines-strong::after {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.1) 2px,
    rgba(0, 0, 0, 0.1) 4px
  );
}


/* ============================================================
   3. GRADIENT MESH
   ============================================================ */

/* PERF: uses pseudo-element with multiple radial-gradients */
.ge-fx-mesh {
  position: relative;
  overflow: hidden;
}

.ge-fx-mesh::before {
  content: '';
  position: absolute;
  inset: -50%;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(var(--ge-yellow-rgb, 255, 230, 0), 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: var(--ge-z-below, -1);
}

/* Intense variant */
.ge-fx-mesh-intense::before {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(var(--ge-yellow-rgb, 255, 230, 0), 0.06) 0%, transparent 50%);
}

.ge-fx-mesh-cyan::before {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 30%, rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.04) 0%, transparent 50%);
}

.ge-fx-mesh-magenta::before {
  background:
    radial-gradient(ellipse at 30% 40%, rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.04) 0%, transparent 50%);
}

.ge-fx-mesh-animated::before {
  animation: ge-meshShift 12s ease-in-out infinite alternate;
}

@keyframes ge-meshShift {
  0% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(5%, -3%) scale(1.05);
  }
  66% {
    transform: translate(-3%, 5%) scale(0.97);
  }
  100% {
    transform: translate(2%, 2%) scale(1.02);
  }
}

/* Light mode */
[data-theme="light"] .ge-fx-mesh::before {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(var(--ge-yellow-rgb, 255, 230, 0), 0.02) 0%, transparent 50%);
}

[data-theme="light"] .ge-fx-mesh-intense::before {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(var(--ge-yellow-rgb, 255, 230, 0), 0.04) 0%, transparent 50%);
}


/* ============================================================
   4. NOISE TEXTURE
   ============================================================ */

/* PERF: uses pseudo-element with inline SVG */
.ge-fx-noise {
  position: relative;
}

.ge-fx-noise::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: var(--ge-z-raised, 10);
  opacity: 0.35;
}

/* Intense variant */
.ge-fx-noise-intense::after {
  opacity: 0.7;
}

.ge-fx-noise-subtle::after {
  opacity: 0.18;
}

.ge-fx-noise-strong::after {
  opacity: 0.8;
}

/* Light mode: reduce noise visibility */
[data-theme="light"] .ge-fx-noise::after {
  opacity: 0.2;
}

[data-theme="light"] .ge-fx-noise-intense::after {
  opacity: 0.45;
}

[data-theme="light"] .ge-fx-noise-strong::after {
  opacity: 0.55;
}


/* ============================================================
   5. RADIAL GLOW
   ============================================================ */

/* PERF: uses pseudo-element with radial-gradient */
.ge-fx-radial-glow {
  position: relative;
  overflow: hidden;
}

.ge-fx-radial-glow::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.08) 0%,
    rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.03) 30%,
    transparent 70%
  );
  pointer-events: none;
  z-index: var(--ge-z-below, -1);
}

/* Intense variant */
.ge-fx-radial-glow-intense::before {
  background: radial-gradient(
    circle,
    rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.18) 0%,
    rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.06) 30%,
    transparent 70%
  );
}

.ge-fx-radial-glow-magenta::before {
  background: radial-gradient(
    circle,
    rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.08) 0%,
    rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.03) 30%,
    transparent 70%
  );
}

.ge-fx-radial-glow-yellow::before {
  background: radial-gradient(
    circle,
    rgba(var(--ge-yellow-rgb, 255, 230, 0), 0.08) 0%,
    rgba(var(--ge-yellow-rgb, 255, 230, 0), 0.03) 30%,
    transparent 70%
  );
}

.ge-fx-radial-glow-bottom::before {
  top: auto;
  bottom: -50%;
}

.ge-fx-radial-glow-center::before {
  top: 50%;
  transform: translate(-50%, -50%);
}

.ge-fx-radial-glow-animated::before {
  animation: ge-radialPulse 4s ease-in-out infinite;
}

@keyframes ge-radialPulse {
  0%, 100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 0.6;
    transform: translateX(-50%) scale(1.15);
  }
}

/* Light mode: softer glow on light bg */
[data-theme="light"] .ge-fx-radial-glow::before {
  background: radial-gradient(
    circle,
    rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.05) 0%,
    rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.02) 30%,
    transparent 70%
  );
}

[data-theme="light"] .ge-fx-radial-glow-intense::before {
  background: radial-gradient(
    circle,
    rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.1) 0%,
    rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.04) 30%,
    transparent 70%
  );
}

[data-theme="light"] .ge-fx-radial-glow-magenta::before {
  background: radial-gradient(
    circle,
    rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.05) 0%,
    rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.02) 30%,
    transparent 70%
  );
}

[data-theme="light"] .ge-fx-radial-glow-yellow::before {
  background: radial-gradient(
    circle,
    rgba(var(--ge-yellow-rgb, 255, 230, 0), 0.05) 0%,
    rgba(var(--ge-yellow-rgb, 255, 230, 0), 0.02) 30%,
    transparent 70%
  );
}


/* ============================================================
   6. GLITCH TEXT
   ============================================================ */

/* PERF: uses clip-path animation, pseudo-elements */
.ge-fx-glitch {
  position: relative;
  display: inline-block;
}

.ge-fx-glitch::before,
.ge-fx-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ge-fx-glitch::before {
  color: var(--ge-cyan, var(--ge-accent-cyan, #00f0ff));
  z-index: -1;
  animation: ge-fxGlitchBefore 3s ease-in-out infinite;
}

.ge-fx-glitch::after {
  color: var(--ge-magenta, var(--ge-accent-magenta, #ff00aa));
  z-index: -2;
  animation: ge-fxGlitchAfter 3s ease-in-out infinite;
}

@keyframes ge-fxGlitchBefore {
  0%, 100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0);
  }
  5% {
    clip-path: inset(20% 0 60% 0);
    transform: translate(-2px, 1px);
  }
  10% {
    clip-path: inset(50% 0 20% 0);
    transform: translate(2px, -1px);
  }
  15% {
    clip-path: inset(80% 0 5% 0);
    transform: translate(-1px, 1px);
  }
  20% {
    clip-path: inset(0 0 0 0);
    transform: translate(0);
  }
}

@keyframes ge-fxGlitchAfter {
  0%, 100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0);
  }
  5% {
    clip-path: inset(40% 0 40% 0);
    transform: translate(2px, -1px);
  }
  10% {
    clip-path: inset(10% 0 70% 0);
    transform: translate(-2px, 1px);
  }
  15% {
    clip-path: inset(60% 0 10% 0);
    transform: translate(1px, -1px);
  }
  20% {
    clip-path: inset(0 0 0 0);
    transform: translate(0);
  }
}

/* Intense glitch: faster timing, larger offset */
.ge-fx-glitch-intense::before {
  animation: ge-fxGlitchBeforeIntense 1.5s ease-in-out infinite;
}

.ge-fx-glitch-intense::after {
  animation: ge-fxGlitchAfterIntense 1.5s ease-in-out infinite;
}

@keyframes ge-fxGlitchBeforeIntense {
  0%, 100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0);
  }
  4% {
    clip-path: inset(15% 0 65% 0);
    transform: translate(-5px, 2px);
  }
  8% {
    clip-path: inset(55% 0 15% 0);
    transform: translate(5px, -2px);
  }
  12% {
    clip-path: inset(75% 0 5% 0);
    transform: translate(-3px, 3px);
  }
  16% {
    clip-path: inset(5% 0 80% 0);
    transform: translate(4px, -3px);
  }
  20% {
    clip-path: inset(0 0 0 0);
    transform: translate(0);
  }
}

@keyframes ge-fxGlitchAfterIntense {
  0%, 100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0);
  }
  4% {
    clip-path: inset(35% 0 45% 0);
    transform: translate(5px, -2px);
  }
  8% {
    clip-path: inset(5% 0 75% 0);
    transform: translate(-5px, 2px);
  }
  12% {
    clip-path: inset(65% 0 15% 0);
    transform: translate(3px, -3px);
  }
  16% {
    clip-path: inset(25% 0 55% 0);
    transform: translate(-4px, 3px);
  }
  20% {
    clip-path: inset(0 0 0 0);
    transform: translate(0);
  }
}

/* Subtle glitch: slower, smaller offset */
.ge-fx-glitch-subtle::before {
  animation: ge-fxGlitchBeforeSubtle 6s ease-in-out infinite;
}

.ge-fx-glitch-subtle::after {
  animation: ge-fxGlitchAfterSubtle 6s ease-in-out infinite;
}

@keyframes ge-fxGlitchBeforeSubtle {
  0%, 100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0);
  }
  8% {
    clip-path: inset(30% 0 50% 0);
    transform: translate(-1px, 0);
  }
  12% {
    clip-path: inset(0 0 0 0);
    transform: translate(0);
  }
}

@keyframes ge-fxGlitchAfterSubtle {
  0%, 100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0);
  }
  10% {
    clip-path: inset(50% 0 30% 0);
    transform: translate(1px, 0);
  }
  14% {
    clip-path: inset(0 0 0 0);
    transform: translate(0);
  }
}

/* Hover-only glitch */
.ge-fx-glitch-hover::before,
.ge-fx-glitch-hover::after {
  animation: none;
}

.ge-fx-glitch-hover:hover::before {
  animation: ge-fxGlitchBefore 3s ease-in-out infinite;
}

.ge-fx-glitch-hover:hover::after {
  animation: ge-fxGlitchAfter 3s ease-in-out infinite;
}

/* Light mode: use darker pseudo-element colors */
[data-theme="light"] .ge-fx-glitch::before {
  color: rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.6);
}

[data-theme="light"] .ge-fx-glitch::after {
  color: rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.6);
}

[data-theme="light"] .ge-fx-glitch-intense::before {
  color: rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.8);
}

[data-theme="light"] .ge-fx-glitch-intense::after {
  color: rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.8);
}


/* ============================================================
   7. GRADIENT TEXT
   ============================================================ */

.ge-fx-gradient-text {
  background: linear-gradient(135deg, var(--ge-cyan, #00f0ff), var(--ge-magenta, #ff00aa));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ge-fx-gradient-text-warm {
  background: linear-gradient(135deg, var(--ge-magenta, #ff00aa), var(--ge-yellow, #ffe600));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ge-fx-gradient-text-cool {
  background: linear-gradient(135deg, var(--ge-cyan, #00f0ff), #00ff88);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ge-fx-gradient-text-fire {
  background: linear-gradient(135deg, var(--ge-yellow, #ffe600), #ff3333);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ge-fx-gradient-text-aurora {
  background: linear-gradient(135deg, var(--ge-cyan, #00f0ff), var(--ge-magenta, #ff00aa), var(--ge-yellow, #ffe600));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ge-fx-gradient-text-animated {
  background-size: 200% 200%;
  animation: ge-gradientTextShift 4s ease-in-out infinite;
}

@keyframes ge-gradientTextShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Light mode: darken gradient stops for contrast */
[data-theme="light"] .ge-fx-gradient-text {
  background: linear-gradient(135deg, #0099aa, #aa0077);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .ge-fx-gradient-text-warm {
  background: linear-gradient(135deg, #aa0077, #cc9900);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .ge-fx-gradient-text-cool {
  background: linear-gradient(135deg, #0099aa, #008855);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .ge-fx-gradient-text-fire {
  background: linear-gradient(135deg, #cc9900, #cc2222);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .ge-fx-gradient-text-aurora {
  background: linear-gradient(135deg, #0099aa, #aa0077, #cc9900);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* ============================================================
   8. TEXT GLOW
   ============================================================ */

/* PERF: uses text-shadow (multiple layers) */
.ge-fx-text-glow {
  text-shadow:
    0 0 5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.4),
    0 0 15px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.2),
    0 0 30px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.08);
}

/* Intense variant */
.ge-fx-text-glow-intense {
  text-shadow:
    0 0 7px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.8),
    0 0 20px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.5),
    0 0 40px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.25),
    0 0 60px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.1);
}

.ge-fx-text-glow-magenta {
  text-shadow:
    0 0 5px rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.4),
    0 0 15px rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.2),
    0 0 30px rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.08);
}

.ge-fx-text-glow-yellow {
  text-shadow:
    0 0 5px rgba(var(--ge-yellow-rgb, 255, 230, 0), 0.4),
    0 0 15px rgba(var(--ge-yellow-rgb, 255, 230, 0), 0.2),
    0 0 30px rgba(var(--ge-yellow-rgb, 255, 230, 0), 0.08);
}

.ge-fx-text-glow-success {
  text-shadow:
    0 0 5px rgba(0, 230, 118, 0.4),
    0 0 15px rgba(0, 230, 118, 0.2),
    0 0 30px rgba(0, 230, 118, 0.08);
}

.ge-fx-text-glow-error {
  text-shadow:
    0 0 5px rgba(255, 23, 68, 0.4),
    0 0 15px rgba(255, 23, 68, 0.2),
    0 0 30px rgba(255, 23, 68, 0.08);
}

.ge-fx-text-glow-warning {
  text-shadow:
    0 0 5px rgba(var(--ge-yellow-rgb, 255, 230, 0), 0.4),
    0 0 15px rgba(var(--ge-yellow-rgb, 255, 230, 0), 0.2),
    0 0 30px rgba(var(--ge-yellow-rgb, 255, 230, 0), 0.08);
}

.ge-fx-text-glow-strong {
  text-shadow:
    0 0 7px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.9),
    0 0 20px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.6),
    0 0 40px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.3),
    0 0 60px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.15);
}

.ge-fx-text-glow-subtle {
  text-shadow:
    0 0 4px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.2),
    0 0 10px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.08);
}

.ge-fx-text-glow-pulse {
  animation: ge-textGlowPulse 2s ease-in-out infinite;
}

@keyframes ge-textGlowPulse {
  0%, 100% {
    text-shadow:
      0 0 5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.4),
      0 0 15px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.2),
      0 0 30px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.08);
  }
  50% {
    text-shadow:
      0 0 8px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.7),
      0 0 25px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.4),
      0 0 50px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.15);
  }
}

/* Light mode: much more subtle glow */
[data-theme="light"] .ge-fx-text-glow {
  text-shadow:
    0 0 4px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.15),
    0 0 10px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.06);
}

[data-theme="light"] .ge-fx-text-glow-intense {
  text-shadow:
    0 0 5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.35),
    0 0 15px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.15),
    0 0 30px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.06);
}

[data-theme="light"] .ge-fx-text-glow-magenta {
  text-shadow:
    0 0 4px rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.15),
    0 0 10px rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.06);
}

[data-theme="light"] .ge-fx-text-glow-yellow {
  text-shadow:
    0 0 4px rgba(var(--ge-yellow-rgb, 255, 230, 0), 0.15),
    0 0 10px rgba(var(--ge-yellow-rgb, 255, 230, 0), 0.06);
}

[data-theme="light"] .ge-fx-text-glow-success {
  text-shadow:
    0 0 4px rgba(0, 200, 100, 0.15),
    0 0 10px rgba(0, 200, 100, 0.06);
}

[data-theme="light"] .ge-fx-text-glow-error {
  text-shadow:
    0 0 4px rgba(220, 40, 40, 0.15),
    0 0 10px rgba(220, 40, 40, 0.06);
}

[data-theme="light"] .ge-fx-text-glow-warning {
  text-shadow:
    0 0 4px rgba(200, 180, 0, 0.15),
    0 0 10px rgba(200, 180, 0, 0.06);
}

[data-theme="light"] .ge-fx-text-glow-strong {
  text-shadow:
    0 0 5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.35),
    0 0 15px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.15);
}

[data-theme="light"] .ge-fx-text-glow-subtle {
  text-shadow:
    0 0 3px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.1);
}


/* ============================================================
   9. HOLOGRAM SCAN
   ============================================================ */

/* PERF: uses pseudo-element with animation */
.ge-fx-holo-scan {
  position: relative;
  overflow: hidden;
}

.ge-fx-holo-scan::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.04) 50%,
    transparent 100%
  );
  background-size: 100% 30%;
  animation: ge-fxDataScan 3s linear infinite;
  pointer-events: none;
  z-index: var(--ge-z-raised, 10);
}

/* Intense variant */
.ge-fx-holo-scan-intense::after {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.1) 50%,
    transparent 100%
  );
  background-size: 100% 30%;
}

@keyframes ge-fxDataScan {
  0% {
    background-position: 0 -100%;
  }
  100% {
    background-position: 0 200%;
  }
}

.ge-fx-holo-scan-fast::after {
  animation-duration: 1.5s;
}

.ge-fx-holo-scan-magenta::after {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.04) 50%,
    transparent 100%
  );
  background-size: 100% 30%;
}

/* Light mode */
[data-theme="light"] .ge-fx-holo-scan::after {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.03) 50%,
    transparent 100%
  );
  background-size: 100% 30%;
}


/* ============================================================
   10. DATA STREAM LINE
   ============================================================ */

/* PERF: uses pseudo-element with animation */
.ge-fx-data-stream {
  position: relative;
  overflow: hidden;
}

.ge-fx-data-stream::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--ge-cyan, #00f0ff),
    transparent
  );
  animation: ge-fxDataStreamLine 2s linear infinite;
  pointer-events: none;
  z-index: var(--ge-z-raised, 10);
}

@keyframes ge-fxDataStreamLine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.ge-fx-data-stream-vertical::before {
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(
    180deg,
    transparent,
    var(--ge-cyan, #00f0ff),
    transparent
  );
  animation: ge-fxDataStreamVertical 2s linear infinite;
}

@keyframes ge-fxDataStreamVertical {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

.ge-fx-data-stream-magenta::before {
  background: linear-gradient(
    90deg,
    transparent,
    var(--ge-magenta, #ff00aa),
    transparent
  );
}

.ge-fx-data-stream-bidirectional::before {
  background: linear-gradient(
    90deg,
    transparent,
    var(--ge-cyan, #00f0ff),
    transparent
  );
}

.ge-fx-data-stream-bidirectional::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--ge-magenta, #ff00aa),
    transparent
  );
  animation: ge-fxDataStreamLineReverse 2s linear infinite;
  pointer-events: none;
  z-index: var(--ge-z-raised, 10);
}

@keyframes ge-fxDataStreamLineReverse {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Light mode */
[data-theme="light"] .ge-fx-data-stream::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.5),
    transparent
  );
}

[data-theme="light"] .ge-fx-data-stream-magenta::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.5),
    transparent
  );
}


/* ============================================================
   11. BORDER ANIMATIONS
   ============================================================ */

/* --- Border Scan --- */
/* PERF: uses conic-gradient animation, pseudo-element, mask */
.ge-fx-border-scan {
  position: relative;
}

.ge-fx-border-scan::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    var(--ge-cyan, #00f0ff) 10%,
    transparent 20%
  );
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  animation: ge-fxBorderRotate 3s linear infinite;
  pointer-events: none;
}

@keyframes ge-fxBorderRotate {
  0% {
    background: conic-gradient(
      from 0deg,
      transparent 0%,
      var(--ge-cyan, #00f0ff) 10%,
      transparent 20%
    );
  }
  25% {
    background: conic-gradient(
      from 90deg,
      transparent 0%,
      var(--ge-cyan, #00f0ff) 10%,
      transparent 20%
    );
  }
  50% {
    background: conic-gradient(
      from 180deg,
      transparent 0%,
      var(--ge-cyan, #00f0ff) 10%,
      transparent 20%
    );
  }
  75% {
    background: conic-gradient(
      from 270deg,
      transparent 0%,
      var(--ge-cyan, #00f0ff) 10%,
      transparent 20%
    );
  }
  100% {
    background: conic-gradient(
      from 360deg,
      transparent 0%,
      var(--ge-cyan, #00f0ff) 10%,
      transparent 20%
    );
  }
}

.ge-fx-border-scan-magenta::before {
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    var(--ge-magenta, #ff00aa) 10%,
    transparent 20%
  );
}

.ge-fx-border-scan-dual::before {
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    var(--ge-cyan, #00f0ff) 10%,
    transparent 20%,
    transparent 50%,
    var(--ge-magenta, #ff00aa) 60%,
    transparent 70%
  );
}

/* --- Border Pulse --- */
/* PERF: uses box-shadow animation */
.ge-fx-border-pulse {
  animation: ge-fxBorderPulse 2s ease-in-out infinite;
}

@keyframes ge-fxBorderPulse {
  0%, 100% {
    border-color: rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.2);
    box-shadow: 0 0 4px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.06);
  }
  50% {
    border-color: rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.6);
    box-shadow: 0 0 12px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.2);
  }
}

/* Intense variant */
.ge-fx-border-pulse-intense {
  animation: ge-fxBorderPulseIntense 2s ease-in-out infinite;
}

@keyframes ge-fxBorderPulseIntense {
  0%, 100% {
    border-color: rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.3);
    box-shadow: 0 0 5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.1);
  }
  50% {
    border-color: rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.9);
    box-shadow: 0 0 20px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.4);
  }
}

.ge-fx-border-pulse-magenta {
  animation: ge-fxBorderPulseMagenta 2s ease-in-out infinite;
}

@keyframes ge-fxBorderPulseMagenta {
  0%, 100% {
    border-color: rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.2);
    box-shadow: 0 0 4px rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.06);
  }
  50% {
    border-color: rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.6);
    box-shadow: 0 0 12px rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.2);
  }
}

/* Light mode */
[data-theme="light"] .ge-fx-border-pulse {
  animation: ge-fxBorderPulseLight 2s ease-in-out infinite;
}

@keyframes ge-fxBorderPulseLight {
  0%, 100% {
    border-color: rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.15);
    box-shadow: 0 0 3px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.04);
  }
  50% {
    border-color: rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.4);
    box-shadow: 0 0 8px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.12);
  }
}

/* --- Border Flow --- */
.ge-fx-border-flow {
  border-image: linear-gradient(
    90deg,
    var(--ge-cyan, #00f0ff),
    var(--ge-magenta, #ff00aa),
    var(--ge-cyan, #00f0ff)
  ) 1;
  border-image-slice: 1;
  animation: ge-fxBorderFlow 3s linear infinite;
  background-size: 200% 100%;
}

@keyframes ge-fxBorderFlow {
  0% {
    border-image-source: linear-gradient(
      90deg,
      var(--ge-cyan, #00f0ff) 0%,
      var(--ge-magenta, #ff00aa) 50%,
      var(--ge-cyan, #00f0ff) 100%
    );
  }
  50% {
    border-image-source: linear-gradient(
      90deg,
      var(--ge-magenta, #ff00aa) 0%,
      var(--ge-cyan, #00f0ff) 50%,
      var(--ge-magenta, #ff00aa) 100%
    );
  }
  100% {
    border-image-source: linear-gradient(
      90deg,
      var(--ge-cyan, #00f0ff) 0%,
      var(--ge-magenta, #ff00aa) 50%,
      var(--ge-cyan, #00f0ff) 100%
    );
  }
}


/* ============================================================
   12. GLASS MORPHISM
   ============================================================ */

/* PERF: uses backdrop-filter */
.ge-fx-glass {
  background: rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.02);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.08);
}

/* Intense variant */
.ge-fx-glass-intense {
  background: rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.15);
  box-shadow: inset 0 0 20px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.04);
}

.ge-fx-glass-strong {
  background: rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.05);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.12);
}

.ge-fx-glass-subtle {
  background: rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.01);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.05);
}

.ge-fx-glass-cyan {
  background: rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.12);
  box-shadow: inset 0 0 15px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.02);
}

.ge-fx-glass-magenta {
  background: rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.12);
  box-shadow: inset 0 0 15px rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.02);
}

.ge-fx-glass-dark {
  background: rgba(10, 10, 15, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Light mode glass: lighter backdrop, visible border */
[data-theme="light"] .ge-fx-glass {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ge-fx-glass-intense {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .ge-fx-glass-strong {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ge-fx-glass-subtle {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .ge-fx-glass-cyan {
  background: rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.12);
  box-shadow: inset 0 0 15px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.02);
}

[data-theme="light"] .ge-fx-glass-magenta {
  background: rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.12);
  box-shadow: inset 0 0 15px rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.02);
}

[data-theme="light"] .ge-fx-glass-dark {
  background: rgba(240, 240, 245, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 0, 0, 0.06);
}


/* ============================================================
   13. HOVER LIFT WITH GLOW
   ============================================================ */

/* PERF: uses box-shadow transition */
.ge-fx-lift {
  transition:
    transform var(--ge-duration-normal, 200ms) cubic-bezier(0, 0, 0.2, 1),
    box-shadow var(--ge-duration-normal, 200ms) cubic-bezier(0, 0, 0.2, 1);
}

.ge-fx-lift:hover,
.ge-fx-lift:focus-visible {
  transform: translateY(-3px);
  box-shadow:
    0 6px 20px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.1),
    0 0 8px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.06);
}

.ge-fx-lift:active {
  transform: translateY(-1px);
}

/* Intense variant */
.ge-fx-lift-intense:hover {
  transform: translateY(-5px);
  box-shadow:
    0 10px 30px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.2),
    0 0 15px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.12);
}

.ge-fx-lift-sm:hover,
.ge-fx-lift-sm:focus-visible {
  transform: translateY(-1px);
  box-shadow:
    0 3px 10px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.06),
    0 0 4px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.04);
}

.ge-fx-lift-sm:active {
  transform: translateY(0);
}

.ge-fx-lift-lg:hover,
.ge-fx-lift-lg:focus-visible {
  transform: translateY(-6px);
  box-shadow:
    0 12px 35px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.15),
    0 0 15px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.08);
}

.ge-fx-lift-lg:active {
  transform: translateY(-2px);
}

.ge-fx-lift-magenta:hover,
.ge-fx-lift-magenta:focus-visible {
  box-shadow:
    0 6px 20px rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.1),
    0 0 8px rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.06);
}

.ge-fx-lift-magenta:active {
  transform: translateY(-1px);
}

.ge-fx-lift-yellow:hover,
.ge-fx-lift-yellow:focus-visible {
  box-shadow:
    0 6px 20px rgba(var(--ge-yellow-rgb, 255, 230, 0), 0.1),
    0 0 8px rgba(var(--ge-yellow-rgb, 255, 230, 0), 0.06);
}

.ge-fx-lift-yellow:active {
  transform: translateY(-1px);
}

/* Light mode */
[data-theme="light"] .ge-fx-lift:hover {
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.08),
    0 0 8px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.06);
}

[data-theme="light"] .ge-fx-lift-intense:hover {
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.12),
    0 0 15px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.1);
}


/* ============================================================
   14. CORNER ACCENTS
   ============================================================ */

/* PERF: uses pseudo-elements */
.ge-fx-corners {
  position: relative;
}

.ge-fx-corners::before,
.ge-fx-corners::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  z-index: var(--ge-z-raised, 10);
}

.ge-fx-corners::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--ge-cyan, #00f0ff);
  border-left: 2px solid var(--ge-cyan, #00f0ff);
}

.ge-fx-corners::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid var(--ge-cyan, #00f0ff);
  border-right: 2px solid var(--ge-cyan, #00f0ff);
}

.ge-fx-corners-all {
  position: relative;
}

.ge-fx-corners-all::before,
.ge-fx-corners-all::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  z-index: var(--ge-z-raised, 10);
}

.ge-fx-corners-all::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--ge-cyan, #00f0ff);
  border-left: 2px solid var(--ge-cyan, #00f0ff);
  box-shadow:
    calc(100% - 10px) 0 0 -1px transparent,
    calc(100% - 10px) 0 0 0 transparent;
}

.ge-fx-corners-all::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid var(--ge-cyan, #00f0ff);
  border-right: 2px solid var(--ge-cyan, #00f0ff);
}

.ge-fx-corners-all {
  background-image:
    linear-gradient(var(--ge-cyan, #00f0ff), var(--ge-cyan, #00f0ff)),
    linear-gradient(var(--ge-cyan, #00f0ff), var(--ge-cyan, #00f0ff));
  background-size: 12px 2px, 2px 12px;
  background-position: top right, top right;
  background-repeat: no-repeat;
}

.ge-fx-corners-magenta::before {
  border-top-color: var(--ge-magenta, #ff00aa);
  border-left-color: var(--ge-magenta, #ff00aa);
}

.ge-fx-corners-magenta::after {
  border-bottom-color: var(--ge-magenta, #ff00aa);
  border-right-color: var(--ge-magenta, #ff00aa);
}

.ge-fx-corners-animated::before,
.ge-fx-corners-animated::after {
  transition:
    width var(--ge-duration-normal, 200ms) cubic-bezier(0, 0, 0.2, 1),
    height var(--ge-duration-normal, 200ms) cubic-bezier(0, 0, 0.2, 1);
}

.ge-fx-corners-animated:hover::before,
.ge-fx-corners-animated:hover::after {
  width: 20px;
  height: 20px;
}

/* Light mode: darker corner accents */
[data-theme="light"] .ge-fx-corners::before {
  border-top-color: rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.5);
  border-left-color: rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.5);
}

[data-theme="light"] .ge-fx-corners::after {
  border-bottom-color: rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.5);
  border-right-color: rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.5);
}

[data-theme="light"] .ge-fx-corners-all::before {
  border-top-color: rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.5);
  border-left-color: rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.5);
}

[data-theme="light"] .ge-fx-corners-all::after {
  border-bottom-color: rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.5);
  border-right-color: rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.5);
}

[data-theme="light"] .ge-fx-corners-all {
  background-image:
    linear-gradient(rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.5), rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.5)),
    linear-gradient(rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.5), rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.5));
}


/* ============================================================
   15. TYPING CURSOR
   ============================================================ */

.ge-fx-cursor::after {
  content: '|';
  animation: ge-fxCursorBlink 1s step-end infinite;
  color: var(--ge-cyan, #00f0ff);
  margin-left: 2px;
}

@keyframes ge-fxCursorBlink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.ge-fx-cursor-block::after {
  content: '';
  display: inline-block;
  width: 0.6em;
  height: 1.1em;
  background: var(--ge-cyan, #00f0ff);
  vertical-align: text-bottom;
  animation: ge-fxCursorBlink 1s step-end infinite;
  margin-left: 2px;
}

.ge-fx-cursor-underline::after {
  content: '';
  display: inline-block;
  width: 0.6em;
  height: 2px;
  background: var(--ge-cyan, #00f0ff);
  vertical-align: baseline;
  animation: ge-fxCursorBlink 1s step-end infinite;
  margin-left: 2px;
}

/* Light mode: adjust cursor color for contrast */
[data-theme="light"] .ge-fx-cursor::after {
  color: rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.7);
}

[data-theme="light"] .ge-fx-cursor-block::after {
  background: rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.6);
}

[data-theme="light"] .ge-fx-cursor-underline::after {
  background: rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.6);
}


/* ============================================================
   16. STATUS INDICATOR
   ============================================================ */

/* PERF: uses box-shadow animation */
.ge-fx-status {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00ff88;
  box-shadow: 0 0 4px rgba(0, 230, 118, 0.35);
  animation: ge-fxStatusPulse 2s ease-in-out infinite;
}

/* Intense variant */
.ge-fx-status-intense {
  box-shadow: 0 0 8px rgba(0, 230, 118, 0.6);
  animation: ge-fxStatusPulseIntense 2s ease-in-out infinite;
}

@keyframes ge-fxStatusPulse {
  0%, 100% {
    box-shadow: 0 0 4px rgba(0, 230, 118, 0.35);
  }
  50% {
    box-shadow: 0 0 8px rgba(0, 230, 118, 0.55);
  }
}

@keyframes ge-fxStatusPulseIntense {
  0%, 100% {
    box-shadow: 0 0 6px rgba(0, 230, 118, 0.5);
  }
  50% {
    box-shadow: 0 0 14px rgba(0, 230, 118, 0.85);
  }
}

.ge-fx-status-warning {
  background: var(--ge-yellow, #ffe600);
  box-shadow: 0 0 4px rgba(var(--ge-yellow-rgb, 255, 230, 0), 0.35);
  animation: ge-fxStatusPulseWarning 2s ease-in-out infinite;
}

@keyframes ge-fxStatusPulseWarning {
  0%, 100% {
    box-shadow: 0 0 4px rgba(var(--ge-yellow-rgb, 255, 230, 0), 0.35);
  }
  50% {
    box-shadow: 0 0 8px rgba(var(--ge-yellow-rgb, 255, 230, 0), 0.55);
  }
}

.ge-fx-status-error {
  background: #ff3333;
  box-shadow: 0 0 4px rgba(255, 23, 68, 0.35);
  animation: ge-fxStatusPulseError 2s ease-in-out infinite;
}

@keyframes ge-fxStatusPulseError {
  0%, 100% {
    box-shadow: 0 0 4px rgba(255, 23, 68, 0.35);
  }
  50% {
    box-shadow: 0 0 8px rgba(255, 23, 68, 0.55);
  }
}

.ge-fx-status-info {
  background: var(--ge-cyan, #00f0ff);
  box-shadow: 0 0 4px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.35);
  animation: ge-fxStatusPulseInfo 2s ease-in-out infinite;
}

@keyframes ge-fxStatusPulseInfo {
  0%, 100% {
    box-shadow: 0 0 4px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.35);
  }
  50% {
    box-shadow: 0 0 8px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.55);
  }
}

.ge-fx-status-offline {
  background: #555566;
  box-shadow: none;
  animation: none;
}

.ge-fx-status-lg {
  width: 12px;
  height: 12px;
}

/* Light mode */
[data-theme="light"] .ge-fx-status {
  background: #00cc66;
  box-shadow: 0 0 3px rgba(0, 200, 100, 0.3);
}

[data-theme="light"] .ge-fx-status-warning {
  background: #ddbb00;
  box-shadow: 0 0 3px rgba(200, 180, 0, 0.3);
}

[data-theme="light"] .ge-fx-status-error {
  background: #dd2222;
  box-shadow: 0 0 3px rgba(220, 40, 40, 0.3);
}

[data-theme="light"] .ge-fx-status-offline {
  background: #aaaaaa;
}


/* ============================================================
   17. HEX PATTERN
   ============================================================ */

/* PERF: uses pseudo-element with inline SVG */
.ge-fx-hex {
  position: relative;
}

.ge-fx-hex::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%2300f0ff' fill-opacity='0.03'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: var(--ge-z-below, -1);
  opacity: 0.6;
}

/* Intense variant */
.ge-fx-hex-intense::before {
  opacity: 1;
}

/* Light mode */
[data-theme="light"] .ge-fx-hex::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.04'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.5;
}


/* ============================================================
   18. CIRCUIT PATTERN
   ============================================================ */

/* PERF: uses pseudo-element with inline SVG */
.ge-fx-circuit {
  position: relative;
}

.ge-fx-circuit::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%2300f0ff' stroke-width='0.5' stroke-opacity='0.03'%3E%3Cpath d='M10 10h20v0h10v10h10v10'/%3E%3Cpath d='M60 10h10v20h10v10h10'/%3E%3Cpath d='M10 50h30v10h10v10h10v10'/%3E%3Cpath d='M70 50h10v10h10v20'/%3E%3Cpath d='M20 80h10v10h20'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Ccircle cx='30' cy='10' r='2'/%3E%3Ccircle cx='50' cy='30' r='2'/%3E%3Ccircle cx='60' cy='10' r='2'/%3E%3Ccircle cx='90' cy='40' r='2'/%3E%3Ccircle cx='10' cy='50' r='2'/%3E%3Ccircle cx='60' cy='80' r='2'/%3E%3Ccircle cx='70' cy='50' r='2'/%3E%3Ccircle cx='90' cy='80' r='2'/%3E%3Ccircle cx='20' cy='80' r='2'/%3E%3Ccircle cx='50' cy='90' r='2'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: var(--ge-z-below, -1);
  opacity: 0.6;
}

/* Intense variant */
.ge-fx-circuit-intense::before {
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%2300f0ff' stroke-width='0.5' stroke-opacity='0.06'%3E%3Cpath d='M10 10h20v0h10v10h10v10'/%3E%3Cpath d='M60 10h10v20h10v10h10'/%3E%3Cpath d='M10 50h30v10h10v10h10v10'/%3E%3Cpath d='M70 50h10v10h10v20'/%3E%3Cpath d='M20 80h10v10h20'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Ccircle cx='30' cy='10' r='2'/%3E%3Ccircle cx='50' cy='30' r='2'/%3E%3Ccircle cx='60' cy='10' r='2'/%3E%3Ccircle cx='90' cy='40' r='2'/%3E%3Ccircle cx='10' cy='50' r='2'/%3E%3Ccircle cx='60' cy='80' r='2'/%3E%3Ccircle cx='70' cy='50' r='2'/%3E%3Ccircle cx='90' cy='80' r='2'/%3E%3Ccircle cx='20' cy='80' r='2'/%3E%3Ccircle cx='50' cy='90' r='2'/%3E%3C/g%3E%3C/svg%3E");
}

/* Light mode */
[data-theme="light"] .ge-fx-circuit::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000000' stroke-width='0.5' stroke-opacity='0.04'%3E%3Cpath d='M10 10h20v0h10v10h10v10'/%3E%3Cpath d='M60 10h10v20h10v10h10'/%3E%3Cpath d='M10 50h30v10h10v10h10v10'/%3E%3Cpath d='M70 50h10v10h10v20'/%3E%3Cpath d='M20 80h10v10h20'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Ccircle cx='30' cy='10' r='2'/%3E%3Ccircle cx='50' cy='30' r='2'/%3E%3Ccircle cx='60' cy='10' r='2'/%3E%3Ccircle cx='90' cy='40' r='2'/%3E%3Ccircle cx='10' cy='50' r='2'/%3E%3Ccircle cx='60' cy='80' r='2'/%3E%3Ccircle cx='70' cy='50' r='2'/%3E%3Ccircle cx='90' cy='80' r='2'/%3E%3Ccircle cx='20' cy='80' r='2'/%3E%3Ccircle cx='50' cy='90' r='2'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.5;
}


/* ============================================================
   19. DOT PATTERN
   ============================================================ */

.ge-fx-dots {
  position: relative;
}

.ge-fx-dots::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.06) 1px,
    transparent 1px
  );
  background-size: 20px 20px;
  pointer-events: none;
  z-index: var(--ge-z-below, -1);
}

/* Intense variant */
.ge-fx-dots-intense::before {
  background-image: radial-gradient(
    rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.12) 1px,
    transparent 1px
  );
}

.ge-fx-dots-dense::before {
  background-size: 10px 10px;
}

.ge-fx-dots-sparse::before {
  background-size: 32px 32px;
}

/* Light mode */
[data-theme="light"] .ge-fx-dots::before {
  background-image: radial-gradient(
    rgba(0, 0, 0, 0.06) 1px,
    transparent 1px
  );
}

[data-theme="light"] .ge-fx-dots-intense::before {
  background-image: radial-gradient(
    rgba(0, 0, 0, 0.1) 1px,
    transparent 1px
  );
}


/* ============================================================
   20. VIGNETTE
   ============================================================ */

.ge-fx-vignette {
  position: relative;
}

.ge-fx-vignette::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(10, 10, 15, 0.35) 100%
  );
  pointer-events: none;
  z-index: var(--ge-z-raised, 10);
}

/* Intense variant */
.ge-fx-vignette-intense::after {
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    rgba(10, 10, 15, 0.65) 100%
  );
}

.ge-fx-vignette-strong::after {
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    rgba(10, 10, 15, 0.8) 100%
  );
}

/* Light mode */
[data-theme="light"] .ge-fx-vignette::after {
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(0, 0, 0, 0.06) 100%
  );
}

[data-theme="light"] .ge-fx-vignette-intense::after {
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    rgba(0, 0, 0, 0.12) 100%
  );
}

[data-theme="light"] .ge-fx-vignette-strong::after {
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    rgba(0, 0, 0, 0.18) 100%
  );
}


/* ============================================================
   21. PARTICLE FIELD
   ============================================================ */

/* PERF: uses box-shadow (many shadows), animation */
.ge-fx-particles {
  position: relative;
}

.ge-fx-particles::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--ge-z-below, -1);
  background: transparent;
  box-shadow:
    12px 18px 0 0.5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.2),
    45px 72px 0 0.5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.15),
    88px 35px 0 0.5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.18),
    130px 90px 0 0.5px rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.15),
    175px 22px 0 0.5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.1),
    210px 65px 0 0.5px rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.18),
    255px 110px 0 0.5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.2),
    300px 48px 0 0.5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.15),
    340px 88px 0 0.5px rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.1),
    380px 15px 0 0.5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.18),
    420px 130px 0 0.5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.15),
    460px 55px 0 0.5px rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.2),
    500px 95px 0 0.5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.1),
    540px 140px 0 0.5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.15),
    70px 145px 0 0.5px rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.15),
    155px 160px 0 0.5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.18),
    235px 155px 0 0.5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.1),
    310px 170px 0 0.5px rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.2),
    400px 165px 0 0.5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.15),
    490px 175px 0 0.5px rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.15);
  animation: ge-fxParticleDrift 20s linear infinite;
}

/* Intense variant */
.ge-fx-particles-intense::before {
  box-shadow:
    12px 18px 0 0.5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.35),
    45px 72px 0 0.5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.25),
    88px 35px 0 0.5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.3),
    130px 90px 0 0.5px rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.25),
    175px 22px 0 0.5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.2),
    210px 65px 0 0.5px rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.3),
    255px 110px 0 0.5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.35),
    300px 48px 0 0.5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.25),
    340px 88px 0 0.5px rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.2),
    380px 15px 0 0.5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.3),
    420px 130px 0 0.5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.25),
    460px 55px 0 0.5px rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.35),
    500px 95px 0 0.5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.2),
    540px 140px 0 0.5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.25),
    70px 145px 0 0.5px rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.25),
    155px 160px 0 0.5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.3),
    235px 155px 0 0.5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.2),
    310px 170px 0 0.5px rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.35),
    400px 165px 0 0.5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.25),
    490px 175px 0 0.5px rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.25);
}

@keyframes ge-fxParticleDrift {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-3px, -5px);
  }
  50% {
    transform: translate(2px, -2px);
  }
  75% {
    transform: translate(-1px, 3px);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* Light mode */
[data-theme="light"] .ge-fx-particles::before {
  box-shadow:
    12px 18px 0 0.5px rgba(0, 0, 0, 0.08),
    45px 72px 0 0.5px rgba(0, 0, 0, 0.06),
    88px 35px 0 0.5px rgba(0, 0, 0, 0.07),
    130px 90px 0 0.5px rgba(0, 0, 0, 0.06),
    175px 22px 0 0.5px rgba(0, 0, 0, 0.05),
    210px 65px 0 0.5px rgba(0, 0, 0, 0.07),
    255px 110px 0 0.5px rgba(0, 0, 0, 0.08),
    300px 48px 0 0.5px rgba(0, 0, 0, 0.06),
    340px 88px 0 0.5px rgba(0, 0, 0, 0.05),
    380px 15px 0 0.5px rgba(0, 0, 0, 0.07),
    420px 130px 0 0.5px rgba(0, 0, 0, 0.06),
    460px 55px 0 0.5px rgba(0, 0, 0, 0.08),
    500px 95px 0 0.5px rgba(0, 0, 0, 0.05),
    540px 140px 0 0.5px rgba(0, 0, 0, 0.06),
    70px 145px 0 0.5px rgba(0, 0, 0, 0.06),
    155px 160px 0 0.5px rgba(0, 0, 0, 0.07),
    235px 155px 0 0.5px rgba(0, 0, 0, 0.05),
    310px 170px 0 0.5px rgba(0, 0, 0, 0.08),
    400px 165px 0 0.5px rgba(0, 0, 0, 0.06),
    490px 175px 0 0.5px rgba(0, 0, 0, 0.06);
}


/* ============================================================
   22. CHROMATIC ABERRATION
   ============================================================ */

/* PERF: uses text-shadow */
.ge-fx-chromatic {
  text-shadow:
    -1px 0 rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.25),
    1px 0 rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.25);
}

/* Intense variant */
.ge-fx-chromatic-intense {
  text-shadow:
    -2px 0 rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.5),
    2px 0 rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.5);
}

.ge-fx-chromatic-hover {
  text-shadow: none;
  transition: text-shadow var(--ge-duration-fast, 150ms) cubic-bezier(0, 0, 0.2, 1);
}

.ge-fx-chromatic-hover:hover {
  text-shadow:
    -1px 0 rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.35),
    1px 0 rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.35);
}

/* Light mode */
[data-theme="light"] .ge-fx-chromatic {
  text-shadow:
    -1px 0 rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.15),
    1px 0 rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.15);
}

[data-theme="light"] .ge-fx-chromatic-intense {
  text-shadow:
    -2px 0 rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.3),
    2px 0 rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.3);
}


/* ============================================================
   23. FLICKER EFFECT
   ============================================================ */

.ge-fx-flicker {
  animation: ge-fxFlicker 4s linear infinite;
}

@keyframes ge-fxFlicker {
  0%, 100% { opacity: 1; }
  3%       { opacity: 0.9; }
  6%       { opacity: 1; }
  7.5%     { opacity: 0.7; }
  8.5%     { opacity: 1; }
  25%      { opacity: 1; }
  26%      { opacity: 0.85; }
  28%      { opacity: 1; }
  50%      { opacity: 1; }
  51%      { opacity: 0.93; }
  52%      { opacity: 0.8; }
  53%      { opacity: 0.97; }
  54%      { opacity: 1; }
  75%      { opacity: 1; }
  76%      { opacity: 0.88; }
  77%      { opacity: 1; }
}

/* Intense variant */
.ge-fx-flicker-intense {
  animation: ge-fxFlickerIntense 3s linear infinite;
}

@keyframes ge-fxFlickerIntense {
  0%, 100% { opacity: 1; }
  3%       { opacity: 0.75; }
  6%       { opacity: 1; }
  7.5%     { opacity: 0.5; }
  8.5%     { opacity: 1; }
  25%      { opacity: 1; }
  26%      { opacity: 0.65; }
  28%      { opacity: 1; }
  50%      { opacity: 1; }
  51%      { opacity: 0.85; }
  52%      { opacity: 0.6; }
  53%      { opacity: 0.9; }
  54%      { opacity: 1; }
  75%      { opacity: 1; }
  76%      { opacity: 0.7; }
  77%      { opacity: 1; }
}

.ge-fx-flicker-subtle {
  animation: ge-fxFlickerSubtle 6s linear infinite;
}

@keyframes ge-fxFlickerSubtle {
  0%, 100% { opacity: 1; }
  10%      { opacity: 0.97; }
  12%      { opacity: 1; }
  40%      { opacity: 1; }
  42%      { opacity: 0.95; }
  44%      { opacity: 1; }
  70%      { opacity: 1; }
  72%      { opacity: 0.97; }
  73%      { opacity: 1; }
}


/* ============================================================
   24. PIXELATE ON HOVER
   ============================================================ */

/* PERF: uses pseudo-element */
.ge-fx-pixelate {
  position: relative;
  overflow: hidden;
}

.ge-fx-pixelate::after {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
  z-index: var(--ge-z-raised, 10);
  opacity: 0;
  transition: opacity var(--ge-duration-fast, 150ms) cubic-bezier(0, 0, 0.2, 1);
  background-image:
    linear-gradient(0deg, rgba(10, 10, 15, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 15, 0.1) 1px, transparent 1px);
  background-size: 4px 4px;
}

.ge-fx-pixelate:hover::after {
  opacity: 1;
}

/* Light mode */
[data-theme="light"] .ge-fx-pixelate::after {
  background-image:
    linear-gradient(0deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
}


/* ============================================================
   25. FROSTED BORDER
   ============================================================ */

/* PERF: uses box-shadow (inset + outer) */
.ge-fx-frost-border {
  border: 1px solid rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.1);
  box-shadow:
    inset 0 0 6px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.04),
    inset 0 0 15px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.02),
    0 0 6px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.03),
    0 0 15px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.015);
}

/* Intense variant */
.ge-fx-frost-border-intense {
  border: 1px solid rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.2);
  box-shadow:
    inset 0 0 8px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.08),
    inset 0 0 20px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.04),
    0 0 8px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.06),
    0 0 20px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.03);
}

/* Light mode */
[data-theme="light"] .ge-fx-frost-border {
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    inset 0 0 6px rgba(0, 0, 0, 0.02),
    0 0 6px rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .ge-fx-frost-border-intense {
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 0.04),
    0 0 8px rgba(0, 0, 0, 0.04);
}


/* ============================================================
   26. GRADIENT BORDER
   ============================================================ */

.ge-fx-gradient-border {
  border: 2px solid transparent;
  background-image:
    linear-gradient(var(--ge-bg-primary, #0a0a0f), var(--ge-bg-primary, #0a0a0f)),
    linear-gradient(135deg, var(--ge-cyan, #00f0ff), var(--ge-magenta, #ff00aa));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.ge-fx-gradient-border-magenta {
  border: 2px solid transparent;
  background-image:
    linear-gradient(var(--ge-bg-primary, #0a0a0f), var(--ge-bg-primary, #0a0a0f)),
    linear-gradient(135deg, var(--ge-magenta, #ff00aa), var(--ge-yellow, #ffe600));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.ge-fx-gradient-border-animated {
  border: 2px solid transparent;
  background-image:
    linear-gradient(var(--ge-bg-primary, #0a0a0f), var(--ge-bg-primary, #0a0a0f)),
    linear-gradient(135deg, var(--ge-cyan, #00f0ff), var(--ge-magenta, #ff00aa), var(--ge-yellow, #ffe600));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: 100% 100%, 300% 300%;
  animation: ge-fxGradientBorderShift 4s ease-in-out infinite;
}

@keyframes ge-fxGradientBorderShift {
  0% {
    background-position: 0 0, 0% 0%;
  }
  50% {
    background-position: 0 0, 100% 100%;
  }
  100% {
    background-position: 0 0, 0% 0%;
  }
}

/* Light mode */
[data-theme="light"] .ge-fx-gradient-border {
  background-image:
    linear-gradient(var(--ge-bg-primary, #ffffff), var(--ge-bg-primary, #ffffff)),
    linear-gradient(135deg, var(--ge-cyan, #00bbcc), var(--ge-magenta, #cc0088));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

[data-theme="light"] .ge-fx-gradient-border-magenta {
  background-image:
    linear-gradient(var(--ge-bg-primary, #ffffff), var(--ge-bg-primary, #ffffff)),
    linear-gradient(135deg, var(--ge-magenta, #cc0088), var(--ge-yellow, #ccaa00));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

[data-theme="light"] .ge-fx-gradient-border-animated {
  background-image:
    linear-gradient(var(--ge-bg-primary, #ffffff), var(--ge-bg-primary, #ffffff)),
    linear-gradient(135deg, var(--ge-cyan, #00bbcc), var(--ge-magenta, #cc0088), var(--ge-yellow, #ccaa00));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}


/* ============================================================
   27. SPOTLIGHT
   ============================================================ */

/* PERF: uses pseudo-element with animation */
.ge-fx-spotlight {
  position: relative;
  overflow: hidden;
}

.ge-fx-spotlight::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.05) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: var(--ge-z-below, -1);
  animation: ge-fxSpotlightRoam 10s ease-in-out infinite;
}

/* Intense variant */
.ge-fx-spotlight-intense::before {
  background: radial-gradient(
    circle,
    rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.12) 0%,
    transparent 70%
  );
}

@keyframes ge-fxSpotlightRoam {
  0% {
    top: -10%;
    left: -10%;
  }
  20% {
    top: 10%;
    left: 70%;
  }
  40% {
    top: 60%;
    left: 80%;
  }
  60% {
    top: 70%;
    left: 20%;
  }
  80% {
    top: 20%;
    left: 10%;
  }
  100% {
    top: -10%;
    left: -10%;
  }
}

/* Light mode */
[data-theme="light"] .ge-fx-spotlight::before {
  background: radial-gradient(
    circle,
    rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.03) 0%,
    transparent 70%
  );
}

[data-theme="light"] .ge-fx-spotlight-intense::before {
  background: radial-gradient(
    circle,
    rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.07) 0%,
    transparent 70%
  );
}


/* ============================================================
   28. NEON UNDERLINE
   ============================================================ */

/* PERF: uses box-shadow on pseudo-element */
.ge-fx-neon-underline {
  position: relative;
  display: inline-block;
}

.ge-fx-neon-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--ge-cyan, #00f0ff),
    transparent
  );
  box-shadow:
    0 0 4px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.35),
    0 0 8px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.2),
    0 0 16px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.1);
}

/* Intense variant */
.ge-fx-neon-underline-intense::after {
  box-shadow:
    0 0 5px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.6),
    0 0 12px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.4),
    0 0 25px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.2);
}

.ge-fx-neon-underline-magenta::after {
  background: linear-gradient(
    90deg,
    transparent,
    var(--ge-magenta, #ff00aa),
    transparent
  );
  box-shadow:
    0 0 4px rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.35),
    0 0 8px rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.2),
    0 0 16px rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.1);
}

/* Light mode */
[data-theme="light"] .ge-fx-neon-underline::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.6),
    transparent
  );
  box-shadow:
    0 0 3px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.15),
    0 0 6px rgba(var(--ge-cyan-rgb, var(--ge-accent-cyan-rgb)), 0.08);
}

[data-theme="light"] .ge-fx-neon-underline-magenta::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.6),
    transparent
  );
  box-shadow:
    0 0 3px rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.15),
    0 0 6px rgba(var(--ge-magenta-rgb, var(--ge-accent-magenta-rgb)), 0.08);
}


/* ============================================================
   29. PREFERS-REDUCED-MOTION — EFFECTS
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  /* Disable all animated effects */
  .ge-fx-grid-animated::before,
  .ge-fx-mesh-animated::before,
  .ge-fx-scanlines-animated::after,
  .ge-fx-radial-glow-animated::before,
  .ge-fx-gradient-text-animated,
  .ge-fx-text-glow-pulse,
  .ge-fx-holo-scan::after,
  .ge-fx-holo-scan-fast::after,
  .ge-fx-holo-scan-magenta::after,
  .ge-fx-holo-scan-intense::after,
  .ge-fx-data-stream::before,
  .ge-fx-data-stream-vertical::before,
  .ge-fx-data-stream-bidirectional::before,
  .ge-fx-data-stream-bidirectional::after,
  .ge-fx-border-scan::before,
  .ge-fx-border-pulse,
  .ge-fx-border-pulse-intense,
  .ge-fx-border-pulse-magenta,
  .ge-fx-border-flow,
  .ge-fx-flicker,
  .ge-fx-flicker-intense,
  .ge-fx-flicker-subtle,
  .ge-fx-spotlight::before,
  .ge-fx-spotlight-intense::before,
  .ge-fx-particles::before,
  .ge-fx-particles-intense::before,
  .ge-fx-gradient-border-animated,
  .ge-fx-status,
  .ge-fx-status-intense,
  .ge-fx-status-warning,
  .ge-fx-status-error,
  .ge-fx-status-info,
  .ge-fx-cursor::after,
  .ge-fx-cursor-block::after,
  .ge-fx-cursor-underline::after {
    animation: none !important;
  }

  /* Glitch: disable all pseudo-element animations */
  .ge-fx-glitch::before,
  .ge-fx-glitch::after,
  .ge-fx-glitch-intense::before,
  .ge-fx-glitch-intense::after,
  .ge-fx-glitch-subtle::before,
  .ge-fx-glitch-subtle::after,
  .ge-fx-glitch-hover:hover::before,
  .ge-fx-glitch-hover:hover::after {
    animation: none !important;
    clip-path: none !important;
    transform: none !important;
  }

  /* Disable hover transitions on effects */
  .ge-fx-lift,
  .ge-fx-lift-sm,
  .ge-fx-lift-lg,
  .ge-fx-lift-intense,
  .ge-fx-pixelate::after,
  .ge-fx-chromatic-hover,
  .ge-fx-corners-animated::before,
  .ge-fx-corners-animated::after {
    transition: none !important;
  }

  .ge-fx-lift:hover,
  .ge-fx-lift-sm:hover,
  .ge-fx-lift-lg:hover,
  .ge-fx-lift-intense:hover {
    transform: none !important;
  }

  /* Keep static effects visible but remove motion */
  .ge-fx-cursor::after {
    opacity: 1 !important;
  }

  .ge-fx-status,
  .ge-fx-status-intense {
    box-shadow: 0 0 4px rgba(0, 230, 118, 0.35) !important;
  }
}