/* ========================================
   ANIM.CSS - Eigene Animationen

custom-fade-in	        Einfaches Einblenden (ohne Bewegung)
custom-fade-up	       Von unten einblenden
custom-fade-down	 Von oben einblenden
custom-slide-left	      Von links einschieben
custom-slide-right	     Von rechts einschieben
custom-bounce-in	   Aufploppen mit Bounce
custom-bounce-up	Von unten hüpfen
custom-zoom-in	     Reinzoomen
custom-flip-in	         Drehen wie eine Tür
custom-rotate-in	   Rotierend einblenden
custom-glitch	            Kurzer Wackler
custom-blur-in	         Von unscharf zu scharf
custom-shake	       Schüttel-Effekt
custom-pulse	           Pulssierend
custom-wobble	          Wackelnd
custom-swing	           Schwingend (wie Pendel)
custom-light-speed	     Schnell von links
custom-roll-in	             Reinrollend
custom-jello	           Wackelpudding-Effekt




   ======================================== */

/* Basis Animation Setup */
[data-aos] {
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ----------------------------------------
   FADE Animationen
   ---------------------------------------- */
[data-aos="custom-fade-up"] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
[data-aos="custom-fade-up"].aos-animate {
    opacity: 1;
    transform: translateY(0);
}

[data-aos="custom-fade-down"] {
    opacity: 0;
    transform: translateY(-40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
[data-aos="custom-fade-down"].aos-animate {
    opacity: 1;
    transform: translateY(0);
}

/* ----------------------------------------
   SLIDE Animationen
   ---------------------------------------- */
[data-aos="custom-slide-left"] {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
[data-aos="custom-slide-left"].aos-animate {
    opacity: 1;
    transform: translateX(0);
}

[data-aos="custom-slide-right"] {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
[data-aos="custom-slide-right"].aos-animate {
    opacity: 1;
    transform: translateX(0);
}

/* ----------------------------------------
   BOUNCE Animationen
   ---------------------------------------- */
@keyframes customBounceIn {
    0% { opacity: 0; transform: scale(0.3); }
    50% { opacity: 1; transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

[data-aos="custom-bounce-in"] {
    opacity: 0;
}
[data-aos="custom-bounce-in"].aos-animate {
    animation: customBounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes customBounceUp {
    0% { opacity: 0; transform: translateY(60px); }
    60% { opacity: 1; transform: translateY(-15px); }
    80% { transform: translateY(5px); }
    100% { opacity: 1; transform: translateY(0); }
}

[data-aos="custom-bounce-up"] {
    opacity: 0;
}
[data-aos="custom-bounce-up"].aos-animate {
    animation: customBounceUp 0.9s ease forwards;
}

/* ----------------------------------------
   ZOOM Animationen
   ---------------------------------------- */
[data-aos="custom-zoom-in"] {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
[data-aos="custom-zoom-in"].aos-animate {
    opacity: 1;
    transform: scale(1);
}

/* ----------------------------------------
   FLIP Animationen
   ---------------------------------------- */
@keyframes customFlipIn {
    0% { opacity: 0; transform: perspective(400px) rotateY(90deg); }
    40% { transform: perspective(400px) rotateY(-10deg); }
    70% { transform: perspective(400px) rotateY(5deg); }
    100% { opacity: 1; transform: perspective(400px) rotateY(0); }
}

[data-aos="custom-flip-in"] {
    opacity: 0;
}
[data-aos="custom-flip-in"].aos-animate {
    animation: customFlipIn 1s ease forwards;
}

/* ----------------------------------------
   ROTATE Animationen
   ---------------------------------------- */
[data-aos="custom-rotate-in"] {
    opacity: 0;
    transform: rotate(-10deg) scale(0.9);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
[data-aos="custom-rotate-in"].aos-animate {
    opacity: 1;
    transform: rotate(0) scale(1);
}

/* ----------------------------------------
   GESTAGGERTE Animation (nacheinander)
   ---------------------------------------- */
.stagger-children > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.stagger-children.aos-animate > *:nth-child(1) { 
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s; 
}
.stagger-children.aos-animate > *:nth-child(2) { 
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.15s; 
}
.stagger-children.aos-animate > *:nth-child(3) { 
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s; 
}
.stagger-children.aos-animate > *:nth-child(4) { 
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.45s; 
}
.stagger-children.aos-animate > *:nth-child(5) { 
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.6s; 
}

/* ----------------------------------------
   EINFACHES FADE IN (ohne Bewegung)
   ---------------------------------------- */
[data-aos="custom-fade-in"] {
    opacity: 0;
    transition: opacity 0.8s ease;
}
[data-aos="custom-fade-in"].aos-animate {
    opacity: 1;
}

/* ----------------------------------------
   GLITCH Effekt
   ---------------------------------------- */
@keyframes customGlitch {
    0% { opacity: 0; transform: translateX(-5px); }
    10% { opacity: 1; transform: translateX(5px); }
    20% { transform: translateX(-3px); }
    30% { transform: translateX(3px); }
    40% { transform: translateX(-1px); }
    50% { transform: translateX(0); }
    100% { opacity: 1; transform: translateX(0); }
}

[data-aos="custom-glitch"] {
    opacity: 0;
}
[data-aos="custom-glitch"].aos-animate {
    animation: customGlitch 0.8s ease forwards;
}

/* ----------------------------------------
   TYPEWRITER (Buchstabe für Buchstabe)
   ---------------------------------------- */
@keyframes customTypewriter {
    from { clip-path: inset(0 100% 0 0); opacity: 0; }
    to { clip-path: inset(0 0 0 0); opacity: 1; }
}

[data-aos="custom-typewriter"] {
    opacity: 0;
}
[data-aos="custom-typewriter"].aos-animate {
    animation: customTypewriter 1.5s steps(20) forwards;
}

/* ----------------------------------------
   BLUR IN
   ---------------------------------------- */
[data-aos="custom-blur-in"] {
    opacity: 0;
    filter: blur(10px);
    transition: opacity 0.8s ease, filter 0.8s ease;
}
[data-aos="custom-blur-in"].aos-animate {
    opacity: 1;
    filter: blur(0);
}

/* ----------------------------------------
   SHAKE
   ---------------------------------------- */
@keyframes customShake {
    0% { opacity: 0; transform: translateX(0); }
    10% { transform: translateX(-10px); }
    20% { transform: translateX(10px); }
    30% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    50% { transform: translateX(-5px); }
    60% { transform: translateX(5px); }
    70% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
    90% { transform: translateX(0); }
    100% { opacity: 1; transform: translateX(0); }
}

[data-aos="custom-shake"] {
    opacity: 0;
}
[data-aos="custom-shake"].aos-animate {
    animation: customShake 1s ease forwards;
}

/* ----------------------------------------
   PULSE
   ---------------------------------------- */
@keyframes customPulse {
    0% { opacity: 0; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

[data-aos="custom-pulse"] {
    opacity: 0;
}
[data-aos="custom-pulse"].aos-animate {
    animation: customPulse 0.8s ease forwards;
}

/* ----------------------------------------
   WOBBLE
   ---------------------------------------- */
@keyframes customWobble {
    0% { opacity: 0; transform: rotate(0deg); }
    15% { transform: rotate(-5deg); }
    30% { transform: rotate(3deg); }
    45% { transform: rotate(-3deg); }
    60% { transform: rotate(2deg); }
    75% { transform: rotate(-1deg); }
    100% { opacity: 1; transform: rotate(0); }
}

[data-aos="custom-wobble"] {
    opacity: 0;
}
[data-aos="custom-wobble"].aos-animate {
    animation: customWobble 0.8s ease forwards;
}

/* ----------------------------------------
   SWING
   ---------------------------------------- */
@keyframes customSwing {
    0% { opacity: 0; transform: rotate(0deg); }
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-3deg); }
    100% { opacity: 1; transform: rotate(0); }
}

[data-aos="custom-swing"] {
    opacity: 0;
    transform-origin: top center;
}
[data-aos="custom-swing"].aos-animate {
    animation: customSwing 1s ease forwards;
}

/* ----------------------------------------
   LIGHT SPEED (von links schnell)
   ---------------------------------------- */
@keyframes customLightSpeed {
    0% { opacity: 0; transform: translateX(-100%) skewX(30deg); }
    60% { opacity: 1; transform: skewX(-10deg); }
    80% { transform: skewX(3deg); }
    100% { opacity: 1; transform: translateX(0) skewX(0); }
}

[data-aos="custom-light-speed"] {
    opacity: 0;
}
[data-aos="custom-light-speed"].aos-animate {
    animation: customLightSpeed 0.8s ease-out forwards;
}

/* ----------------------------------------
   ROLL IN
   ---------------------------------------- */
@keyframes customRollIn {
    0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
    100% { opacity: 1; transform: translateX(0) rotate(0); }
}

[data-aos="custom-roll-in"] {
    opacity: 0;
}
[data-aos="custom-roll-in"].aos-animate {
    animation: customRollIn 1s ease forwards;
}

/* ----------------------------------------
   JELLO
   ---------------------------------------- */
@keyframes customJello {
    0% { opacity: 0; transform: scale(0.3) skewX(0); }
    30% { opacity: 1; transform: scale(1.1) skewX(-10deg); }
    50% { transform: skewX(6deg); }
    70% { transform: skewX(-2deg); }
    100% { opacity: 1; transform: scale(1) skewX(0); }
}

[data-aos="custom-jello"] {
    opacity: 0;
}
[data-aos="custom-jello"].aos-animate {
    animation: customJello 1s ease forwards;
}


/* ----------------------------------------
   SHOWCASE SPLIT (Bild links, Text rechts)
   ---------------------------------------- */
[data-aos="custom-showcase-split"] .showcase-image {
    opacity: 0;
    transform: translateX(-80px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

[data-aos="custom-showcase-split"].aos-animate .showcase-image {
    opacity: 1;
    transform: translateX(0);
}

[data-aos="custom-showcase-split"] .showcase-content {
    opacity: 0;
    transform: translateX(80px);
    transition: opacity 1s ease-out 0.3s, transform 1s ease-out 0.3s;
}

[data-aos="custom-showcase-split"].aos-animate .showcase-content {
    opacity: 1;
    transform: translateX(0);
}

/* ----------------------------------------
   SHOWCASE SPLIT REVERSED (Bild rechts, Text links)
   ---------------------------------------- */
[data-aos="custom-showcase-split-rev"] .showcase-image {
    opacity: 0;
    transform: translateX(80px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

[data-aos="custom-showcase-split-rev"].aos-animate .showcase-image {
    opacity: 1;
    transform: translateX(0);
}

[data-aos="custom-showcase-split-rev"] .showcase-content {
    opacity: 0;
    transform: translateX(-80px);
    transition: opacity 1s ease-out 0.3s, transform 1s ease-out 0.3s;
}

[data-aos="custom-showcase-split-rev"].aos-animate .showcase-content {
    opacity: 1;
    transform: translateX(0);
}