/* Scroll Animations */

/* Initial hidden states for animated elements */
.fade-in,
.fade-up,
.fade-down,
.fade-left,
.fade-right,
.zoom-in,
.zoom-out,
.flip-up,
.flip-down,
.slide-left,
.slide-right {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

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

/* Slide-in-bottom animation for upward floating effect */
@keyframes slideInBottom {
    0% {
        opacity: 0;
        transform: translateY(80px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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

/* Zoom animations */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoomOut {
    from {
        opacity: 0;
        transform: scale(1.2);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Flip animations */
@keyframes flipUp {
    from {
        opacity: 0;
        transform: perspective(800px) rotateX(20deg);
    }
    to {
        opacity: 1;
        transform: perspective(800px) rotateX(0);
    }
}

@keyframes flipDown {
    from {
        opacity: 0;
        transform: perspective(800px) rotateX(-20deg);
    }
    to {
        opacity: 1;
        transform: perspective(800px) rotateX(0);
    }
}

/* Slide animations */
@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideRight {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Rotate animations */
@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-180deg) scale(0.5);
    }
    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

/* Bounce animations */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

/* Active state classes (triggered by JavaScript) */
.fade-in.active {
    animation: fadeIn 0.8s ease-out forwards;
}

.fade-up.active {
    animation: fadeUp 0.8s ease-out forwards;
}

.fade-down.active {
    animation: fadeDown 0.8s ease-out forwards;
}

.fade-left.active {
    animation: fadeLeft 0.8s ease-out forwards;
}

.fade-right.active {
    animation: fadeRight 0.8s ease-out forwards;
}

.zoom-in.active {
    animation: zoomIn 0.8s ease-out forwards;
}

.zoom-out.active {
    animation: zoomOut 0.8s ease-out forwards;
}

.flip-up.active {
    animation: flipUp 0.8s ease-out forwards;
}

.flip-down.active {
    animation: flipDown 0.8s ease-out forwards;
}

.slide-left.active {
    animation: slideLeft 0.8s ease-out forwards;
}

.slide-right.active {
    animation: slideRight 0.8s ease-out forwards;
}

.rotate-in.active {
    animation: rotateIn 0.8s ease-out forwards;
}

.bounce-in.active {
    animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* Animation delays */
.delay-100 {
    animation-delay: 0.1s;
    transition-delay: 0.1s;
}

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

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

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

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

/* Animation duration variants */
.duration-fast {
    animation-duration: 0.5s !important;
    transition-duration: 0.5s !important;
}

.duration-normal {
    animation-duration: 0.8s !important;
    transition-duration: 0.8s !important;
}

.duration-slow {
    animation-duration: 1.2s !important;
    transition-duration: 1.2s !important;
}

/* Responsive timing adjustments for mobile devices */
@media (max-width: 768px) {
    .fade-in,
    .fade-up,
    .fade-down,
    .fade-left,
    .fade-right,
    .zoom-in,
    .zoom-out,
    .flip-up,
    .flip-down,
    .slide-left,
    .slide-right {
        transition-duration: 0.5s;
    }

    .fade-in.active,
    .fade-up.active,
    .fade-down.active,
    .fade-left.active,
    .fade-right.active,
    .zoom-in.active,
    .zoom-out.active,
    .flip-up.active,
    .flip-down.active,
    .slide-left.active,
    .slide-right.active,
    .rotate-in.active,
    .bounce-in.active {
        animation-duration: 0.5s;
    }

    /* Reduce transform distances on mobile */
    @keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(40px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes slideInBottom {
        0% {
            opacity: 0;
            transform: translateY(40px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

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

    @keyframes fadeLeft {
        from {
            opacity: 0;
            transform: translateX(20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

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

    /* Reduce animation delays on mobile */
    .delay-100 {
        animation-delay: 0.05s;
        transition-delay: 0.05s;
    }

    .delay-200 {
        animation-delay: 0.1s;
        transition-delay: 0.1s;
    }

    .delay-300 {
        animation-delay: 0.15s;
        transition-delay: 0.15s;
    }

    .delay-400 {
        animation-delay: 0.2s;
        transition-delay: 0.2s;
    }

    .delay-500 {
        animation-delay: 0.25s;
        transition-delay: 0.25s;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .fade-in,
    .fade-up,
    .fade-down,
    .fade-left,
    .fade-right,
    .zoom-in,
    .zoom-out,
    .flip-up,
    .flip-down,
    .slide-left,
    .slide-right {
        animation: none !important;
        transition: opacity 0.3s ease-out !important;
        transform: none !important;
    }

    .fade-in.active,
    .fade-up.active,
    .fade-down.active,
    .fade-left.active,
    .fade-right.active,
    .zoom-in.active,
    .zoom-out.active,
    .flip-up.active,
    .flip-down.active,
    .slide-left.active,
    .slide-right.active,
    .rotate-in.active,
    .bounce-in.active {
        animation: fadeIn 0.3s ease-out forwards !important;
    }

    .delay-100,
    .delay-200,
    .delay-300,
    .delay-400,
    .delay-500 {
        animation-delay: 0s !important;
        transition-delay: 0s !important;
    }
}