@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .glass-header {
        @apply bg-white/80 dark:bg-[#111121]/80 backdrop-blur-md border-b border-gray-200/50 dark:border-gray-800/50;
    }

    .text-gradient {
        @apply bg-clip-text text-transparent bg-gradient-to-r from-[#0E4B94] to-[#2CD9C3];
    }

    .nav-link {
        @apply relative text-gray-700 dark:text-gray-300 font-medium cursor-pointer;
        transition: all 0.3s ease;
    }

    .nav-link:hover {
        font-weight: 700;
        background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), #2CD9C3 0%, #0E4B94 30%, #0E4B94 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: font-weight 0.2s ease, background-position 0.15s ease-out;
    }

    .nav-link::after {
        content: '';
        @apply absolute left-0 bottom-0 w-0 h-0.5 bg-gradient-to-r from-[#0E4B94] to-[#2CD9C3] transition-all duration-300;
    }

    .nav-link:hover::after {
        @apply w-full;
    }

    .nav-link-active {
        font-weight: 700;
        color: #0E4B94;
    }

    .nav-link-active::after {
        @apply w-full;
    }

    .hero-btn {
        @apply relative cursor-pointer transition-all duration-300;
    }

    .hero-blob {
        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .hero-section:has(.hero-btn:hover) .hero-blob {
        transform: scale(1.15);
        opacity: 0.5;
    }
}

/* Custom Animations */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }

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

.animate-marquee {
    animation: marquee 60s linear infinite;
}

@keyframes rotate-float {
    0% {
        transform: translateY(0) rotate(0deg);
    }

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

    100% {
        transform: translateY(0) rotate(360deg);
    }
}

.animate-rotate-float {
    animation: rotate-float 30s linear infinite;
}