/* ################################################################################
#  ANLEITUNG: HIGH-END SCROLL-ANIMATIONEN (PURE CSS)                           #
################################################################################
#                                                                              #
#  ANWENDUNG:                                                                  #
#  Trage im Contao-Backend beim Element unter "Experten-Einstellungen"         #
#  im Feld "CSS-Klasse" die Kombinationen ein.                                 #
#                                                                              #
#  DIE FORMEL: [reveal] + [effekt] + [optionaler delay]                        #
#                                                                              #
#  BEISPIELE:                                                                  #
#  1. reveal rev-up          (Standard: Fährt von unten hoch)                  #
#  2. reveal rev-blur d2     (Edel: Blurry Einblenden mit 0.2s Verzögerung)    #
#  3. reveal rev-left d1     (Von links rein mit 0.1s Verzögerung)             #
#                                                                              #
#  LISTE DER EFFEKTE:                                                          #
#  - rev-up      : Fährt von unten hoch                                        #
#  - rev-down    : Fährt von oben runter                                       #
#  - rev-left    : Kommt von links                                             #
#  - rev-right   : Kommt von rechts                                            #
#  - rev-zoom    : Zoomt von klein auf groß                                    #
#  - rev-blur    : Erst unscharf & klein, dann scharf                          #
#  - rev-flip    : 3D-Aufklappen nach vorne                                    #
#  - rev-skew    : Dynamisch schräg reinfahren                                 #
#  - rev-rotate  : Dreht sich leicht beim Erscheinen                           #
#  - rev-stretch : Dehnt sich horizontal aus                                   #
#                                                                              #
#  LISTE DER DELAYS (Wichtig für Grids/Spalten):                               #
#  - d1 : 0.1s Verzögerung                                                     #
#  - d2 : 0.2s Verzögerung                                                     #
#  - d3 : 0.3s Verzögerung                                                     #
#  - d4 : 0.4s Verzögerung                                                     #
#                                                                              #
################################################################################
*/

/* --- BASIS LOGIK --- */
.reveal {
    view-timeline: --reveal block;
    animation-fill-mode: both;
    animation-duration: 1ms; /* Notwendig für die Scroll-Verknüpfung */
    /* Startet bei 5% Sichtbarkeit, rastet bei 25% final ein (verhindert Zucken) */
    animation-range: entry 5% entry 25%; 
    animation-timing-function: ease-out;
    will-change: transform, opacity;
}

/* Fallback für alte Browser (Safari < 17 etc.) */
@supports not (view-timeline: --reveal) {
    .reveal { 
        opacity: 1 !important; 
        transform: none !important; 
        filter: none !important; 
    }
}

/* --- EFFEKT-DEFINITIONEN --- */

/* 1. Slide Up */
.rev-up { animation-name: anim-up; }
@keyframes anim-up {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 2. Slide Down */
.rev-down { animation-name: anim-down; }
@keyframes anim-down {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 3. Slide In Left */
.rev-left { animation-name: anim-left; }
@keyframes anim-left {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
}

/* 4. Slide In Right */
.rev-right { animation-name: anim-right; }
@keyframes anim-right {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

/* 5. Zoom In */
.rev-zoom { animation-name: anim-zoom; }
@keyframes anim-zoom {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* 6. Blur In (Edel) */
.rev-blur { animation-name: anim-blur; }
@keyframes anim-blur {
    from { opacity: 0; filter: blur(10px); transform: scale(0.95); }
    to { opacity: 1; filter: blur(0); transform: scale(1); }
}

/* 7. Flip 3D */
.rev-flip { animation-name: anim-flip; perspective: 1000px; }
@keyframes anim-flip {
    from { opacity: 0; transform: rotateX(-45deg); }
    to { opacity: 1; transform: rotateX(0); }
}

/* 8. Skew */
.rev-skew { animation-name: anim-skew; }
@keyframes anim-skew {
    from { opacity: 0; transform: skewY(2deg) translateY(20px); }
    to { opacity: 1; transform: skewY(0); translateY(0); }
}

/* 9. Rotate In */
.rev-rotate { animation-name: anim-rotate; }
@keyframes anim-rotate {
    from { opacity: 0; transform: rotate(-10deg) scale(0.9); }
    to { opacity: 1; transform: rotate(0) scale(1); }
}

/* 10. Stretch Reveal */
.rev-stretch { animation-name: anim-stretch; }
@keyframes anim-stretch {
    from { opacity: 0; transform: scaleX(0.6); }
    to { opacity: 1; transform: scaleX(1); }
}

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