/* Bounce Animation from Right - Based on bounceInLeft tutorial pattern */
@keyframes n4c-spring-right {
    0% {
        opacity: 0;
        transform: translateX(2000px);
    }
    5% {
        opacity: 1;
        transform: translateX(-30px);
    }
    7% {
        transform: translateX(10px);
    }
    9% {
        transform: translateX(-5px);
    }
    11% {
        transform: translateX(0);
    }
    15% {
        transform: translateX(0);
    }
    18% {
        transform: translateX(-20px);
    }
    20% {
        transform: translateX(10px);
    }
    22% {
        transform: translateX(-5px);
    }
    23% {
        opacity: 1;
        transform: translateX(-2000px);
    }
    23.01%, 100% {
        opacity: 0;
        transform: translateX(2000px);
    }
}

/* Bounce Animation from Left - Based on bounceInLeft tutorial pattern */
@keyframes n4c-spring-left {
    0% {
        opacity: 0;
        transform: translateX(-2000px);
    }
    5% {
        opacity: 1;
        transform: translateX(30px);
    }
    7% {
        transform: translateX(-10px);
    }
    9% {
        transform: translateX(5px);
    }
    11% {
        transform: translateX(0);
    }
    15% {
        transform: translateX(0);
    }
    18% {
        transform: translateX(20px);
    }
    20% {
        transform: translateX(-10px);
    }
    22% {
        transform: translateX(5px);
    }
    23% {
        opacity: 1;
        transform: translateX(2000px);
    }
    23.01%, 100% {
        opacity: 0;
        transform: translateX(-2000px);
    }
}

/* Message containers - each appears sequentially with bounce animation */
/* Using 5 active messages: msg2, msg4, msg5, msg6, msg7, evenly spaced, continuous loop */
.n4c-msg2 {
    animation: n4c-spring-left 25s infinite;
    animation-delay: 0s;
    animation-timing-function: ease-out;
}

.n4c-msg4 {
    animation: n4c-spring-right 25s infinite;
    animation-delay: 5s;
    animation-timing-function: ease-out;
}

.n4c-msg5 {
    animation: n4c-spring-left 25s infinite;
    animation-delay: 10s;
    animation-timing-function: ease-out;
}

.n4c-msg6 {
    animation: n4c-spring-right 25s infinite;
    animation-delay: 15s;
    animation-timing-function: ease-out;
}

.n4c-msg7 {
    animation: n4c-spring-left 25s infinite;
    animation-delay: 20s;
    animation-timing-function: ease-out;
}

.n4c-marquee-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
}

.n4c-marquee-item {
    position: absolute;
    width: 100%;
    white-space: nowrap;
    text-align: center;
    transform: translateX(100%);
    opacity: 0;
}

.n4c-banner:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 25px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

.n4c-banner a:hover {
    text-shadow: 0 0 15px rgba(255,255,255,0.8) !important;
}