/* 
  ====================================
  ANIMATIONS - Keyframes & Transitions
  ====================================
*/

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

/* Fade Out Animation */
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Slide In From Left */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide In From Right */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide In From Top */
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide In From Bottom */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scale In */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Scale Out */
@keyframes scaleOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* Bounce */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Pulse */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Floating Animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* Glow Animation */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(0, 168, 107, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 168, 107, 0.6);
    }
}

/* Rotate */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Shimmer Loading Animation */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* Gradient Animation */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Wiggle */
@keyframes wiggle {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-2deg);
    }
    75% {
        transform: rotate(2deg);
    }
}

/* Text Glow */
@keyframes textGlow {
    0%, 100% {
        text-shadow: 0 0 10px rgba(0, 168, 107, 0.5);
    }
    50% {
        text-shadow: 0 0 20px rgba(0, 168, 107, 0.8), 0 0 30px rgba(65, 105, 225, 0.6);
    }
}

/* Animation Classes */
.animate-fadeIn {
    animation: fadeIn var(--transition-base) ease-in-out;
}

.animate-fadeOut {
    animation: fadeOut var(--transition-base) ease-in-out;
}

.animate-slideInLeft {
    animation: slideInLeft var(--transition-base) ease-out;
}

.animate-slideInRight {
    animation: slideInRight var(--transition-base) ease-out;
}

.animate-slideInDown {
    animation: slideInDown var(--transition-base) ease-out;
}

.animate-slideInUp {
    animation: slideInUp var(--transition-base) ease-out;
}

.animate-scaleIn {
    animation: scaleIn var(--transition-base) ease-out;
}

.animate-scaleOut {
    animation: scaleOut var(--transition-base) ease-in;
}

.animate-bounce {
    animation: bounce 1s ease-in-out infinite;
}

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

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

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

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

.animate-wiggle {
    animation: wiggle 0.5s ease-in-out infinite;
}

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

/* Transition Utilities */
.transition-all {
    transition: all var(--transition-base);
}

.transition-colors {
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.transition-transform {
    transition: transform var(--transition-base);
}

.transition-fast {
    transition: all var(--transition-fast);
}

.transition-slow {
    transition: all var(--transition-slow);
}

/* Hover Scale */
.hover-scale:hover {
    transform: scale(1.05);
}

.hover-scale-sm:hover {
    transform: scale(1.02);
}

.hover-scale-lg:hover {
    transform: scale(1.1);
}

/* Hover Lift */
.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

/* Hover Color Shift */
.hover-green:hover {
    color: var(--primary-green);
}

.hover-blue:hover {
    color: var(--primary-blue);
}

/* Gradient Text Animation */
.gradient-text-animated {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

/* Loading Spinner */
.loader {
    border: 4px solid rgba(0, 168, 107, 0.2);
    border-top: 4px solid var(--primary-green);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: rotate 1s linear infinite;
}

/* Page Transitions */
.page {
    animation: fadeIn var(--transition-base);
}

.page.hidden {
    display: none;
}

/* Stagger Animation for Children */
.stagger-children > * {
    animation: slideInUp var(--transition-base) ease-out backwards;
}

.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 100ms; }
.stagger-children > *:nth-child(3) { animation-delay: 200ms; }
.stagger-children > *:nth-child(4) { animation-delay: 300ms; }
.stagger-children > *:nth-child(5) { animation-delay: 400ms; }
.stagger-children > *:nth-child(6) { animation-delay: 500ms; }

/* Parallax Effect */
.parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* 3D Effects */
.perspective {
    perspective: 1000px;
}

.card-3d {
    transition: transform var(--transition-base);
    transform-style: preserve-3d;
}

.card-3d:hover {
    transform: rotateY(10deg) rotateX(-10deg);
}

/* Success Animation */
@keyframes checkmark {
    0% {
        stroke-dashoffset: 100;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

.checkmark {
    stroke-dasharray: 100;
    animation: checkmark 0.5s ease-out forwards;
}