/*
    FILE: animations.css
    PURPOSE: Motion, scroll reveal, gradient effects, and hover transitions
*/

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

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(16,185,129,0.08); }
    50% { box-shadow: 0 0 60px rgba(16,185,129,0.12); }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-24px); }
    to { opacity: 1; transform: translateX(0); }
}

.fade-up {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-up.visible,
.fade-up.revealed {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 { transition-delay: 100ms; }

.delay-2 { transition-delay: 200ms; }

.delay-3 { transition-delay: 300ms; }

.animated-gradient {
    background: linear-gradient(90deg, #4ade80, #10b981, #06b6d4, #ec4899);
    background-size: 300% 300%;
    animation: gradientShift 8s ease infinite;
}

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

.tilt-card { transform-style: preserve-3d; transition: transform 350ms ease, box-shadow 350ms ease; }

.tilt-card:hover { transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateY(-8px); box-shadow: 0 28px 90px rgba(0,0,0,0.22); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}