/* =========================================================
   SOLAR NEXUS — ANIMATIONS
   Loader, charge flash, wire flow, border flow, modals
   ========================================================= */

/* ---- Page loader ---- */
.page-loader {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: #060B18;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.page-loader.hide { opacity: 0; visibility: hidden; }
.loader-bolt {
  width: 64px; height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--green-emerald), var(--blue-deep));
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.6rem;
  box-shadow: 0 0 40px var(--glow-green);
  animation: bolt-pulse 1.1s ease-in-out infinite;
}
@keyframes bolt-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 24px var(--glow-green); }
  50% { transform: scale(1.12); box-shadow: 0 0 52px var(--glow-blue); }
}

/* ---- Charge flash (cards receiving "electricity") ---- */
.charge-flash { animation: charge-flash-anim 0.9s ease-out 1; }
@keyframes charge-flash-anim {
  0% { box-shadow: 0 0 0 0 rgba(61,242,228,0.55); }
  60% { box-shadow: 0 0 34px 6px rgba(61,242,228,0.35); }
  100% { box-shadow: 0 0 0 0 rgba(61,242,228,0); }
}

/* ---- Wire flow (CSS fallback when GSAP is absent) ---- */
.wire-path { stroke-linecap: round; }
.wire-pulse {
  stroke-dasharray: 14 26;
  animation: wire-flow 2.4s linear infinite;
  filter: drop-shadow(0 0 6px currentColor);
}
@keyframes wire-flow {
  to { stroke-dashoffset: -40; }
}

/* ---- Border flow accent ---- */
.border-flow { position: relative; }
.border-flow::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 60px; height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green-emerald), var(--cyan-electric));
  animation: border-slide 3.2s ease-in-out infinite;
}
@keyframes border-slide {
  0%, 100% { transform: translateX(0); opacity: 0.9; }
  50% { transform: translateX(120px); opacity: 0.4; }
}

/* ---- Modals ---- */
.nexus-modal-backdrop {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(6,11,24,0.6);
  backdrop-filter: blur(6px);
  z-index: 3500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.nexus-modal-backdrop.show { opacity: 1; visibility: visible; }
.nexus-modal {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 40px 34px;
  max-width: 440px;
  width: 100%;
  position: relative;
  box-shadow: var(--shadow-soft);
  transform: translateY(16px) scale(0.97);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
}
.nexus-modal-backdrop.show .nexus-modal { transform: translateY(0) scale(1); }
.nexus-modal .close-modal {
  position: absolute;
  top: 16px; right: 16px;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(11,18,32,0.06);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}

/* ---- Generic fade-up default (GSAP enhances) ---- */
.gsap-fade-up { will-change: transform, opacity; }