/* ============================================
   PIXEL ART BANNERS — darktimes.ca
   Background images for parallax sections
   ============================================ */

/* Forest Section */
#forest .parallax-bg.forest-bg {
    background-image: url('forest-banner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Bowling Alley Section */
#bowling .parallax-bg.bowling-bg {
    background-image: url('bowling-banner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Arcade Section */
#arcade .parallax-bg.arcade-bg {
    background-image: url('arcade-screen.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Bike Section */
#bike .parallax-bg.bike-bg {
    background-image: url('bike-banner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Basement Section */
#basement .parallax-bg.basement-bg {
    background-image: url('basement-banner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Hero divider */
.hero-divider {
    background-image: url('hero-divider.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 120px;
    display: block;
}

/* ============================================
   CSS ANIMATIONS — Atmosphere
   ============================================ */

/* Blinking cursor in hero */
.cursor {
    display: inline-block;
    animation: cursorBlink 1s step-end infinite;
}

@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Twinkling stars effect on parallax backgrounds */
@keyframes starTwinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Neon sign flicker */
@keyframes neonFlicker {
    0%, 100% { opacity: 1; filter: brightness(1); }
    91% { opacity: 1; filter: brightness(1); }
    92% { opacity: 0.7; filter: brightness(0.8); }
    93% { opacity: 1; filter: brightness(1); }
    95% { opacity: 0.9; filter: brightness(0.9); }
    96% { opacity: 1; filter: brightness(1); }
    97% { opacity: 0.8; filter: brightness(0.85); }
    98% { opacity: 1; filter: brightness(1); }
}

/* Bowling sign neon glow animation */
.bowling-sign .sign-text {
    animation: neonFlicker 3s ease-in-out infinite;
}

/* Server LED blink animation */
@keyframes ledBlink {
    0%, 89%, 91%, 100% { opacity: 1; }
    90% { opacity: 0.2; }
}

@keyframes ledGreen {
    0%, 100% { box-shadow: 0 0 4px #00ff00, 0 0 8px #00ff00; }
    50% { box-shadow: 0 0 2px #00aa00, 0 0 4px #00aa00; }
}

@keyframes ledRed {
    0%, 100% { box-shadow: 0 0 4px #ff0000, 0 0 8px #ff0000; }
    50% { box-shadow: 0 0 2px #aa0000, 0 0 4px #aa0000; }
}

/* Subtle parallax for bike section - already handled in scroll.js but enhanced */
#bike .parallax-bg.bike-bg {
    animation: subtleFloat 8s ease-in-out infinite;
}

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

/* Scanline animation for arcade */
.crt-overlay {
    animation: scanlineScroll 8s linear infinite;
}

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

/* String lights gentle sway */
#stringLights {
    animation: gentleSway 6s ease-in-out infinite;
}

@keyframes gentleSway {
    0%, 100% { transform: translateX(0px) translateY(0px); }
    25% { transform: translateX(3px) translateY(-2px); }
    75% { transform: translateX(-3px) translateY(2px); }
}

/* Hero typewriter glow */
.hero-heading {
    animation: textGlow 2s ease-in-out infinite alternate;
}

@keyframes textGlow {
    0% { text-shadow: 0 0 10px var(--arcade-cyan), 0 0 20px var(--arcade-cyan); }
    100% { text-shadow: 0 0 20px var(--arcade-cyan), 0 0 40px var(--arcade-cyan), 0 0 60px var(--arcade-magenta); }
}

/* Stats row pulse */
.stat-pill {
    animation: pillPulse 3s ease-in-out infinite;
}

@keyframes pillPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

/* Fog layer animation */
#fogCanvas {
    animation: fogDrift 20s ease-in-out infinite;
}

@keyframes fogDrift {
    0%, 100% { opacity: 0.7; transform: translateX(0px); }
    50% { opacity: 0.9; transform: translateX(20px); }
}

/* Bike trails canvas animation enhancement */
#bikeTrails {
    animation: trailGlow 4s ease-in-out infinite alternate;
}

@keyframes trailGlow {
    0% { opacity: 0.4; }
    100% { opacity: 0.7; }
}

/* Smoke layer drift */
#smokeCanvas {
    animation: smokeDrift 15s ease-in-out infinite;
}

@keyframes smokeDrift {
    0%, 100% { transform: translateY(0px) translateX(0px); opacity: 0.6; }
    33% { transform: translateY(-10px) translateX(5px); opacity: 0.8; }
    66% { transform: translateY(-5px) translateX(-5px); opacity: 0.7; }
}

/* Light rays pulsing */
#lightRays {
    animation: rayPulse 6s ease-in-out infinite;
}

@keyframes rayPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.5; }
}

/* Nav link hover glow */
.nav-link:hover {
    animation: navGlow 0.5s ease-out forwards;
}

@keyframes navGlow {
    0% { text-shadow: 0 0 5px currentColor; }
    100% { text-shadow: 0 0 15px currentColor, 0 0 30px currentColor; }
}

/* CTA button glow pulse */
.cta-button.primary {
    animation: ctaGlow 2s ease-in-out infinite alternate;
}

@keyframes ctaGlow {
    0% { box-shadow: 0 0 10px var(--arcade-cyan), 0 0 20px var(--arcade-cyan); }
    100% { box-shadow: 0 0 20px var(--arcade-cyan), 0 0 40px var(--arcade-cyan), 0 0 60px var(--arcade-magenta); }
}

/* Minimized retro feel for site tip */
.site-tip {
    animation: tipFade 4s ease-in-out infinite;
}

@keyframes tipFade {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Hero divider pixel shimmer */
@keyframes pixelShimmer {
    0%, 100% { filter: brightness(1) contrast(1); }
    50% { filter: brightness(1.1) contrast(1.05); }
}

.hero-divider {
    animation: pixelShimmer 3s ease-in-out infinite;
}