/* ═══════════════════════════════════════════
   THE STORE — Cyberpunk Visual Effects
   All animations gated behind reduced-motion
   ═══════════════════════════════════════════ */

/* ── Scanline Overlay ──────────────────── */
.scanline-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
}

/* ── Blinking Cursor ───────────────────── */
.cursor {
  color: var(--success);
}

/* ── Nav Scroll Effect ─────────────────── */
.site-nav {
  transition: background 0.3s, border-color 0.3s;
}

/* ── Neon Glow ─────────────────────────── */
.ssh-command:hover code {
  text-shadow:
    0 0 5px rgba(0, 255, 136, 0.5),
    0 0 15px rgba(0, 255, 136, 0.3),
    0 0 30px rgba(0, 255, 136, 0.15);
}

.agent-panel {
  transition: box-shadow 0.4s;
}

.agent-panel:hover {
  box-shadow:
    0 0 40px rgba(30, 144, 255, 0.15),
    0 0 80px rgba(30, 144, 255, 0.05),
    inset 0 0 40px rgba(30, 144, 255, 0.05);
}

/* ═══════════════════════════════════════════
   Motion-dependent effects
   ═══════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {

  /* ── Cursor Blink ──────────────────── */
  .cursor {
    animation: blink 1s step-end infinite;
  }

  @keyframes blink {
    50% { opacity: 0; }
  }

  /* ── Glitch Text ───────────────────── */
  .glitch {
    position: relative;
  }

  .glitch::before,
  .glitch::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
  }

  .glitch::before {
    color: #ff00ff;
    animation: glitch-shift 4s infinite linear alternate-reverse;
    clip-path: inset(0 0 80% 0);
  }

  .glitch::after {
    color: #00ffff;
    animation: glitch-shift 4s 0.5s infinite linear alternate-reverse;
    clip-path: inset(80% 0 0 0);
  }

  @keyframes glitch-shift {
    0%, 85% { transform: translateX(0); }
    86% { transform: translateX(-3px); }
    88% { transform: translateX(3px); }
    90% { transform: translateX(-1px); }
    92% { transform: translateX(2px); }
    94%, 100% { transform: translateX(0); }
  }

  /* ── Scroll Reveal Transitions ─────── */
  .reveal {
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  /* ── Neon Pulse on Hero Banner ─────── */
  .ascii-banner {
    animation: neon-pulse 3s ease-in-out infinite alternate;
  }

  @keyframes neon-pulse {
    from {
      text-shadow:
        0 0 5px rgba(255, 215, 0, 0.4),
        0 0 15px rgba(255, 215, 0, 0.2);
    }
    to {
      text-shadow:
        0 0 10px rgba(255, 215, 0, 0.6),
        0 0 30px rgba(255, 215, 0, 0.3),
        0 0 50px rgba(255, 215, 0, 0.15);
    }
  }

  /* ── Tagline Neon Glow ─────────────── */
  .tagline {
    text-shadow:
      0 0 10px rgba(0, 212, 255, 0.5),
      0 0 30px rgba(0, 212, 255, 0.2);
  }

  /* ── Step Number Hover Glow ────────── */
  .step-number {
    transition: box-shadow 0.3s;
  }

  .step-card:hover .step-number {
    box-shadow:
      0 0 10px rgba(0, 212, 255, 0.4),
      0 0 20px rgba(0, 212, 255, 0.2);
  }

  /* ── Category Card Hover ───────────── */
  .category-card {
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  }
}

/* ── Reduced motion: disable animations ── */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .cursor {
    animation: none;
  }

  .glitch::before,
  .glitch::after {
    display: none;
  }
}