/* =======================
   Keyframes
========================== */
@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(70px);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

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

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

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

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

@keyframes wave {
    0% {
        background-position: 0 bottom;
    }

    100% {
        background-position: -1440px bottom;
    }
}

@keyframes moveParticles {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 120px 120px;
    }
}

/* =======================
   Animations
========================== */
/* .animate-fade-up {
    animation: fadeUp 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {

    .animate-fade-up,
    .animate-fade-in {
        animation: none !important;
    }
} */

/* =======================
   Visual Effects
========================== */
.glassmorphic {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.animate-gradient {
    background-size: 200% 200%;
    animation: gradient 8s ease-in-out infinite;
}

/* =======================
   Backgrounds
========================== */
.wave-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(200,220,255,0.4)" fill-opacity="1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L0,320Z"></path></svg>') repeat-x;
    animation: wave 15s linear infinite;
}

.particles {
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><circle cx="20" cy="20" r="2" fill="rgba(150,150,150,0.3)"/><circle cx="60" cy="60" r="3" fill="rgba(150,150,150,0.4)"/><circle cx="90" cy="30" r="2" fill="rgba(150,150,150,0.3)"/><circle cx="40" cy="80" r="2" fill="rgba(150,150,150,0.2)"/></svg>') repeat;
    animation: moveParticles 30s linear infinite;
}

/* =======================
   Utility
========================== */
.hidden {
    display: none;
}