/* effects.css — ambient effects: scanlines, drift keyframes, animations */

/* ── H1 pulse (the H1's outer-glow alpha breathes) ── */
@keyframes h1-pulse {
  0%, 100% {
    text-shadow:
      -2px 0 var(--neon-green-hi),
      2px 0 var(--neon-green),
      0 0 8px  rgba(207, 255, 4, 0.50),
      0 0 24px rgba(207, 255, 4, 0.28);
  }
  50% {
    text-shadow:
      -2px 0 var(--neon-green-hi),
      2px 0 var(--neon-green),
      0 0 14px rgba(207, 255, 4, 0.85),
      0 0 44px rgba(207, 255, 4, 0.50);
  }
}

/* ── H1 transmission glitch (rare, triggered via .glitching class) ──
   Animates only `transform`, so it stacks with the existing h1-pulse
   (which animates text-shadow) without conflict. The keyframes use
   steps(1) timing for an abrupt "signal interference" feel. */
@keyframes h1-glitch {
  0%   { transform: translate(0, 0); }
  12%  { transform: translate(5px, -1px); }
  25%  { transform: translate(-4px, 1px); }
  37%  { transform: translate(7px, 0); }
  50%  { transform: translate(-3px, -1px); }
  62%  { transform: translate(4px, 0); }
  75%  { transform: translate(-5px, 0); }
  87%  { transform: translate(2px, -1px); }
  100% { transform: translate(0, 0); }
}

.hero-title.glitching {
  /* stack the pulse + the glitch; glitch runs once and finishes. */
  animation:
    h1-pulse 4s var(--easing) infinite,
    h1-glitch 320ms steps(1, end) 1;
}

/* ── "Stay Tuned" indicator blink ── */
@keyframes soon-blink {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1;    }
}

/* ── Floater drift (used by floaters.js) ── */
@keyframes drift-left {
  from { transform: translate3d(110vw, 0, 0); }
  to   { transform: translate3d(-12vw, 0, 0); }
}

@keyframes drift-right {
  from { transform: translate3d(-12vw, 0, 0); }
  to   { transform: translate3d(110vw, 0, 0); }
}

/* ── Nebula orbs (slow drift) ── */
@keyframes nebula-drift-1 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(120px, 90px, 0); }
}
@keyframes nebula-drift-2 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(-100px, -120px, 0); }
}
@keyframes nebula-drift-3 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(70px, -80px, 0); }
}

/* ── Comet streaks (shooting stars) ── */
@keyframes comet-streak-1 {
  0%   { transform: translate3d(0,     0,   0); opacity: 0; }
  4%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translate3d(calc(100vw + 440px), 90px, 0); opacity: 0; }
}
@keyframes comet-streak-2 {
  0%   { transform: translate3d(0,     0,    0); opacity: 0; }
  4%   { opacity: 0.8; }
  88%  { opacity: 0.8; }
  100% { transform: translate3d(calc(100vw + 440px), -60px, 0); opacity: 0; }
}
@keyframes comet-streak-3 {
  0%   { transform: translate3d(0,     0,   0); opacity: 0; }
  4%   { opacity: 0.95; }
  88%  { opacity: 0.95; }
  100% { transform: translate3d(calc(100vw + 440px), 50px, 0); opacity: 0; }
}

/* Floater element itself */
.floater {
  position: absolute;
  will-change: transform;
  pointer-events: none;
  image-rendering: pixelated;
}

.floater svg {
  width: 100%;
  height: 100%;
  shape-rendering: crispEdges;
}

/* ── Scanline overlay (full-page) ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 2px,
    rgba(0, 0, 0, 0.06) 2px,
    rgba(0, 0, 0, 0.06) 4px
  );
  mix-blend-mode: multiply;
}

/* ── prefers-reduced-motion: kill everything animated ── */
@media (prefers-reduced-motion: reduce) {
  body::after {
    display: none;
  }

  .hero-title,
  .hero-title.glitching,
  .soon-dot {
    animation: none;
  }

  .hero-title.glitching {
    /* Strip the stacked glitch animation; keep just the pulse, then disable. */
    animation: none;
  }

  .floater,
  .comet {
    display: none;
  }

  .nebula-orb {
    animation: none;
  }
}