/* ============================================================
   GLOW.CSS — Neon, Electric, Rainbow & Scanline Overlays
   ============================================================ */

/* ── Scanline Overlay ── */
.scanlines-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  background:
    /* horizontal scanlines */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.025) 2px,
      rgba(0, 0, 0, 0.025) 4px
    ),
    /* diagonal scanlines */
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 3px,
      rgba(0, 229, 255, 0.015) 3px,
      rgba(0, 229, 255, 0.015) 6px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 3px,
      rgba(180, 77, 255, 0.015) 3px,
      rgba(180, 77, 255, 0.015) 6px
    );
  mix-blend-mode: overlay;
}

/* ── Light Sweep Overlay ── */
.light-sweep {
  position: fixed;
  inset: 0;
  z-index: 9991;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(0, 229, 255, 0.1) 42%,
    rgba(255, 255, 255, 0.2) 48%,
    rgba(0, 229, 255, 0.1) 54%,
    transparent 60%
  );
  animation: light-sweep-move 3s ease-in-out infinite;
  opacity: 1;
}

@keyframes light-sweep-move {
  0%, 100% { transform: translateX(-100%) skewX(-15deg); opacity: 0; }
  8%       { opacity: 1; }
  25%      { opacity: 0; }
  55%      { transform: translateX(120%) skewX(-15deg); opacity: 0; }
}

/* ── Scroll Progress Bar — Rainbow ── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 8px;
  background: var(--grad-rainbow);
  background-size: 200% 100%;
  z-index: 10000;
  box-shadow:
    0 0 45px var(--glow-cyan),
    0 0 90px var(--glow-purple),
    0 0 180px var(--glow-blue);
  animation: scroll-bar-rainbow 1.5s linear infinite;
  transition: width 0.1s linear;
  border-radius: 0 3px 3px 0;
}

@keyframes scroll-bar-rainbow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ── Glow Text Utilities ── */
.glow-text-blue {
  text-shadow:
    0 0 45px rgba(77, 166, 255, 0.7),
    0 0 120px rgba(77, 166, 255, 0.5),
    0 0 240px rgba(77, 166, 255, 0.3),
    0 0 450px rgba(0, 229, 255, 0.2);
}

.glow-text-cyan {
  text-shadow:
    0 0 45px rgba(0, 229, 255, 0.7),
    0 0 120px rgba(0, 229, 255, 0.5),
    0 0 240px rgba(0, 229, 255, 0.3),
    0 0 450px rgba(0, 229, 255, 0.2);
}

.glow-text-rainbow {
  text-shadow:
    0 0 30px rgba(255, 92, 176, 0.6),
    0 0 75px rgba(180, 77, 255, 0.5),
    0 0 150px rgba(0, 229, 255, 0.4),
    0 0 300px rgba(0, 255, 160, 0.3);
}

/* ── Box Glow Utilities ── */
.glow-box-blue   { box-shadow: 0 0 120px rgba(77, 166, 255, 0.3), 0 0 240px rgba(77, 166, 255, 0.15), 0 0 450px rgba(0, 229, 255, 0.1); }
.glow-box-purple { box-shadow: 0 0 120px rgba(180, 77, 255, 0.3), 0 0 240px rgba(180, 77, 255, 0.15), 0 0 450px rgba(180, 77, 255, 0.1); }
.glow-box-rainbow{ box-shadow: 0 0 90px rgba(0, 229, 255, 0.3), 0 0 180px rgba(180, 77, 255, 0.2), 0 0 300px rgba(255, 92, 176, 0.15); }

/* ── Pulse Glow — Stronger ── */
.pulse-glow {
  animation: pulse-glow-anim 2.5s ease-in-out infinite;
}

@keyframes pulse-glow-anim {
  0%, 100% { box-shadow: 0 0 20px var(--glow-blue), 0 0 40px var(--glow-cyan); }
  50%      { box-shadow: 0 0 50px var(--glow-cyan), 0 0 100px var(--glow-purple), 0 0 200px var(--glow-blue); }
}

/* ── Electric Border (hover effect) ── */
.electric-border {
  position: relative;
}

.electric-border::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: var(--grad-electric);
  background-size: 300% 300%;
  z-index: -1;
  animation: electric-shift 1s linear infinite;
  filter: blur(8px);
  opacity: 0.6;
  transition: opacity 0.2s;
}

.electric-border:hover::before,
.electric-border:focus-within::before {
  opacity: 1;
}

@keyframes electric-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Rainbow Border Animation ── */
.rainbow-border {
  position: relative;
}

.rainbow-border::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--grad-rainbow);
  background-size: 400% 400%;
  z-index: -1;
  animation: rainbow-spin 2s linear infinite;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.rainbow-border:hover::after {
  opacity: 1;
}

@keyframes rainbow-spin {
  0%   { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}

/* ── Holographic Shimmer ── */
.holo-shimmer {
  position: relative;
  overflow: hidden;
}

.holo-shimmer::after {
  content: '';
  position: absolute;
  inset: -50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(0, 229, 255, 0.12) 45deg,
    rgba(180, 77, 255, 0.12) 90deg,
    rgba(255, 92, 176, 0.12) 135deg,
    transparent 180deg,
    rgba(0, 255, 160, 0.12) 225deg,
    rgba(0, 229, 255, 0.12) 270deg,
    rgba(180, 77, 255, 0.12) 315deg,
    transparent 360deg
  );
  animation: holo-rotate 3s linear infinite;
  pointer-events: none;
  z-index: 1;
  opacity: 0.35;
  transition: opacity 0.2s;
}

.holo-shimmer:hover::after {
  opacity: 0.7;
}

@keyframes holo-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Floating Particles (CSS-only) ── */
.float-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: particle-float 6s ease-in-out infinite;
}

@keyframes particle-float {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0; }
  15%      { opacity: 1; }
  50%      { transform: translate(30px, -40px) scale(1.5); opacity: 0.9; }
  85%      { opacity: 0.3; }
}

/* ── Energy Line Divider ── */
.energy-divider {
  position: relative;
  height: 6px;
  background: var(--grad-rainbow);
  background-size: 300% 100%;
  animation: rainbow-spin 3s linear infinite;
  border-radius: 3px;
  box-shadow:
    0 0 15px var(--glow-cyan),
    0 0 45px var(--glow-purple),
    0 0 90px var(--glow-blue);
  margin: 0 auto;
  max-width: 600px;
}

/* ── Chromatic Aberration ── */
.chromatic-aberration {
  text-shadow:
    0.06em 0 0 rgba(255, 0, 0, 0.7),
    -0.06em -0.02em 0 rgba(0, 255, 255, 0.7),
    0.1em 0.04em 0 rgba(0, 0, 255, 0.4),
    -0.06em 0 0 rgba(0, 255, 0, 0.4);
  animation: chromatic-drift 0.15s infinite steps(1);
}

@keyframes chromatic-drift {
  0%   { text-shadow: 0.06em 0 0 rgba(255, 0, 0, 0.7), -0.06em -0.02em 0 rgba(0, 255, 255, 0.7), 0.1em 0.04em 0 rgba(0, 0, 255, 0.4), -0.06em 0 0 rgba(0, 255, 0, 0.4); }
  25%  { text-shadow: -0.04em 0.02em 0 rgba(255, 0, 0, 0.6), 0.08em -0.02em 0 rgba(0, 255, 255, 0.6), -0.06em 0.04em 0 rgba(0, 0, 255, 0.3), 0.06em 0 0 rgba(0, 255, 0, 0.3); }
  50%  { text-shadow: 0.08em -0.02em 0 rgba(255, 0, 0, 0.8), -0.06em 0.02em 0 rgba(0, 255, 255, 0.8), 0.06em -0.02em 0 rgba(0, 0, 255, 0.5), -0.08em 0.02em 0 rgba(0, 255, 0, 0.5); }
  75%  { text-shadow: -0.06em 0.02em 0 rgba(255, 0, 0, 0.5), 0.1em 0 0 rgba(0, 255, 255, 0.5), -0.04em -0.02em 0 rgba(0, 0, 255, 0.4), 0.04em -0.02em 0 rgba(0, 255, 0, 0.4); }
  100% { text-shadow: 0.06em 0 0 rgba(255, 0, 0, 0.7), -0.06em -0.02em 0 rgba(0, 255, 255, 0.7), 0.1em 0.04em 0 rgba(0, 0, 255, 0.4), -0.06em 0 0 rgba(0, 255, 0, 0.4); }
}

/* ── Strobe ── */
.strobe {
  animation: strobe-flicker 0.1s steps(1) infinite;
}

@keyframes strobe-flicker {
  0%   { opacity: 1; }
  25%  { opacity: 0; }
  50%  { opacity: 1; }
  75%  { opacity: 0; }
  100% { opacity: 1; }
}

/* ── Insane Glow — 6-layer box-shadow breathing ── */
.insane-glow {
  animation: insane-breath 1s ease-in-out infinite;
  box-shadow:
    0 0 20px var(--glow-cyan),
    0 0 60px var(--glow-purple),
    0 0 120px var(--glow-pink),
    0 0 200px var(--glow-orange),
    0 0 300px var(--glow-blue),
    0 0 500px var(--glow-green);
}

@keyframes insane-breath {
  0%, 100% {
    box-shadow:
      0 0 20px var(--glow-cyan),
      0 0 60px var(--glow-purple),
      0 0 120px var(--glow-pink),
      0 0 200px var(--glow-orange),
      0 0 300px var(--glow-blue),
      0 0 500px var(--glow-green);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 40px var(--glow-cyan),
      0 0 120px var(--glow-purple),
      0 0 240px var(--glow-pink),
      0 0 400px var(--glow-orange),
      0 0 600px var(--glow-blue),
      0 0 1000px var(--glow-green);
    transform: scale(1.02);
  }
}