/* ==========================================================================
   Animations & Keyframes
   ========================================================================== */

/* Preloader */
#preloader {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #0a0e17;
    z-index: 100000; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: opacity 0.5s ease;
    pointer-events: none; /* Fix: prevents invisible loader from blocking clicks */
}
.terminal-loader { font-family: var(--font-mono); font-size: 1.2rem; color: var(--neon-green); margin-bottom: 2rem; pointer-events: all; }
.terminal-loader .prefix { color: var(--neon-cyan); margin-right: 10px; }
.terminal-loader .cursor { animation: blink 1s infinite; }

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes scanline-full { 0% { top: 0; } 100% { top: 100%; } }
@keyframes scanline { 0% { top: 0; opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.8; } 100% { top: 100%; opacity: 0; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 240, 168, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(0, 240, 168, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 240, 168, 0); } }

/* Glitch Effect - Refined for Forensics */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after { 
    content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background: transparent; opacity: 0; transition: opacity 0.3s;
}
.glitch:hover::before, .glitch:hover::after { opacity: 1; }
.glitch::before { 
    left: 2px; text-shadow: -2px 0 var(--neon-cyan); /* Blood Red */
    clip: rect(24px, 550px, 90px, 0); animation: glitch-anim 2s infinite linear alternate-reverse; 
}
.glitch::after { 
    left: -2px; text-shadow: 2px 0 var(--neon-green); /* Crime Yellow */
    clip: rect(85px, 550px, 140px, 0); animation: glitch-anim 2.5s infinite linear alternate-reverse; 
}

@keyframes glitch-anim {
    0% { clip: rect(10px, 9999px, 31px, 0); transform: skew(0.5deg); } 
    20% { clip: rect(4px, 9999px, 80px, 0); transform: skew(-0.5deg); }
    40% { clip: rect(10px, 9999px, 45px, 0); transform: skew(0.5deg); } 
    60% { clip: rect(15px, 9999px, 85px, 0); transform: skew(-0.5deg); }
    80% { clip: rect(45px, 9999px, 65px, 0); transform: skew(0.5deg); } 
    100% { clip: rect(10px, 9999px, 30px, 0); transform: skew(0deg); }
}

/* Magnetic Hover Elements */
.magnetic { display: inline-block; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }


/* Global Background */
#global-particles { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 0; opacity: 0.3; }

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
    .glitch::before, .glitch::after { display: none; }
}