/* public/css/rotating-text.css */
@keyframes slideUpIn {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideUpOut {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-120%);
        opacity: 0;
    }
}

.rotating-text-box {
    background-color: rgba(0, 153, 255, 0.2); /* Light blue, semi-transparent */
    color: #ffffff; /* White text to stand out */
    border-radius: 12px;
    padding: 0.25em 0.85em; /* Adjusted padding */
    transition: width 0.5s cubic-bezier(0.65, 0, 0.35, 1);
    white-space: nowrap;
    display: inline-block;
    line-height: 1.2;
    border: 1px solid rgba(0, 153, 255, 0.4); /* Subtle border */
}


.rotating-text-container {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    height: 1.2em;
}

.rotating-text-item {
    display: inline-block;
    white-space: nowrap;
    animation-fill-mode: forwards;
}

.rotating-text-item.animate-in {
    animation: slideUpIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.rotating-text-item.animate-out {
    animation: slideUpOut 0.8s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}