/* ============================================================
   Asta AI — Visual Effects Layer (effects.css)
   Self-contained. Adds visuals over existing layout.
   Electric blue: #38BDF8  | Amber: #F59E0B
   ============================================================ */

/* ---------- 0. ROOT TOKENS & CUSTOM PROPS ---------- */
:root {
  --fx-blue: #38BDF8;
  --fx-blue-strong: #0EA5E9;
  --fx-amber: #F59E0B;
  --fx-blue-glow: rgba(56, 189, 248, 0.55);
}
@property --fx-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ---------- 1. HEXAGONAL BACKGROUND GRID ---------- */
.fx-hex-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='48' viewBox='0 0 56 48'><path d='M14 0 L42 0 L56 24 L42 48 L14 48 L0 24 Z' fill='none' stroke='%2338BDF8' stroke-width='0.6'/></svg>");
  background-size: 56px 48px;
  background-repeat: repeat;
  animation: fxHexDrift 40s linear infinite;
  mix-blend-mode: screen;
}
@keyframes fxHexDrift {
  from { background-position: 0 0; }
  to   { background-position: 0 -480px; }
}
body > * { position: relative; z-index: 1; }

/* ---------- 2. RADAR SWEEP ---------- */
.fx-radar {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9990;
  overflow: hidden;
}
.fx-radar::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 250%;
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, var(--fx-blue) 50%, transparent 100%);
  box-shadow: 0 0 14px var(--fx-blue-glow);
  transform: rotate(28deg) translateY(0);
  opacity: 0;
  animation: fxRadarSweep 20s linear infinite;
}
@keyframes fxRadarSweep {
  0%   { transform: rotate(28deg) translateY(-60vh); opacity: 0; }
  3%   { opacity: 0.85; }
  8%   { transform: rotate(28deg) translateY(160vh); opacity: 0; }
  100% { transform: rotate(28deg) translateY(160vh); opacity: 0; }
}

/* ---------- 3. SCROLL PROGRESS LINE ---------- */
.fx-scroll-track {
  position: fixed;
  top: 0;
  left: 0;
  width: 2px;
  height: 100vh;
  background: rgba(56, 189, 248, 0.08);
  z-index: 9995;
  pointer-events: none;
}
.fx-scroll-bar {
  width: 100%;
  height: 0%;
  background: var(--fx-blue);
  box-shadow: 0 0 10px var(--fx-blue-glow), 0 0 20px var(--fx-blue-glow);
  transition: height 80ms linear;
}

/* ---------- 4. LOADING SCREEN ---------- */
.fx-loader {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 600ms ease;
}
.fx-loader.fx-fade { opacity: 0; }
.fx-loader-stage {
  position: relative;
  width: 320px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fx-loader-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 18px rgba(255,255,255,0.9);
  animation: fxLoaderPulse 0.55s ease-in-out 3;
}
@keyframes fxLoaderPulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(2.2); opacity: 0.55; }
}
.fx-loader-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 18px;
  opacity: 0;
  pointer-events: none;
}
.fx-loader-grid.fx-on { opacity: 1; animation: fxGridFade 700ms ease forwards; }
.fx-loader-grid span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  align-self: center;
  justify-self: center;
  transform: translate(var(--gx,0), var(--gy,0)) scale(0);
  animation: fxGridForm 600ms cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes fxGridForm {
  0%   { transform: translate(var(--gx), var(--gy)) scale(0); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.9; }
}
@keyframes fxGridFade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- 5. HERO DECRYPTION ---------- */
.fx-decrypt-char { display: inline-block; white-space: pre; }

/* ---------- 6. HERO WIREFRAME (index only, JS-mounted canvas) ---------- */
.fx-wireframe {
  position: absolute;
  top: 50%;
  right: -40px;
  transform: translateY(-50%);
  width: 520px;
  height: 520px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.45;
}
.fx-wireframe canvas { width: 100% !important; height: 100% !important; }
@media (max-width: 980px) {
  .fx-wireframe { width: 320px; height: 320px; right: 50%; transform: translate(50%, -50%); top: 38%; opacity: 0.22; z-index: 0; }
}
@media (max-width: 640px) {
  .fx-wireframe { width: 240px; height: 240px; opacity: 0.18; }
}

/* ---------- 7. CARD RIPPLE + LIFT + ROTATING BORDER ---------- */
.fx-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 240ms ease, box-shadow 240ms ease;
}
.fx-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--fx-angle), var(--fx-blue) 0deg, transparent 90deg, var(--fx-amber) 180deg, transparent 270deg, var(--fx-blue) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0.5;
  pointer-events: none;
  z-index: 2;
  animation: fxBorderSpin 8s linear infinite;
}
@keyframes fxBorderSpin {
  to { --fx-angle: 360deg; }
}
.fx-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px rgba(56,189,248,0.5), 0 8px 20px -12px rgba(0,0,0,0.6);
}
.fx-card .fx-ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,0.45) 0%, rgba(56,189,248,0.15) 40%, transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  z-index: 1;
  animation: fxRipple 700ms ease-out forwards;
}
@keyframes fxRipple {
  to { transform: translate(-50%, -50%) scale(8); opacity: 0; }
}

/* ---------- 8. GLITCH NUMBER ---------- */
.fx-glitch { display: inline-block; will-change: contents; }
.fx-glitch.fx-on { color: var(--fx-blue); text-shadow: 0 0 10px var(--fx-blue-glow); }

/* ---------- 9. SECTION SCAN-IN (eyebrow / h2 / body) ---------- */
.fx-section-init .eyebrow,
.fx-section-init .section-label,
.fx-section-init h2,
.fx-section-init .fx-body { opacity: 0; }

.fx-section-show .eyebrow,
.fx-section-show .section-label {
  position: relative;
  display: inline-block;
  opacity: 1;
  animation: fxScanIn 700ms ease forwards;
  background: linear-gradient(90deg, transparent 0%, var(--fx-blue) 50%, transparent 100%) no-repeat;
  background-size: 0% 100%;
  background-position: left center;
  animation: fxLabelScan 700ms ease forwards;
}
@keyframes fxLabelScan {
  0%   { opacity: 0; background-size: 0% 100%; }
  40%  { opacity: 1; background-size: 100% 100%; }
  100% { opacity: 1; background-size: 0% 100%; background-position: right center; }
}
.fx-section-show h2 {
  opacity: 1;
  animation: fxSlideIn 500ms 200ms cubic-bezier(.2,.8,.2,1) backwards;
}
@keyframes fxSlideIn {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
.fx-section-show .fx-body {
  opacity: 1;
  animation: fxFadeUp 600ms 400ms ease backwards;
}
@keyframes fxFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 10. DIVIDER LIGHT TRAVEL (rides existing section dividers) ---------- */
.section + .section,
.content-band + .content-band,
.section + .content-band,
.content-band + .section,
.section + .governance-band,
.governance-band + .section { position: relative; }

.section + .section::after,
.content-band + .content-band::after,
.section + .content-band::after,
.content-band + .section::after,
.section + .governance-band::after,
.governance-band + .section::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 10%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--fx-blue);
  box-shadow: 0 0 8px var(--fx-blue), 0 0 16px var(--fx-blue-glow);
  pointer-events: none;
  animation: fxDividerTravel 6s linear infinite;
}
@keyframes fxDividerTravel {
  0%   { left: 10%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 90%; opacity: 0; }
}

/* ---------- 11. NAV EFFECTS ---------- */
.nav-links { transition: opacity 200ms ease; }
.nav-links:hover a { opacity: 0.4; transition: opacity 200ms ease; }
.nav-links:hover a:hover { opacity: 1; }
.nav-links a[aria-current="page"] {
  position: relative;
}
.nav-links a[aria-current="page"]::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--fx-blue);
  box-shadow: 0 0 6px var(--fx-blue), 0 0 12px var(--fx-blue-glow);
  animation: fxNavDotPulse 2.4s ease-in-out infinite;
}
@keyframes fxNavDotPulse {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.25); }
}
.brand { position: relative; }
.brand.fx-rgb-glitch { animation: fxRgbSplit 300ms steps(3, end); }
@keyframes fxRgbSplit {
  0%   { text-shadow: none; filter: none; }
  33%  { text-shadow: -2px 0 #ff003c, 2px 0 #00e0ff, 0 0 0 #fff; }
  66%  { text-shadow: 2px 0 #ff003c, -2px 0 #00e0ff; }
  100% { text-shadow: none; filter: none; }
}

/* ---------- 12. FORM INPUT BORDER LIGHT + BUTTON PULSE ---------- */
.contact-form input,
.contact-form textarea,
.contact-form select { position: relative; }

.fx-input-wrap {
  position: relative;
  display: block;
}
.fx-input-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: conic-gradient(from var(--fx-angle, 0deg),
    var(--fx-blue) 0deg, var(--fx-blue) 30deg,
    transparent 30deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.fx-input-wrap.fx-traveling::before {
  opacity: 1;
  animation: fxBorderTravel 600ms linear forwards;
}
.fx-input-wrap.fx-active::before {
  opacity: 1;
  background: linear-gradient(0deg, var(--fx-blue), var(--fx-blue));
  animation: none;
  box-shadow: 0 0 12px var(--fx-blue-glow);
}
@keyframes fxBorderTravel {
  0%   { --fx-angle: 0deg; }
  100% { --fx-angle: 360deg; }
}

.contact-form button[type="submit"],
.contact-form .button-primary,
.contact-form button.primary {
  position: relative;
  overflow: visible;
}
.contact-form button[type="submit"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--fx-blue);
  opacity: 0;
  pointer-events: none;
  animation: fxButtonPulse 2s ease-out infinite;
}
@keyframes fxButtonPulse {
  0%   { transform: scale(1);    opacity: 0.6; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* ---------- MOBILE: disable heaviest effects ---------- */
@media (max-width: 768px) {
  .fx-hex-bg { opacity: 0.10; animation-duration: 60s; }
  .fx-radar { display: none; }
  .fx-card::before { display: none; } /* skip rotating border for perf */
  .fx-card:hover { transform: none; }
  .section + .section::after,
  .content-band + .content-band::after,
  .section + .content-band::after,
  .content-band + .section::after { animation-duration: 8s; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fx-hex-bg, .fx-radar::before, .fx-card::before,
  .nav-links a[aria-current="page"]::before,
  .section + .section::after, .content-band + .content-band::after,
  .section + .content-band::after, .content-band + .section::after,
  .contact-form button[type="submit"]::after { animation: none !important; }
  .fx-loader { display: none !important; }
}

/* ============================================================
   BATCH 2 — Additional Visual Effects (append only)
   ============================================================ */

/* B2-1. HERO WAVEFORM canvas */
.fx-waveform {
  display: block;
  width: 200px;
  height: 40px;
  margin: 28px auto 0;
  opacity: 0.85;
  pointer-events: none;
}

/* B2-2. DEEP TERMINAL BACKGROUND in hero */
.fx-terminal {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  opacity: 0.10;
  filter: blur(0.6px);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  line-height: 1.6;
  color: #38BDF8;
}
.fx-terminal-stream {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  white-space: pre;
  animation: fxTerminalScroll 60s linear infinite;
}
@keyframes fxTerminalScroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-200%); }
}

/* B2-3. RADIAL AMBIENT GLOW */
.fx-glow {
  position: fixed;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(35, 103, 255, 0.18) 0%, rgba(56, 189, 248, 0.08) 30%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(40px);
  top: 50%;
  left: 50%;
  margin-top: -450px;
  margin-left: -450px;
  animation: fxGlowDrift 32s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes fxGlowDrift {
  0%   { transform: translate(-30vw, -10vh); }
  25%  { transform: translate( 25vw, -25vh); }
  50%  { transform: translate( 30vw,  20vh); }
  75%  { transform: translate(-25vw,  25vh); }
  100% { transform: translate(-30vw, -10vh); }
}

/* B2-4. H2 BREATHING UNDERLINE */
h2 { position: relative; }
h2::after {
  content: "";
  display: block;
  height: 2px;
  margin: 14px auto 0;
  background: var(--fx-blue);
  box-shadow: 0 0 8px var(--fx-blue-glow), 0 0 16px var(--fx-blue-glow);
  border-radius: 2px;
  width: 0;
  animation: fxH2Breathe 4s ease-in-out infinite;
}
@keyframes fxH2Breathe {
  0%, 100% { width: 30px; opacity: 0.7; }
  50%      { width: 110px; opacity: 1; }
}

/* B2-5. STAT CARD GEOMETRY */
.stat-card { position: relative; overflow: hidden; }
.stat-card .fx-geo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;
  height: 180px;
  margin: -90px 0 0 -90px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.12;
  animation: fxGeoSpin 24s linear infinite;
}
.stat-card > *:not(.fx-geo) { position: relative; z-index: 1; }
@keyframes fxGeoSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* B2-6. CHROMATIC ABERRATION on H2 entry (one-shot) */
@keyframes fxChroma {
  0%   { text-shadow: -3px 0 #ff003c, 3px 0 #00e0ff; opacity: 0.7; }
  40%  { text-shadow:  3px 0 #ff003c,-3px 0 #00e0ff; opacity: 0.9; }
  100% { text-shadow: 0 0 0 transparent; opacity: 1; }
}
.fx-section-show h2.fx-chroma { animation: fxSlideIn 500ms 200ms cubic-bezier(.2,.8,.2,1) backwards, fxChroma 400ms 700ms ease forwards; }

/* B2-7. PARTICLE DRIFT canvas */
.fx-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

/* B2-9. KEY WORD GLOW */
.fx-keyword {
  display: inline-block;
  animation: fxKeywordGlow 3s ease-in-out infinite;
}
@keyframes fxKeywordGlow {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50%      { text-shadow: 0 0 8px var(--fx-blue), 0 0 18px var(--fx-blue-glow); }
}

/* B2-11. BUTTON ENERGY FIELD */
.fx-energy-host { position: relative; }
.fx-energy-host .fx-orbit {
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--fx-blue);
  box-shadow: 0 0 6px var(--fx-blue), 0 0 12px var(--fx-blue-glow);
  margin: -3px 0 0 -3px;
  pointer-events: none;
  --rx: 90px; --ry: 32px; --dur: 3.4s; --delay: 0s;
  animation: fxOrbit var(--dur) linear infinite;
  animation-delay: var(--delay);
}
@keyframes fxOrbit {
  from { transform: rotate(0deg) translate(var(--rx), 0) rotate(0deg); }
  to   { transform: rotate(360deg) translate(var(--rx), 0) rotate(-360deg); }
}
@media (max-width: 768px) {
  .fx-energy-host .fx-orbit { display: none; }
  .fx-energy-host {
    box-shadow: 0 0 0 0 var(--fx-blue-glow);
    animation: fxBtnPulseMobile 2s ease-out infinite;
  }
  @keyframes fxBtnPulseMobile {
    0%   { box-shadow: 0 0 0 0 rgba(56,189,248,0.55); }
    100% { box-shadow: 0 0 0 14px rgba(56,189,248,0); }
  }
}

/* MOBILE perf tuning for batch 2 */
@media (max-width: 768px) {
  .fx-glow { width: 600px; height: 600px; margin-top: -300px; margin-left: -300px; opacity: 0.7; }
  .fx-terminal { display: none; }
  .fx-particles { opacity: 0.35; }
  h2::after { animation-duration: 5s; }
  .stat-card .fx-geo { width: 130px; height: 130px; margin: -65px 0 0 -65px; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-glow, .fx-terminal-stream, .fx-particles, .fx-waveform,
  .stat-card .fx-geo, .fx-keyword, h2::after,
  .fx-energy-host .fx-orbit { animation: none !important; display: none !important; }
}