/* ══════════════════════════════════════════════════════════════════════
   BRAHMASTRA FX v2 — additive effects pack
   Drop-in. Load AFTER css/style.css. Requires no markup changes.
   All DOM is injected by js/fx-v2.js
   ══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   1. BOOT SEQUENCE PRELOADER
   ───────────────────────────────────────────────────────── */
.fx-boot {
  position: fixed; inset: 0; z-index: 9999;
  background: #02030a;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  transition: opacity .6s ease, visibility .6s ease;
}
.fx-boot.fx-boot-done { opacity: 0; visibility: hidden; pointer-events: none; }
.fx-boot-inner { width: min(520px, 86vw); }
.fx-boot-brand {
  font-size: .72rem; letter-spacing: 4px; color: var(--accent);
  margin-bottom: 18px; text-transform: uppercase;
}
.fx-boot-log { font-size: .78rem; line-height: 2; min-height: 128px; color: #64748b; }
.fx-boot-log .ok { color: #10b981; }
.fx-boot-log .hot { color: #ef4444; }
.fx-boot-log .acc { color: var(--accent); }
.fx-boot-bar {
  margin-top: 18px; height: 2px; border-radius: 2px;
  background: rgba(168, 85, 247, .15); overflow: hidden;
}
.fx-boot-bar i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), #ec4899, #22d3ee);
  transition: width .25s ease;
}
.fx-boot-pct {
  margin-top: 8px; font-size: .68rem; color: #475569;
  display: flex; justify-content: space-between; letter-spacing: 1px;
}

/* ─────────────────────────────────────────────────────────
   2. SCROLL PROGRESS BAR
   ───────────────────────────────────────────────────────── */
.fx-progress {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 999;
  width: 100%; transform-origin: 0 50%;
  transform: scaleX(var(--fx-p, 0));
  background: linear-gradient(90deg, #ff9933, var(--accent), #ec4899, #22d3ee);
  box-shadow: 0 0 12px var(--accent-glow);
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────
   3. HERO HEADLINE SCRAMBLE
   ───────────────────────────────────────────────────────── */
.text-weapon-mallu .fx-sc { opacity: .55; }

/* ─────────────────────────────────────────────────────────
   4. HERO TAG GLITCH CYCLE
   ───────────────────────────────────────────────────────── */
.hero-tags .tag { transition: transform .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease; }
.hero-tags .tag.fx-hot {
  color: #fff; border-color: var(--accent);
  box-shadow: 0 0 20px var(--accent-glow), inset 0 0 12px rgba(168, 85, 247, .2);
  transform: translateY(-2px) scale(1.05);
}

/* ─────────────────────────────────────────────────────────
   5. LIVE THREAT MARQUEE (injected after .features)
   ───────────────────────────────────────────────────────── */
.fx-ticker {
  position: relative; overflow: hidden;
  margin: 0 auto 60px; max-width: 1240px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: rgba(8, 12, 26, .5); backdrop-filter: blur(10px);
  padding: 12px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.fx-ticker-track {
  display: flex; gap: 40px; width: max-content;
  animation: fxTickerScroll 42s linear infinite;
}
.fx-ticker:hover .fx-ticker-track { animation-play-state: paused; }
@keyframes fxTickerScroll { to { transform: translateX(-50%); } }
.fx-ticker-item {
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
  font-family: 'JetBrains Mono', monospace; font-size: .74rem; color: var(--text-dim);
}
.fx-ticker-item b { color: #fff; font-weight: 700; }
.fx-sev {
  font-size: .6rem; font-weight: 700; letter-spacing: .5px;
  padding: 2px 7px; border-radius: 4px;
  border: 1px solid currentColor;
}
.fx-sev.crit { color: #ef4444; background: rgba(239, 68, 68, .1); }
.fx-sev.high { color: #f97316; background: rgba(249, 115, 22, .1); }
.fx-sev.med  { color: #eab308; background: rgba(234, 179, 8, .1); }

/* ─────────────────────────────────────────────────────────
   6. ANIMATED STAT COUNTERS
   ───────────────────────────────────────────────────────── */
.fx-stats {
  max-width: 1240px; margin: 0 auto 70px; padding: 0 24px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.fx-stat {
  position: relative; overflow: hidden; text-align: center;
  background: rgba(8, 12, 26, .6); border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 16px; padding: 28px 16px; backdrop-filter: blur(14px);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.fx-stat:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--c, #a855f7) 50%, transparent);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5), 0 0 34px color-mix(in srgb, var(--c, #a855f7) 28%, transparent);
}
.fx-stat::before {
  content: ""; position: absolute; top: -50px; left: 50%; transform: translateX(-50%);
  width: 140px; height: 100px; border-radius: 50%;
  background: radial-gradient(circle, var(--c, #a855f7), transparent 70%);
  opacity: .18; transition: opacity .35s ease;
}
.fx-stat:hover::before { opacity: .38; }
.fx-stat-num {
  position: relative; font-size: 2.4rem; font-weight: 900; line-height: 1;
  font-family: 'JetBrains Mono', monospace; color: #fff;
  text-shadow: 0 0 24px color-mix(in srgb, var(--c, #a855f7) 55%, transparent);
}
.fx-stat-label {
  position: relative; margin-top: 10px; font-size: .74rem; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--text-dim);
}

/* ─────────────────────────────────────────────────────────
   7. LIVE SCAN TERMINAL (injected into .ai-visual)
   ───────────────────────────────────────────────────────── */
.fx-term {
  margin-top: 28px; width: 100%; max-width: 420px;
  background: rgba(2, 4, 14, .88); border: 1px solid rgba(168, 85, 247, .22);
  border-radius: 14px; overflow: hidden; backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55), 0 0 40px rgba(168, 85, 247, .12);
}
.fx-term-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .025);
}
.fx-term-bar i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.fx-term-bar i:nth-child(1) { background: #ef4444; }
.fx-term-bar i:nth-child(2) { background: #eab308; }
.fx-term-bar i:nth-child(3) { background: #10b981; }
.fx-term-bar span {
  margin-left: 8px; font-family: 'JetBrains Mono', monospace;
  font-size: .66rem; letter-spacing: 1px; color: #475569;
}
.fx-term-body {
  padding: 14px 16px; height: 200px; overflow: hidden;
  font-family: 'JetBrains Mono', monospace; font-size: .72rem; line-height: 1.95;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.fx-term-body div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-term-body .dim  { color: #475569; }
.fx-term-body .info { color: #94a3b8; }
.fx-term-body .warn { color: #f97316; }
.fx-term-body .crit { color: #ef4444; }
.fx-term-body .acc  { color: var(--accent); }
.fx-term-body .ok   { color: #10b981; }
.fx-caret {
  display: inline-block; width: 7px; height: 12px; vertical-align: -1px;
  background: currentColor; animation: fxBlink .9s steps(1) infinite;
}
@keyframes fxBlink { 50% { opacity: 0; } }

/* ─────────────────────────────────────────────────────────
   8. MAGNETIC BUTTONS
   ───────────────────────────────────────────────────────── */
.btn-primary, .btn-secondary {
  will-change: transform;
  transition: transform .25s cubic-bezier(.2, .8, .3, 1), box-shadow .3s ease;
}
.btn-primary.fx-mag, .btn-secondary.fx-mag { transition: transform .08s linear, box-shadow .3s ease; }

/* ─────────────────────────────────────────────────────────
   9. SECTION TITLE SCAN-LINE REVEAL
   ───────────────────────────────────────────────────────── */
.section-title { position: relative; }
.section-title.fx-scan::after {
  content: ""; position: absolute; left: -6px; right: -6px; top: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, .55), rgba(255, 255, 255, .7), transparent);
  mix-blend-mode: screen; pointer-events: none;
  animation: fxTitleScan 1.1s ease-out forwards;
}
@keyframes fxTitleScan {
  from { transform: translateX(-110%); opacity: 1; }
  to   { transform: translateX(110%);  opacity: 0; }
}

/* ─────────────────────────────────────────────────────────
   10. AI CORE — pulse rings
   ───────────────────────────────────────────────────────── */
.fx-pulse-ring {
  position: absolute; top: 50%; left: 50%;
  width: 120px; height: 120px; margin: -60px 0 0 -60px;
  border: 1px solid rgba(168, 85, 247, .5); border-radius: 50%;
  pointer-events: none; opacity: 0;
  animation: fxPulseRing 3.6s ease-out infinite;
}
.fx-pulse-ring:nth-of-type(2) { animation-delay: 1.2s; }
.fx-pulse-ring:nth-of-type(3) { animation-delay: 2.4s; }
@keyframes fxPulseRing {
  0%   { transform: scale(.5); opacity: .85; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* ─────────────────────────────────────────────────────────
   RESPONSIVE + REDUCED MOTION
   ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .fx-stats { grid-template-columns: repeat(2, 1fr); }
  .fx-stat-num { font-size: 1.9rem; }
}
@media (max-width: 720px) {
  .fx-term { max-width: 100%; }
  .fx-term-body { height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-ticker-track, .fx-pulse-ring, .fx-caret { animation: none !important; }
  .section-title.fx-scan::after { display: none; }
  .fx-boot { display: none; }
}