@keyframes hero-spin {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes hero-fade-1 {
    0% {
        opacity: 0;
        transform: translateY(calc(var(--hero-text-offset, 0) + 12px));
    }
    8% {
        opacity: 1;
        transform: translateY(var(--hero-text-offset, 0));
    }
    20% {
        opacity: 1;
        transform: translateY(var(--hero-text-offset, 0));
    }
    28%, 100% {
        opacity: 0;
        transform: translateY(calc(var(--hero-text-offset, 0) - 12px));
    }
}

@keyframes hero-fade-2 {
    0% {
        opacity: 0;
        transform: translate(-8px, var(--hero-text-offset, 0));
    }
    8% {
        opacity: 1;
        transform: translate(0, var(--hero-text-offset, 0));
    }
    20% {
        opacity: 1;
        transform: translate(0, var(--hero-text-offset, 0));
    }
    28%, 100% {
        opacity: 0;
        transform: translate(8px, var(--hero-text-offset, 0));
    }
}

@keyframes hero-fade-3 {
    0% {
        opacity: 0;
        transform: translateY(calc(var(--hero-text-offset, 0) - 12px));
    }
    8% {
        opacity: 1;
        transform: translateY(var(--hero-text-offset, 0));
    }
    20% {
        opacity: 1;
        transform: translateY(var(--hero-text-offset, 0));
    }
    28%, 100% {
        opacity: 0;
        transform: translateY(calc(var(--hero-text-offset, 0) + 12px));
    }
}

.hero-text-container {
    width: 100%;
    min-height: 176px;
    padding: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
    background-color: rgba(15, 23, 42, 0.85) !important;
}

@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
    .hero-text-container {
        background-color: rgba(15, 23, 42, 0.55) !important;
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }
}

.hero-overlay-container {
    position: relative;
    width: 100%;
    min-height: clamp(3.75rem, 2.5rem + 2vw, 5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-animation-spin {
    animation: hero-spin 40s linear infinite;
}

.hero-animation-fade {
    display: flex;
    align-items: center;
    justify-content: center;
    position: static;
    width: 100%;
    opacity: 1;
    --hero-text-offset: 0.05rem;
    transform: translateY(var(--hero-text-offset, 0));
    animation: none;
    line-height: 1;
}

@supports (animation: hero-fade-1 16s) {
    .hero-animation-fade {
        position: absolute;
        inset: 0;
        opacity: 0;
        animation-fill-mode: both;
    }

    /* Box 1: 0-4s cycle */
    .hero-animation-delay-1 {
        animation: hero-fade-1 16s ease-in-out infinite;
        animation-delay: 0s;
    }

    .hero-animation-delay-5 {
        animation: hero-fade-2 16s ease-in-out infinite;
        animation-delay: 4s;
    }

    .hero-animation-delay-9 {
        animation: hero-fade-3 16s ease-in-out infinite;
        animation-delay: 8s;
    }

    .hero-animation-delay-13 {
        animation: hero-fade-1 16s ease-in-out infinite;
        animation-delay: 12s;
    }

    /* Box 2: 4-8s cycle */
    .hero-animation-delay-2 {
        animation: hero-fade-2 16s ease-in-out infinite;
        animation-delay: 1s;
    }

    .hero-animation-delay-6 {
        animation: hero-fade-3 16s ease-in-out infinite;
        animation-delay: 5s;
    }

    .hero-animation-delay-10 {
        animation: hero-fade-1 16s ease-in-out infinite;
        animation-delay: 9s;
    }

    .hero-animation-delay-14 {
        animation: hero-fade-2 16s ease-in-out infinite;
        animation-delay: 13s;
    }

    /* Box 3: 8-12s cycle */
    .hero-animation-delay-3 {
        animation: hero-fade-3 16s ease-in-out infinite;
        animation-delay: 2s;
    }

    .hero-animation-delay-7 {
        animation: hero-fade-1 16s ease-in-out infinite;
        animation-delay: 6s;
    }

    .hero-animation-delay-11 {
        animation: hero-fade-2 16s ease-in-out infinite;
        animation-delay: 10s;
    }

    .hero-animation-delay-15 {
        animation: hero-fade-3 16s ease-in-out infinite;
        animation-delay: 14s;
    }

    /* Box 4: 12-16s cycle */
    .hero-animation-delay-4 {
        animation: hero-fade-1 16s ease-in-out infinite;
        animation-delay: 3s;
    }

    .hero-animation-delay-8 {
        animation: hero-fade-2 16s ease-in-out infinite;
        animation-delay: 7s;
    }

    .hero-animation-delay-12 {
        animation: hero-fade-3 16s ease-in-out infinite;
        animation-delay: 11s;
    }

    .hero-animation-delay-16 {
        animation: hero-fade-1 16s ease-in-out infinite;
        animation-delay: 15s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-animation-spin {
        animation: none !important;
    }

    .hero-animation-fade {
        animation: none !important;
        opacity: 1 !important;
        transform: translateY(var(--hero-text-offset, 0)) !important;
        position: static !important;
    }
}