.bg-hero-initial {
    background-image: url('../images/bg-hero.webp');
    background-size: cover;
    background-position: center;
    /* -webkit-mask-image: radial-gradient(circle, black 20%, transparent 70%);
    mask-image: radial-gradient(circle, black 20%, transparent 70%); */
    -webkit-mask-image: radial-gradient(circle, black 5%, transparent 90%);
    mask-image: radial-gradient(circle, black 5%, transparent 90%);
}

.bg-hero-initial-sp {
    background-image: url('../images/bg-hero-sp.png');
    background-size: cover;
    background-position: center;
}

.bg-hero-final {
    background-image: url('../images/bg-hero.png');
    background-size: cover;
    background-position: center;
}

.awards-left-swiper {

    /* ── Smooth transitions for inactive states and color crossfades ── */
    .swiper-slide .award-item {
        transition: opacity 1.5s ease;
    }

    .swiper-slide .award-year,
    .swiper-slide .award-title {
        transition: color 1s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .swiper-slide.is-active .award-year {
        color: #FFDE17 !important;
    }

    .swiper-slide.is-active .award-title {
        color: #fff !important;
    }

    @media (min-width: 1024px) {
        .awards-left-swiper .swiper-slide {
            height: auto !important;
        }

        /* Award-section styles */
        .swiper-slide {
            position: relative;
            padding-top: .75rem !important;
            padding-bottom: .75rem !important;
        }

        .swiper-slide:first-child:not(.is-active) {
            padding-top: 0 !important;
        }

        .swiper-slide:last-child:not(.is-active) {
            padding-bottom: 0 !important;
        }

        /* ── Expand active item padding to create larger spacing dynamically ── */
        /* Active slide content gets 32px top and bottom spacing from the yellow lines */
        .swiper-slide.is-active {
            padding-top: 2rem !important;
            padding-bottom: 2rem !important;
        }

        /* Slide directly preceding the active slide gets 32px bottom padding (gap above active top line is 32px) */
        .swiper-slide:has(+ .swiper-slide.is-active) {
            padding-bottom: 2rem !important;
        }

        /* Slide directly succeeding the active slide gets 32px top padding (gap below active bottom line is 32px) */
        .swiper-slide.is-active+.swiper-slide {
            padding-top: 2rem !important;
        }

        /* ── Dynamic Double Yellow Lines (Only on active slide itself!) ── */
        /* 1. Top yellow line on the active slide */
        .swiper-slide.is-active::before {
            content: '' !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            height: .125rem !important;
            background-color: #FFDE17 !important;
            z-index: 20 !important;
            display: block !important;
            animation: line-active-bounce 0.3s cubic-bezier(0.4, 0, 0, 1) forwards;
            -webkit-animation: line-active-bounce 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        /* 2. Bottom yellow line on the active slide */
        .swiper-slide.is-active::after {
            content: '' !important;
            position: absolute !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
            height: .125rem !important;
            background-color: #FFDE17 !important;
            z-index: 20 !important;
            display: block !important;
            animation: line-active-bounce 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
            -webkit-animation: line-active-bounce 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        .swiper-slide.is-active .award-item {
            animation: aw-active-bounce 0.75s cubic-bezier(0.4, 0, 0.2, 1) forwards;
            transform-origin: center left;
            -webkit-animation: aw-active-bounce 0.75s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }


    }
}

.awards-right-swiper {
    margin: 0 16px;

    @media (min-width: 1024px) {
        margin: 0;
    }
}

/* ── Keyframe active bounce animation for content (fade out at old position, glide and fade in active) ── */
@keyframes line-active-bounce {
    0% {
        opacity: 1;
        transform: translateY(-0.3rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes aw-active-bounce {
    0% {
        opacity: 1;
        transform: translateY(-0.4rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ── Pulse animation for decorative brackets ── */
@keyframes aw-pulse-delayed {

    0%,
    100% {
        opacity: 0.15;
    }

    50% {
        opacity: 1;
    }
}

@keyframes aw-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.15;
    }
}

.aw-pulse {
    animation: aw-pulse 4s ease-in-out infinite;
    -webkit-animation: aw-pulse 4s ease-in-out infinite;
}

.aw-pulse-delayed {
    animation: aw-pulse-delayed 4s ease-in-out infinite;
    -webkit-animation: aw-pulse-delayed 4s ease-in-out infinite;
}


/* Force iframe and all descendant containers to inherit the rounded corners and clip perfectly */
.iframe-yt-wrapper {
    overflow: hidden !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

.iframe-yt-wrapper iframe {
    border-radius: inherit !important;
    overflow: hidden !important;
    transform: scale(1.02) translateZ(0) !important;
    -webkit-transform: scale(1.02) translateZ(0) !important;
}

@keyframes infinite-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.animate-infinite-scroll {
    --speed: 30s;
    animation: infinite-scroll var(--speed) linear infinite;
}

@media (min-width: 1024px) {
    .animate-infinite-scroll {
        --speed: 60s;
        animation: infinite-scroll var(--speed) linear infinite;
    }
}