/* ============================================================================
   ENVIROTEC — FX Layer v3   (professional-grade motion)
   Loaded AFTER enhance.css. Additive, theme-aware, reduced-motion safe.
   Restraint over spectacle: masked heading reveals, quiet ambient motion.
   ============================================================================ */

:root { --fx-accent: var(--green-light); }

/* ------------------------------------------------- refined pointer (dot + trailing ring) */
.fx-cursor, .fx-dot {
  position: fixed; top: 0; left: 0; z-index: 10050; pointer-events: none;
  transform: translate(-50%, -50%); will-change: transform;
}
.fx-cursor {                       /* soft ring that eases toward the pointer */
  width: 34px; height: 34px; border: 1.5px solid rgba(11,122,62,.45);
  border-radius: 50%; opacity: 0; background: transparent;
  transition: width .32s var(--ease), height .32s var(--ease),
              opacity .35s, background .32s, border-color .32s;
}
.fx-dot {                          /* precise dot that tracks 1:1 */
  width: 6px; height: 6px; border-radius: 50%; background: var(--green); opacity: 0;
  transition: opacity .35s;
}
.fx-cursor.fx-on, .fx-dot.fx-on { opacity: 1; }
.fx-cursor.fx-hover { width: 52px; height: 52px; background: rgba(11,122,62,.07); border-color: var(--green); }
.fx-cursor.fx-down  { width: 26px; height: 26px; background: rgba(11,122,62,.12); }
body.fx-cursor-active { cursor: none; }
body.fx-cursor-active a, body.fx-cursor-active button,
body.fx-cursor-active .hero-thumb, body.fx-cursor-active label { cursor: none; }
body.fx-cursor-active input, body.fx-cursor-active textarea, body.fx-cursor-active select { cursor: auto; }

/* ------------------------------------------------- decode / scramble headings */
.fx-c { display: inline-block; white-space: pre; }
.fx-c.fx-scrambling { color: var(--fx-accent); opacity: .9; }

/* ------------------------------------------------- cursor-reactive card glow */
.fx-card { position: relative; overflow: hidden; }
.fx-card > .fx-glow {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0; border-radius: inherit; transition: opacity .4s;
  background: radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
              rgba(17,163,87,0.12), transparent 58%);
}
.fx-card:hover > .fx-glow { opacity: 1; }

/* ------------------------------------------------- telemetry ticker band */
.fx-ticker {
  background: var(--green-darker); overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.09); border-bottom: 1px solid rgba(255,255,255,.09);
}
.fx-ticker-track { display: flex; width: max-content; animation: fxTicker 42s linear infinite; padding: 11px 0; }
.fx-ticker:hover .fx-ticker-track { animation-play-state: paused; }
.fx-ti {
  display: inline-flex; align-items: center; gap: 9px; padding: 0 26px;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; white-space: nowrap;
}
.fx-ti::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--c, var(--green-light)); box-shadow: 0 0 7px var(--c, var(--green-light));
}
.fx-k { color: var(--c, #9fd9ba); font-weight: 500; }
.fx-v { color: rgba(233,246,238,.9); }
@keyframes fxTicker { to { transform: translateX(-50%); } }

/* ------------------------------------------------- radar sweep on CTA banner */
.cta-banner { position: relative; overflow: hidden; }
.cta-inner  { position: relative; z-index: 2; }
.fx-radar {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,255,255,.03) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.03) 39px 40px);
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000, transparent 72%);
          mask-image: radial-gradient(circle at 50% 45%, #000, transparent 72%);
}
.fx-radar::after {
  content: ""; position: absolute; top: 45%; left: 50%; width: 150%; height: 150%;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, rgba(17,163,87,.22), rgba(17,163,87,0) 26%);
  animation: fxRadar 9s linear infinite;
}
@keyframes fxRadar { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ------------------------------------------------- image scan-wipe reveal */
.fx-wipe {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s var(--ease), transform .6s var(--ease);
}
.fx-wipe.fx-in { clip-path: inset(0 0 0 0); }

/* ------------------------------------------------- live scroll HUD readout */
.fx-hud {
  position: fixed; left: 18px; bottom: 16px; z-index: 9000; pointer-events: none;
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-muted); background: var(--off-white);
  border: 1px solid var(--border); border-radius: 9px; padding: 7px 12px;
  box-shadow: var(--shadow-sm); opacity: .92;
}
.fx-hud::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  animation: fxBlink 2.4s ease-in-out infinite;
}
@keyframes fxBlink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.fx-hud-idx { color: var(--text-primary); font-weight: 500; }
.fx-hud-sep, .fx-hud-total { color: var(--text-faint); }
.fx-hud-name { color: var(--green); font-weight: 500; }
.fx-hud-pct { color: var(--text-faint); margin-left: 2px; }

/* ============================ reduced-motion / small-screen safety ============================ */
@media (prefers-reduced-motion: reduce) {
  .fx-ticker-track, .fx-radar::after, .fx-hud::before { animation: none !important; }
  .fx-wipe { clip-path: none; transition: none; }
  .fx-cursor, .fx-dot { display: none; }
}
@media (max-width: 900px) { .fx-hud { display: none; } }