/* Fixed scrolling text animation for notification bar */
.notification-bar {
    color: white;
    text-align: center;
    padding: 12px 0;
    width: 100%;
    font-weight: bold;
    z-index: 1000;
    overflow: hidden;
    position: relative;
    background-color: var(--element-bg);
    background-image: 
        linear-gradient(135deg, 
            var(--blue-gradient-start) 0%, 
            var(--blue-gradient-end) 100%);
    border-top: 1px solid var(--element-border);
    border-bottom: 1px solid var(--element-border);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    box-shadow: var(--element-shadow);
    transition: background-color var(--color-lerp-duration) var(--color-lerp-function),
                background-image var(--color-lerp-duration) var(--color-lerp-function),
                box-shadow var(--color-lerp-duration) var(--color-lerp-function),
                border-color var(--color-lerp-duration) var(--color-lerp-function);
}

/* Create a container for the scrolling text */
.scrolling-text-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* Style for the scrolling text */
.scrolling-text {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%; /* Initial position off screen */
    animation: scroll-text 200s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; /* Ultra smooth 200 seconds with perfect easing */
}

/* Define the animation for scrolling text with ultra-smooth progression */
@keyframes scroll-text {
    0% {
        transform: translateX(0);
    }
    5% {
        transform: translateX(-5%);
    }
    10% {
        transform: translateX(-10%);
    }
    15% {
        transform: translateX(-15%);
    }
    20% {
        transform: translateX(-20%);
    }
    25% {
        transform: translateX(-25%);
    }
    30% {
        transform: translateX(-30%);
    }
    35% {
        transform: translateX(-35%);
    }
    40% {
        transform: translateX(-40%);
    }
    45% {
        transform: translateX(-45%);
    }
    50% {
        transform: translateX(-50%);
    }
    55% {
        transform: translateX(-55%);
    }
    60% {
        transform: translateX(-60%);
    }
    65% {
        transform: translateX(-65%);
    }
    70% {
        transform: translateX(-70%);
    }
    75% {
        transform: translateX(-75%);
    }
    80% {
        transform: translateX(-80%);
    }
    85% {
        transform: translateX(-85%);
    }
    90% {
        transform: translateX(-90%);
    }
    95% {
        transform: translateX(-95%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Tornado warning specific styling */
.notification-bar-tornado {
    background-color: var(--tornado-dark-red);
    background-image: linear-gradient(135deg, var(--tornado-dark-red), var(--tornado-light-red));
    box-shadow: 0 0 20px rgba(231, 76, 60, 0.8);
    color: white;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
    transition: all var(--color-lerp-duration) var(--color-lerp-function);
    border-top: 1px solid var(--tornado-light-red);
    border-bottom: 1px solid var(--tornado-light-red);
    animation: pulse-warning 2s infinite;
}

@keyframes pulse-warning {
    0% { box-shadow: 0 0 20px rgba(231, 76, 60, 0.8); }
    50% { box-shadow: 0 0 30px rgba(231, 76, 60, 0.9); }
    100% { box-shadow: 0 0 20px rgba(231, 76, 60, 0.8); }
}