/*==================================================================
  ANIMATIONS
  ------------------------------------------------------------------
  Extends animate.css (loaded from CDN) with the "small" travel
  variants used across MainSys builds, plus scroll-reveal helpers.

  Usage with WOW.js:
    <div class="wow animate__animated animate__fadeInSmallUp"
         data-wow-delay="0.125s"></div>
==================================================================*/


/*------ FADE IN SMALL UP ------*/
.animate__fadeInSmallUp {
    -webkit-animation-name: fadeInSmallUp;
    animation-name: fadeInSmallUp;
}

@-webkit-keyframes fadeInSmallUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInSmallUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}


/*------ FADE IN SMALL DOWN ------*/
.animate__fadeInSmallDown {
    -webkit-animation-name: fadeInSmallDown;
    animation-name: fadeInSmallDown;
}

@-webkit-keyframes fadeInSmallDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -50px, 0);
        transform: translate3d(0, -50px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInSmallDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -50px, 0);
        transform: translate3d(0, -50px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}


/*------ FADE IN SMALL LEFT ------*/
.animate__fadeInSmallLeft {
    -webkit-animation-name: fadeInSmallLeft;
    animation-name: fadeInSmallLeft;
}

@-webkit-keyframes fadeInSmallLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-50px, 0, 0);
        transform: translate3d(-50px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInSmallLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-50px, 0, 0);
        transform: translate3d(-50px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}


/*------ FADE IN SMALL RIGHT ------*/
.animate__fadeInSmallRight {
    -webkit-animation-name: fadeInSmallRight;
    animation-name: fadeInSmallRight;
}

@-webkit-keyframes fadeInSmallRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(50px, 0, 0);
        transform: translate3d(50px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInSmallRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(50px, 0, 0);
        transform: translate3d(50px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}


/*------ MANUAL SCROLL REVEAL (no WOW dependency) ------
  Add .reveal / .slide-in-left / .slide-in-right and scripts.js
  adds .appear when the element enters the viewport.
------------------------------------------------------*/
.reveal,
.slide-in-left,
.slide-in-right {
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal {
    transform: translateY(40px);
}

.slide-in-left {
    transform: translateX(-60px);
}

.slide-in-right {
    transform: translateX(60px);
}

.reveal.appear,
.slide-in-left.appear,
.slide-in-right.appear {
    opacity: 1;
    transform: translate(0, 0);
}


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

    .reveal,
    .slide-in-left,
    .slide-in-right {
        opacity: 1;
        transform: none;
    }
}