/* Custom navbar styling for dark hero */
#main-header:not(.is-scrolled) a:not(.bg-gradient-to-r) {
    color: rgba(255, 255, 255, 0.9) !important;
}

#main-header:not(.is-scrolled) a.bg-brand-primary\/5 {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

#main-header:not(.is-scrolled) a:hover:not(.bg-gradient-to-r):not(.logo-link) {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* Fix for profile dropdown links inside the transparent header */
#main-header:not(.is-scrolled) .absolute.bg-white a {
    color: #1e293b !important;
    background-color: transparent !important;
}

#main-header:not(.is-scrolled) .absolute.bg-white a:hover {
    background-color: #f8fafc !important;
    /* bg-slate-50 */
    color: var(--color-brand-primary) !important;
}

#main-header:not(.is-scrolled) .absolute.bg-white a.text-red-600 {
    color: #dc2626 !important;
}

#main-header:not(.is-scrolled) .absolute.bg-white a.text-red-600:hover {
    background-color: #fef2f2 !important;
    /* bg-red-50 */
    color: #dc2626 !important;
}

#main-header:not(.is-scrolled) #mobile-menu-btn,
#main-header:not(.is-scrolled) #mobile-notification-btn {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

#main-header:not(.is-scrolled) #mobile-menu-btn img {
    filter: brightness(0) invert(1) !important;
}

/* Hero Animations */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

@keyframes slideUpFade {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }

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

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-slide-up-1 {
    animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-slide-up-2 {
    animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
    opacity: 0;
}

.animate-slide-up-3 {
    animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
    opacity: 0;
}

.glass-heavy {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.glass-hero {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.03) 100%);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    will-change: transform, backdrop-filter;
}

@keyframes flip-horizontal {
    0% {
        transform: perspective(400px) rotateY(0deg);
    }

    100% {
        transform: perspective(400px) rotateY(360deg);
    }
}

.animate-flip-horizontal {
    animation: flip-horizontal 4s infinite ease-in-out;
}

.preloader-ring-1 {
    animation-duration: 2s;
}

.preloader-ring-2 {
    animation-duration: 2.5s;
    animation-delay: 0.5s;
}