@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Press+Start+2P&display=swap');

/* Scanlines effect */
.scanlines {
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 255, 255, 0.03) 2px,
        rgba(0, 255, 255, 0.03) 4px
    );
    animation: scanline-flicker 2s linear infinite;
}

@keyframes scanline-flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* Logo glow effect */
.logo-glow {
    text-shadow: 
        0 0 10px #0066ff,
        0 0 20px #0066ff,
        0 0 30px #0066ff,
        0 0 40px #0066ff;
}

/* Console glow effect */
.console-glow {
    filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.5));
}

/* Controller glow effect */
.controller-glow {
    filter: drop-shadow(0 0 15px rgba(255, 20, 147, 0.5));
}

/* Floating animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0;
    }
    10%, 90% {
        opacity: 1;
    }
    50% {
        transform: translateY(-100vh) rotate(180deg);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* Custom pulse */
@keyframes custom-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* Glitch effect */
@keyframes glitch {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-2px); }
    40% { transform: translateX(2px); }
    60% { transform: translateX(-1px); }
    80% { transform: translateX(1px); }
}

.hover\:animate-glitch:hover {
    animation: glitch 0.3s ease-in-out;
}

/* CRT monitor effect */
body {
    background: radial-gradient(ellipse at center, #1a1a1a 0%, #000000 100%);
}

/* Retro button styling */
button {
    position: relative;
    overflow: hidden;
}

button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

button:hover::before {
    left: 100%;
}

/* Responsive text scaling */
@media (max-width: 768px) {
    .logo-glow {
        font-size: 4rem;
    }
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #0066ff, #ff0080);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #0080ff, #ff20a0);
}

/* Genesis-style borders */
.genesis-border {
    border: 3px solid;
    border-image: linear-gradient(45deg, #0066ff, #ff0080, #00ffff) 1;
}

/* VHS chromatic aberration effect */
.vhs-effect {
    position: relative;
}

.vhs-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        rgba(255, 0, 0, 0.1) 0%, 
        transparent 33%, 
        rgba(0, 255, 0, 0.1) 66%, 
        rgba(0, 0, 255, 0.1) 100%
    );
    pointer-events: none;
    mix-blend-mode: multiply;
}