/* Custom styles for Sega 32X retro theme */

* {
    font-family: 'Exo 2', sans-serif;
}

.font-orbitron {
    font-family: 'Orbitron', monospace;
}

.font-exo {
    font-family: 'Exo 2', sans-serif;
}

/* Chrome/Metallic text effect */
.chrome-text {
    background: linear-gradient(45deg, #c0c0c0, #ffffff, #c0c0c0, #a0a0a0);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: chrome-shine 3s ease-in-out infinite;
}

@keyframes chrome-shine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Glow effects */
.glow-text {
    text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
}

.neon-glow {
    box-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
}

.neon-border {
    box-shadow: 0 0 10px currentColor, inset 0 0 10px currentColor;
}

/* Scan lines effect */
.scan-lines {
    background: linear-gradient(
        transparent 50%, 
        rgba(0, 255, 255, 0.03) 50%
    );
    background-size: 100% 4px;
    animation: scan-line-animation 0.1s linear infinite;
}

@keyframes scan-line-animation {
    0% { background-position: 0 0; }
    100% { background-position: 0 4px; }
}

.scan-line-hover:hover {
    background: linear-gradient(
        transparent 50%, 
        rgba(255, 0, 64, 0.1) 50%
    );
    background-size: 100% 2px;
}

/* Floating animation */
.floating-animation {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

/* Rotating animation */
.rotating-slow {
    animation: rotate-slow 20s linear infinite;
}

@keyframes rotate-slow {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}

/* Terminal effects */
.terminal-glow {
    background: radial-gradient(ellipse at center, rgba(0, 255, 0, 0.1) 0%, transparent 70%);
}

.typing-animation {
    animation: typing 1s steps(40, end);
    overflow: hidden;
    white-space: nowrap;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

/* CRT screen effects */
.crt-frame {
    border-radius: 20px;
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
    padding: 20px;
    position: relative;
}

.crt-frame::before {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 8px;
    height: 8px;
    background: #ff0040;
    border-radius: 50%;
    box-shadow: 0 0 10px #ff0040;
}

.crt-screen {
    border-radius: 10px;
    filter: contrast(1.2) brightness(1.1);
}

.crt-screen::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    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;
}

/* Button hover effects */
button:hover {
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* Scrollbar styling for webkit browsers */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #000;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #ff0040, #000);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #ff0060, #333);
}

/* Retro gradients */
.retro-bg {
    background: linear-gradient(45deg, #000 0%, #1a0033 25%, #330066 50%, #1a0033 75%, #000 100%);
    background-size: 400% 400%;
    animation: retro-wave 8s ease-in-out infinite;
}

@keyframes retro-wave {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Media queries for responsiveness */
@media (max-width: 768px) {
    .chrome-text {
        font-size: 2.5rem;
    }
    
    .scan-lines {
        background-size: 100% 2px;
    }
    
    .floating-animation {
        animation: floating-mobile 2s ease-in-out infinite;
    }
}

@keyframes floating-mobile {
    0%, 100% { transform: translateY(0px) scale(0.8); }
    50% { transform: translateY(-10px) scale(0.85); }
}