/* ========================================
   ANIMATIONS
   ======================================== */

/* Fade In Animations */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade In Up */
.fade-in-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade In Left */
.fade-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Fade In Right */
.fade-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Scale In */
.scale-in {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.scale-in.visible {
    opacity: 1;
    transform: scale(1);
}

/* Slide In */
.slide-in {
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.slide-in.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Bounce In */
@keyframes bounceIn {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}
.bounce-in { animation: bounceIn 0.8s ease; }

/* Pulse Animation */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.pulse { animation: pulse 2s infinite; }

/* Shake Animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.shake { animation: shake 0.5s ease; }

/* Glow Effect */
@keyframes glow {
    0% { box-shadow: 0 0 5px var(--primary-blue); }
    50% { box-shadow: 0 0 20px var(--primary-blue), 0 0 40px var(--light-blue); }
    100% { box-shadow: 0 0 5px var(--primary-blue); }
}
.glow { animation: glow 2s infinite; }

/* Gradient Animation */
@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.gradient-animate {
    background: linear-gradient(270deg, var(--primary-blue), var(--light-blue), var(--gold));
    background-size: 200% 200%;
    animation: gradient 5s ease infinite;
}

/* Typing Animation */
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}
.typing {
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid var(--primary-blue);
    animation: typing 3s steps(40, end), blink 0.75s step-end infinite;
}
@keyframes blink {
    from, to { border-color: transparent; }
    50% { border-color: var(--primary-blue); }
}

/* Hover Effects */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-xl);
}

.hover-scale {
    transition: transform 0.3s ease;
}
.hover-scale:hover {
    transform: scale(1.05);
}

.hover-rotate {
    transition: transform 0.3s ease;
}
.hover-rotate:hover {
    transform: rotate(5deg);
}

/* Ripple Effect */
.ripple {
    position: relative;
    overflow: hidden;
}
.ripple::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, var(--white) 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform 0.5s, opacity 1s;
}
.ripple:active::after {
    transform: scale(0, 0);
    opacity: 0.3;
    transition: 0s;
}

/* Stagger Animation */
.stagger-item {
    opacity: 0;
    transform: translateY(20px);
}
.stagger-item.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Page Transition */
.page-transition {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.page-transition.loaded {
    opacity: 1;
    transform: translateY(0);
}

/* Counter Animation */
@keyframes countUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.counter-animate { animation: countUp 0.5s ease forwards; }

/* Loading Skeleton */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton {
    background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* Smooth Reveal */
.reveal {
    position: relative;
    overflow: hidden;
}
.reveal::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--primary-blue);
    transform: translateY(0);
    transition: transform 0.8s ease;
}
.reveal.visible::after {
    transform: translateY(100%);
}