/* ========================================
   SCROLL-TRIGGERED ANIMATIONS
   Inspired by Mandril project
   ======================================== */

/* Base class for elements that should animate on scroll */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.3s ease;
    will-change: opacity, transform;
}

.animate-on-scroll.animated {
    opacity: 1;
    will-change: auto;
}

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

/* Fade in from bottom to top */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Slide in from left */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translate3d(-50px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Slide in from right */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translate3d(50px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

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

/* Pulse animation for icons */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

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

/* ========================================
   ANIMATION UTILITY CLASSES
   ======================================== */

.fade-in-up {
    animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.fade-in-up.animated {
    transform: none !important;
}

.slide-in-left {
    animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.slide-in-left.animated {
    transform: none !important;
}

.slide-in-right {
    animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.slide-in-right.animated {
    transform: none !important;
}

.scale-in {
    animation: scaleIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.scale-in.animated {
    transform: none !important;
}

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

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

/* ========================================
   LANGUAGE CHANGE ANIMATION
   ======================================== */

.lang-fade-out {
    opacity: 0 !important;
    transform: translateY(-15px) !important;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.lang-fade-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ========================================
   ANIMATION DELAYS
   ======================================== */

.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
}

.delay-400 {
    animation-delay: 0.4s;
}

.delay-500 {
    animation-delay: 0.5s;
}

/* ========================================
   ACCESSIBILITY - REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        animation: none !important;
        opacity: 1 !important;
        transition: none !important;
    }

    .fade-in-up,
    .slide-in-left,
    .slide-in-right,
    .scale-in,
    .pulse-animation,
    .float-animation {
        animation: none !important;
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

.animate-on-scroll,
.fade-in-up,
.slide-in-left,
.slide-in-right,
.scale-in {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}