/* style.css */
:root {
    --neon-green: #00FF41;
    --neon-cyan: #00f3ff;
    --neon-pink: #ff003c;
    --dark-bg: #030303;
}

body {
    background-color: var(--dark-bg);
    color: #e0e0e0;
    font-family: 'Inter', sans-serif;
    /* Static Noise in background */
    background-image: radial-gradient(#111 1px, transparent 1px);
    background-size: 30px 30px;
}

.mono { font-family: 'Fira Code', monospace; }
.cyber-font { font-family: 'Orbitron', sans-serif; }

/* 3D Cyber Grid Floor */
.cyber-grid {
    position: fixed;
    bottom: 0; left: 0; width: 100%; height: 40vh;
    background: 
        linear-gradient(transparent 50%, rgba(0, 243, 255, 0.05) 50%),
        linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 243, 255, 0.05), rgba(0, 0, 0, 0));
    background-size: 100% 10px, 100px 100%;
    transform: perspective(500px) rotateX(60deg);
    z-index: 0;
    pointer-events: none;
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    0% { background-position: 0 0; }
    100% { background-position: 0 100px; }
}

/* Glow Utils */
.glow-cyan { text-shadow: 0 0 15px rgba(0, 243, 255, 0.5); }
.glow-pink { text-shadow: 0 0 15px rgba(255, 0, 60, 0.5); }
.glow-green { text-shadow: 0 0 15px rgba(0, 255, 65, 0.5); }

/* Noise Texture */
.noise-layer {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iIzAwMCIgLz48ZmlsdGVyIGlkPSJnoiPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjY1IiBudW1PY3RhdmVzPSIzIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIiAvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiBmaWxsPSIjZmZmIiBvcGFjaXR5PSIwLjAzIiBmaWxsZXQ9InVybCgjZykiIC8+PC9zdmc+');
    opacity: 0.04; pointer-events: none; z-index: 40;
}

/* Glitch Text */
.glitch-text { position: relative; }
.glitch-text::before, .glitch-text::after {
    content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--dark-bg);
}
.glitch-text::before {
    left: 2px; text-shadow: -1px 0 #ff003c; clip: rect(24px, 550px, 90px, 0);
    animation: glitch-anim 3s infinite linear alternate-reverse;
}
.glitch-text::after {
    left: -2px; text-shadow: -1px 0 #00f3ff; clip: rect(85px, 550px, 140px, 0);
    animation: glitch-anim 2s infinite linear alternate-reverse;
}
@keyframes glitch-anim {
    0% { clip: rect(10px, 9999px, 31px, 0); }
    20% { clip: rect(70px, 9999px, 90px, 0); }
    100% { clip: rect(30px, 9999px, 5px, 0); }
}

/* Cyber Cards */
.cyber-card {
    background: rgba(10, 10, 10, 0.7);
    border: 1px solid #1a1a1a;
    transition: all 0.2s ease;
    backdrop-filter: blur(5px);
}
.cyber-card:hover {
    background: #000;
    box-shadow: 0 0 25px rgba(0, 243, 255, 0.1);
    transform: translateY(-5px);
}

/* CRT Overlay */
.crt-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.25) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 2px, 3px 100%;
    pointer-events: none; z-index: 50;
}

.container-wide { max-width: 1600px; margin: 0 auto; }

@keyframes bounceIn {
    0% { transform: scale(0.9); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.animate-bounce-in { animation: bounceIn 0.3s ease-out; }