/* Animation Keyframes */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation Classes */
.animate-fadeIn {
    animation: fadeIn 1s ease-out forwards;
}

.animate-slideDown {
    animation: slideDown 1s ease-out forwards;
}

.animate-slideUp {
    animation: slideUp 1s ease-out forwards;
}

/* Animation Delays */
.animation-delay-300 {
    animation-delay: 300ms;
}

.animation-delay-600 {
    animation-delay: 600ms;
}

.parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
/* Animated gradient background */
@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

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

/* Floating decorative elements */
.floating-element {
    @apply absolute w-24 h-24 rounded-full opacity-20 blur-xl;
    background: radial-gradient(circle, rgba(253, 230, 138, 0.4) 0%, rgba(253, 230, 138, 0) 70%);
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

/* Decorative line animation */
@keyframes widthGrow {
    from { width: 0; }
    to { width: 6rem; } /* w-24 = 6rem */
}

.animate-widthGrow {
    animation: widthGrow 1s ease-out forwards;
}

/* Text glow effect on hover */
.text-glow:hover {
    text-shadow: 0 0 20px rgba(253, 230, 138, 0.5);
}

/* Mouse trail effect (optional - requires JavaScript) */
.mouse-particle {
    @apply absolute pointer-events-none rounded-full;
    background: radial-gradient(circle, rgba(253, 230, 138, 0.4) 0%, rgba(253, 230, 138, 0) 70%);
    width: 10px;
    height: 10px;
    animation: fadeOut 1s ease-out forwards;
}

@keyframes fadeOut {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(2); opacity: 0; }
}