/* ========== SILKY SMOOTH MARQUEE WITH PAUSE ========== */

.marquee-wrapper {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.marquee-inner {
    display: flex;
    width: max-content;
    animation: marquee-with-pause 20s linear infinite;
}

.marquee-inner span {
    flex-shrink: 0;
    padding-right: 50px;
    font-family: Georgia, serif;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #b0c4de;
    text-shadow: 0 0 5px rgba(200, 220, 255, 0.4);
}

/* Smooth scroll with PAUSE when sponsor visible */
@keyframes marquee-with-pause {
    0% { transform: translateX(0%); }
    5% { transform: translateX(0%); }
    45% { transform: translateX(-45%); }
    55% { transform: translateX(-45%); }
    95% { transform: translateX(-50%); }
    100% { transform: translateX(-50%); }
}

/* ========== SPONSOR NAME FLICKER - STAR EFFECT ========== */

.sponsor-highlight {
    display: inline-block;
    font-size: 24px !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #FFD700 !important;
    -webkit-text-fill-color: #FFD700 !important;
    animation: star-flicker 0.8s ease-in-out infinite;
    text-shadow: 
        0 0 10px #fff,
        0 0 20px #FFD700,
        0 0 30px #FFA500,
        0 0 40px #FF6347;
}

@keyframes star-flicker {
    0%, 100% { 
        opacity: 1;
        text-shadow: 0 0 10px #fff, 0 0 20px #FFD700, 0 0 30px #FFA500;
        transform: scale(1);
    }
    10% { 
        opacity: 0.8;
        text-shadow: 0 0 5px #fff, 0 0 10px #FFD700;
        transform: scale(0.98);
    }
    20% { 
        opacity: 1;
        text-shadow: 0 0 15px #fff, 0 0 30px #FFD700, 0 0 50px #FFA500;
        transform: scale(1.02);
    }
    35% { 
        opacity: 0.9;
        text-shadow: 0 0 8px #fff, 0 0 15px #FFD700;
        transform: scale(1);
    }
    50% { 
        opacity: 1;
        text-shadow: 0 0 20px #fff, 0 0 40px #FFD700, 0 0 60px #FF6347;
        transform: scale(1.03);
    }
    65% { 
        opacity: 0.85;
        text-shadow: 0 0 5px #fff, 0 0 12px #FFD700;
        transform: scale(0.99);
    }
    80% { 
        opacity: 1;
        text-shadow: 0 0 12px #fff, 0 0 25px #FFD700, 0 0 40px #FFA500;
        transform: scale(1.01);
    }
}

/* ========== CALM MODE ========== */
body.calm-mode .marquee-inner span {
    color: #7ab8e0;
    text-shadow: 0 0 5px rgba(100, 150, 255, 0.4);
}

body.calm-mode .sponsor-highlight {
    color: #a0d4ff !important;
    -webkit-text-fill-color: #a0d4ff !important;
    text-shadow: 
        0 0 10px #fff,
        0 0 20px #7ab8e0,
        0 0 30px #4a80b0;
}

/* ========== MINIMAL MODE (Red) ========== */
body.minimal-mode .marquee-inner span {
    color: #6B0000;
    text-shadow: 0 0 5px rgba(100, 0, 0, 0.4);
}

body.minimal-mode .sponsor-highlight {
    color: #a02020 !important;
    -webkit-text-fill-color: #a02020 !important;
    text-shadow: 
        0 0 10px #500000,
        0 0 20px #8B0000,
        0 0 30px #6B0000;
}

/* ========== CHRISTMAS MODE ========== */
body.christmas-mode .marquee-inner span {
    color: #228b22;
    text-shadow: 0 0 5px rgba(34, 139, 34, 0.4);
}

body.christmas-mode .sponsor-highlight {
    color: #FFD700 !important;
    -webkit-text-fill-color: #FFD700 !important;
    animation: xmas-flicker 0.8s ease-in-out infinite;
    text-shadow: 
        0 0 10px #fff,
        0 0 20px #c41e3a,
        0 0 30px #228b22;
}

@keyframes xmas-flicker {
    0%, 100% { color: #FFD700; text-shadow: 0 0 20px #FFD700, 0 0 40px #c41e3a; }
    33% { color: #c41e3a; text-shadow: 0 0 20px #c41e3a, 0 0 40px #228b22; }
    66% { color: #228b22; text-shadow: 0 0 20px #228b22, 0 0 40px #FFD700; }
}

/* ========== CHAOS MODE - ABSOLUTELY INSANE ========== */
body.chaos-mode .marquee-inner {
    animation: marquee-with-pause 15s linear infinite;
}

body.chaos-mode .marquee-inner span {
    background: linear-gradient(90deg, #ff00ff, #00ffff, #ffff00, #00ff00, #ff00ff);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: chaos-bg 2s linear infinite;
}

body.chaos-mode .sponsor-highlight {
    font-size: 28px !important;
    animation: chaos-sponsor 0.3s ease-in-out infinite;
    background: linear-gradient(90deg, #ff00ff, #ffff00, #00ffff, #ff00ff);
    background-size: 400% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 15px #ff00ff) drop-shadow(0 0 30px #00ffff);
}

@keyframes chaos-bg {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

@keyframes chaos-sponsor {
    0%, 100% { 
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 15px #ff00ff) drop-shadow(0 0 30px #00ffff);
    }
    25% { 
        transform: scale(1.05) rotate(2deg);
        filter: drop-shadow(0 0 20px #ffff00) drop-shadow(0 0 40px #ff00ff);
    }
    50% { 
        transform: scale(1) rotate(-1deg);
        filter: drop-shadow(0 0 25px #00ffff) drop-shadow(0 0 50px #00ff00);
    }
    75% { 
        transform: scale(1.03) rotate(1deg);
        filter: drop-shadow(0 0 15px #ff00ff) drop-shadow(0 0 35px #ffff00);
    }
}
