/* ################################################################################
#  ANLEITUNG: JS-BASIERTE ANIMATIONEN (STABIL & FLÜSSIG)                        #
################################################################################
#                                                                              #
#  ANWENDUNG:                                                                  #
#  Klasse im Backend: [reveal] + [effekt] + [optionaler delay]                 #
#  Beispiel: reveal rev-up d2                                                  #
#                                                                              #
#  EFFEKTE: rev-up, rev-down, rev-left, rev-right, rev-zoom, rev-blur,         #
#           rev-flip, rev-skew, rev-rotate, rev-stretch                        #
#                                                                              #
################################################################################
*/

/* Basis-Zustand für alle Reveal-Elemente */
.reveal {
    opacity: 0;
    transition-duration: 0.8s;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-property: opacity, transform, filter;
    will-change: transform, opacity;
}

/* Der "Trigger" - wird vom JS gesetzt */
.reveal.is-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0) skew(0);
    filter: blur(0);
}

/* --- DIE 10 EFFEKTE --- */

/* 1. Slide Up */
.rev-up { transform: translateY(40px); }

/* 2. Slide Down */
.rev-down { transform: translateY(-40px); }

/* 3. Slide Left */
.rev-left { transform: translateX(-50px); }

/* 4. Slide Right */
.rev-right { transform: translateX(50px); }

/* 5. Zoom In */
.rev-zoom { transform: scale(0.85); }

/* 6. Blur In (Edel) */
.rev-blur { filter: blur(10px); transform: scale(0.95); }

/* 7. Flip 3D */
.rev-flip { transform: perspective(1000px) rotateX(-60deg); }

/* 8. Skew */
.rev-skew { transform: skewY(3deg) translateY(30px); }

/* 9. Rotate In */
.rev-rotate { transform: rotate(-10deg) scale(0.9); }

/* 10. Stretch */
.rev-stretch { transform: scaleX(0.5); }

/* --- DELAYS --- */
.d1 { transition-delay: 0.1s; }
.d2 { transition-delay: 0.2s; }
.d3 { transition-delay: 0.3s; }
.d4 { transition-delay: 0.4s; }