/* ============================================================
   menu_animations.css — opt-in menu animation classes
   Namespaced under .menu-/.bg- prefixes so they can layer on top
   of the existing main-menu CSS without colliding with anything.

   PUBLIC CLASS API (apply by adding the class to a menu element):
     .menu-title-flicker     subtle text-shadow flicker on a title
     .menu-radar-sweep       container gets a slow rotating beam pseudo-element
     .menu-scanlines         container gets very low-opacity drifting scanlines
     .menu-cta-pulse         element scales 1↔1.04 with a neon shadow pulse
   All animations are disabled under prefers-reduced-motion.
   ============================================================ */

/* ── Title flicker ────────────────────────────────────────── */
.menu-title-flicker {
    animation: menuTitleFlicker 5.4s ease-in-out infinite;
    will-change: text-shadow, opacity;
}
@keyframes menuTitleFlicker {
      0%, 100% { text-shadow: 0 0 14px rgba(0, 230, 255, 0.55), 0 0 32px rgba(0, 180, 255, 0.30); opacity: 1; }
     12%      { text-shadow: 0 0  8px rgba(0, 230, 255, 0.30), 0 0 18px rgba(0, 180, 255, 0.15); opacity: 0.92; }
     14%      { text-shadow: 0 0 22px rgba(0, 230, 255, 0.85), 0 0 44px rgba(0, 180, 255, 0.60); opacity: 1; }
     50%      { text-shadow: 0 0 18px rgba(0, 230, 255, 0.65), 0 0 38px rgba(0, 180, 255, 0.40); opacity: 1; }
     62%      { text-shadow: 0 0 10px rgba(0, 230, 255, 0.35); opacity: 0.95; }
     64%      { text-shadow: 0 0 24px rgba(0, 230, 255, 0.95), 0 0 48px rgba(0, 180, 255, 0.70); opacity: 1; }
}

/* ── Radar sweep (rotating beam over a container) ─────────── */
.menu-radar-sweep {
    position: relative;
    overflow: hidden;
}
.menu-radar-sweep::after {
    content: '';
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 0deg,
        rgba(0, 230, 255, 0)   0deg,
        rgba(0, 230, 255, 0)   320deg,
        rgba(0, 230, 255, 0.18) 350deg,
        rgba(0, 230, 255, 0)   360deg);
    pointer-events: none;
    animation: menuRadarSpin 11s linear infinite;
    mix-blend-mode: screen;
}
@keyframes menuRadarSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Drifting scanlines ───────────────────────────────────── */
.menu-scanlines {
    position: relative;
}
.menu-scanlines::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.04) 0px,
        rgba(255, 255, 255, 0.04) 1px,
        transparent 1px,
        transparent 4px
    );
    animation: menuScanlinesDrift 12s linear infinite;
    mix-blend-mode: overlay;
    opacity: 0.55;
}
@keyframes menuScanlinesDrift {
    from { background-position-y: 0; }
    to   { background-position-y: 64px; }
}

/* ── CTA pulse (neon-shadow scale heartbeat) ───────────────── */
.menu-cta-pulse {
    animation: menuCtaPulse 2.4s ease-in-out infinite;
    will-change: transform, box-shadow;
}
@keyframes menuCtaPulse {
    0%, 100% { transform: scale(1.0);  box-shadow: 0 0 14px rgba(0, 230, 255, 0.45), 0 0 28px rgba(0, 200, 255, 0.18); }
    50%      { transform: scale(1.04); box-shadow: 0 0 26px rgba(0, 230, 255, 0.85), 0 0 60px rgba(0, 200, 255, 0.45); }
}

/* ── Reduced-motion overrides ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .menu-title-flicker,
    .menu-cta-pulse {
        animation: none !important;
    }
    .menu-radar-sweep::after {
        animation: none !important;
        opacity: 0;
    }
    .menu-scanlines::before {
        animation: none !important;
    }
}