[data-animate] {
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;
}

/* =====================
   ANIMATION: FADE
   ====================== */
[data-animate="fade"] {
    opacity: 0;
}

[data-animate="fade"].active {
    opacity: 1;
}

/* =====================
   ANIMATION: FADE UP
   ====================== */
[data-animate="fade-up"] {
    opacity: 0;
    transform: translateY(50px);
}

[data-animate="fade-up"].active {
    opacity: 1;
    transform: translateY(0);
}

/* =====================
   ANIMATION: FADE DOWN
   ====================== */
[data-animate="fade-down"] {
    opacity: 0;
    transform: translateY(-50px);
}

[data-animate="fade-down"].active {
    opacity: 1;
    transform: translateY(0);
}

/* =====================
   ANIMATION: FADE LEFT
   ====================== */
[data-animate="fade-left"] {
    opacity: 0;
    transform: translateX(50px);
}

[data-animate="fade-left"].active {
    opacity: 1;
    transform: translateX(0);
}

/* =====================
   ANIMATION: FADE RIGHT
   ====================== */
[data-animate="fade-right"] {
    opacity: 0;
    transform: translateX(-50px);
}

[data-animate="fade-right"].active {
    opacity: 1;
    transform: translateX(0);
}

/* =====================
   ANIMATION: ZOOM IN
   ====================== */
[data-animate="zoom-in"] {
    opacity: 0;
    transform: scale(0.85);
}

[data-animate="zoom-in"].active {
    opacity: 1;
    transform: scale(1);
}

/* =====================
   ANIMATION: ZOOM OUT
   ====================== */
[data-animate="zoom-out"] {
    opacity: 0;
    transform: scale(1.15);
}

[data-animate="zoom-out"].active {
    opacity: 1;
    transform: scale(1);
}

/* =====================
   ANIMATION: SLIDE UP
   ====================== */
[data-animate="slide-up"] {
    opacity: 0;
    transform: translateY(100px);
}

[data-animate="slide-up"].active {
    opacity: 1;
    transform: translateY(0);
}

/* =====================
   ANIMATION: SLIDE LEFT
   ====================== */
[data-animate="slide-left"] {
    opacity: 0;
    transform: translateX(100px);
}

[data-animate="slide-left"].active {
    opacity: 1;
    transform: translateX(0);
}

/* =====================
   ANIMATION: FLIP UP
   ====================== */
[data-animate="flip-up"] {
    opacity: 0;
    transform: perspective(1000px) rotateX(90deg);
    transform-origin: bottom;
}

[data-animate="flip-up"].active {
    opacity: 1;
    transform: perspective(1000px) rotateX(0);
}

/* =====================
   ANIMATION: ROTATE IN
   ====================== */
[data-animate="rotate-in"] {
    opacity: 0;
    transform: rotate(-10deg) scale(0.95);
}

[data-animate="rotate-in"].active {
    opacity: 1;
    transform: rotate(0) scale(1);
}