/* ------------------------- */
/* --- SPEZIELLE ANIMATIONEN -- */
/* ------------------------- */

/* Keyframe-Animation für das sanfte Einblenden */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scroll-Animationen (Observer-basiert) */
[data-anim] {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
[data-anim="fade-in"] { transform: translateY(30px); }
[data-anim="slide-in-left"] { transform: translateX(-60px); }
[data-anim="slide-in-right"] { transform: translateX(60px); }

[data-anim].visible {
    opacity: 1;
    transform: translate(0, 0);
}

.anim-delay-1 { transition-delay: 0.2s; }
.anim-delay-2 { transition-delay: 0.4s; }
.anim-delay-3 { transition-delay: 0.6s; }


/* Sanfte Wellen-Animation für die Sektions-Trenner */
.wave-path {
    animation: wave 20s linear infinite;
}

@keyframes wave {
    0% {
        d: path("M0,10 C150,70 350,-20 500,10 S850,90 1000,30 V100 H0 Z");
    }
    50% {
        d: path("M0,40 C150,-20 350,90 500,40 S850,-20 1000,60 V100 H0 Z");
    }
    100% {
        d: path("M0,10 C150,70 350,-20 500,10 S850,90 1000,30 V100 H0 Z");
    }
}