/* =========================================================
   Index page custom styles
   Tailwind utility classes remain in index.html.
========================================================= */

.activity-card {
            animation: activityReveal 0.6s ease forwards;
        }

        @keyframes activityReveal {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

/* ========================================================= */

/* Hero slider reliability fixes */
        #home {
            position: relative;
            isolation: isolate;
        }

        #home .hero-slide {
            position: absolute;
            inset: 0;
            transition: opacity 1000ms ease-in-out, visibility 0s linear 1000ms;
        }

        #home .hero-slide.is-active {
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: auto !important;
            z-index: 10 !important;
            transition: opacity 1000ms ease-in-out, visibility 0s linear 0s;
        }

        #home .hero-slide:not(.is-active) {
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
            z-index: 0 !important;
        }

        #home .hero-bg {
            position: absolute;
            inset: 0;
            z-index: 0;
            display: block;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            opacity: 1 !important;
            visibility: visible !important;
        }

        #home .hero-slide>.bg-gradient-to-r {
            z-index: 1;
        }

        #home .hero-slide>.relative.z-10 {
            position: relative;
            z-index: 10 !important;
        }

        #home .hero-content,
        #home .hero-label,
        #home .hero-title,
        #home .hero-description,
        #home .hero-button {
            visibility: visible;
        }