@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap');

.font-tajawal {
    font-family: 'Tajawal', sans-serif;
}

.text-gradient-primary {
    @apply text-transparent bg-clip-text bg-gradient-to-r from-[#4A90E2] to-[#60A5FA];
}

.text-gradient-secondary {
    @apply text-transparent bg-clip-text bg-gradient-to-r from-[#60A5FA] to-[#81A8F0];
}

.text-gradient-tertiary {
    @apply text-transparent bg-clip-text bg-gradient-to-r from-[#81A8F0] to-[#4A90E2];
}

@keyframes float {

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

    50% {
        transform: translate(0, 20px);
    }
}

@keyframes float-slow {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        transform: translate(0, 30px) rotate(5deg);
    }
}

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

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

.animate-float-delay {
    animation: float 7s ease-in-out infinite;
    animation-delay: 1s;
}

.animate-float-delay-2 {
    animation: float 9s ease-in-out infinite;
    animation-delay: 2s;
}

@keyframes scroll-down {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(200%);
    }
}

.animate-scroll-down {
    animation: scroll-down 2s ease-in-out infinite;
}

@keyframes gradient-x {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.animate-gradient-x {
    animation: gradient-x 15s ease infinite;
    background-size: 200% auto;
}


@keyframes morph {

    0%,
    100% {
        border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
    }

    25% {
        border-radius: 30% 60% 70% 40%/50% 60% 30% 60%;
    }

    50% {
        border-radius: 40% 60% 30% 70%/60% 30% 70% 40%;
    }

    75% {
        border-radius: 60% 40% 70% 30%/40% 70% 30% 60%;
    }
}

@keyframes scroll {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

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

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

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

.animate-morph {
    animation: morph 15s linear infinite;
}

.animate-pulse-slow {
    animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-gradient-fast {
    background-size: 200% auto;
    animation: gradient 4s linear infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.shadow-neon {
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.1),
        0 0 40px rgba(34, 211, 238, 0.1);
}

.delay-1000 {
    animation-delay: 1s;
}



[x-cloak] {
    display: none !important;
}

body {
    font-family: 'Tajawal', sans-serif;
}

.gradient-text {
    background: linear-gradient(to right, #6366f1, #4f46e5, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradient 3s ease infinite;
    background-size: 200% auto;
}

.hero-gradient {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #8b5cf6 100%);
    animation: gradient 15s ease infinite;
    background-size: 400% 400%;
}

.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-10px);
}

.nav-blur {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.8);
}

.dark .nav-blur {
    background-color: rgba(17, 24, 39, 0.8);
}