/* ============================================================
   NEON PROTOCOL — Custom CSS (Tailwind CDN handles utilities)
   This file covers only what Tailwind cannot:
     scanline overlay · glitch animation · bracket corners ·
     glow effects · scrollbar · blink cursor · neon text
============================================================ */

:root {
  --neon-cyan:        #e1fdff;
  --neon-magenta:     #ffabf3;
  --neon-cyan-90:     rgba(225, 253, 255, 0.9);
  --neon-cyan-50:     rgba(225, 253, 255, 0.5);
  --neon-cyan-30:     rgba(225, 253, 255, 0.3);
  --neon-cyan-20:     rgba(225, 253, 255, 0.2);
  --neon-cyan-12:     rgba(225, 253, 255, 0.12);
  --neon-magenta-90:  rgba(255, 171, 243, 0.9);
  --neon-magenta-55:  rgba(255, 171, 243, 0.55);
  --neon-magenta-45:  rgba(255, 171, 243, 0.45);
  --neon-magenta-20:  rgba(255, 171, 243, 0.2);
  --surface-dark:     #0e0e10;
  --outline:          #3a494b;
}

/* ---- CRT Scanline Overlay ---- */
.scanline-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background:
        linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.05) 50%),
        linear-gradient(90deg, rgba(255,0,0,0.02), rgba(0,255,0,0.01), rgba(0,0,255,0.02));
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
    z-index: 200;
}


/* ---- Glitch animation ---- */
@keyframes glitch {
    0%   { transform: translate(0);         text-shadow: 0 0 6px var(--neon-cyan), 0 0 14px var(--neon-cyan-50); }
    2%   { transform: translate(-2px, 1px); text-shadow: 2px 0 var(--neon-magenta), -2px 0 var(--neon-cyan); }
    4%   { transform: translate(2px, -1px); text-shadow: -2px 0 var(--neon-magenta), 2px 0 var(--neon-cyan); }
    6%   { transform: translate(0);         text-shadow: 0 0 6px var(--neon-cyan), 0 0 14px var(--neon-cyan-50); }
    100% { transform: translate(0);         text-shadow: 0 0 6px var(--neon-cyan), 0 0 14px var(--neon-cyan-50); }
}
.animate-glitch     { animation: glitch 4s infinite linear alternate-reverse; }
.hover-glitch:hover { animation: glitch 0.3s infinite linear; }

/* ---- Neon text helpers ---- */
.neon-text-glow    { text-shadow: 0 0 8px var(--neon-cyan-90); }
.neon-text-cyan    { text-shadow: 0 0 6px var(--neon-cyan-90), 0 0 14px var(--neon-cyan-50); }
.neon-text-magenta { text-shadow: 0 0 6px var(--neon-magenta-90), 0 0 14px var(--neon-magenta-45); }
.neon-title-magenta { text-shadow: 0 0 35px var(--neon-magenta-55), 0 0 70px var(--neon-magenta-20); }

/* ---- Glow helpers ---- */
.neon-border-glow {
    box-shadow: 0 0 5px var(--neon-cyan-30), inset 0 0 2px var(--neon-cyan-20);
}
.glow-cyan {
    box-shadow: 0 0 15px var(--neon-cyan-30);
    border-color: var(--neon-cyan) !important;
}
.glow-magenta {
    box-shadow: 0 0 20px var(--neon-magenta-45);
    border-color: var(--neon-magenta) !important;
}

/* ---- Shared card class: glow + hover effect; default border set via Tailwind ---- */
.card-neon {
    box-shadow: 0 0 10px var(--neon-cyan-12);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.card-neon:hover {
    border-color: var(--neon-magenta) !important;
    box-shadow: 0 0 20px var(--neon-magenta-45);
}

/* ---- Blinking cursor ---- */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}
.cursor-blink { animation: blink 1s step-end infinite; }

/* ---- Material Symbols icon default variant ---- */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ---- Custom Scrollbar ---- */
::-webkit-scrollbar         { width: 4px; }
::-webkit-scrollbar-track   { background: var(--surface-dark); }
::-webkit-scrollbar-thumb   { background: var(--outline); }
::-webkit-scrollbar-thumb:hover { background: var(--neon-cyan); }
/* Standard (Firefox 64+, Chrome 121+) */
* { scrollbar-width: thin; scrollbar-color: var(--outline) var(--surface-dark); }

/* ---- Text selection ---- */
::selection {
    background: var(--neon-cyan-20);
    color: var(--neon-cyan);
}

/* ---- Card entry animation (injected by dashboard.js) ---- */
@keyframes cardIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Shimmer for progress bars ---- */
@keyframes shimmer {
    100% { transform: translateX(100%); }
}

/* ---- Reduce motion ---- */
@media (prefers-reduced-motion: reduce) {
    .scanline-overlay  { display: none; }
    .cursor-blink      { animation: none; }
    .animate-pulse     { animation: none; }
    .animate-ping      { animation: none; }
    .animate-glitch    { animation: none; }
}