/*
 * Shared scroll-triggered animations for /1, /2, /3 landings.
 *
 * Mirrors the WordPress-style animation set already used on the main
 * badrenovo.de landing (resources/views/components/shared-styles.blade.php).
 * Pair with animations.js which auto-tags common selectors and runs the
 * IntersectionObserver that adds .animate-visible when an element
 * scrolls into view.
 */

/* Base scroll-in: subtle slide up + fade */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}
.animate-on-scroll.animate-visible { opacity: 1; transform: translateY(0); }

/* Slide from left */
.animate-slide-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}
.animate-slide-left.animate-visible { opacity: 1; transform: translateX(0); }

/* Slide from right */
.animate-slide-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}
.animate-slide-right.animate-visible { opacity: 1; transform: translateX(0); }

/* Scale up */
.animate-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.5s ease, transform 0.5s ease;
    will-change: opacity, transform;
}
.animate-scale.animate-visible { opacity: 1; transform: scale(1); }

/* Plain fade */
.animate-fade { opacity: 0; transition: opacity 0.8s ease; will-change: opacity; }
.animate-fade.animate-visible { opacity: 1; }

/* Slide up with snappy easing — used for hero images */
.animate-slide-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease,
                transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}
.animate-slide-up.animate-visible { opacity: 1; transform: translateY(0); }

/* WordPress-style bounce-up */
.animate-bounce-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.5s ease,
                transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: opacity, transform;
}
.animate-bounce-up.animate-visible { opacity: 1; transform: translateY(0); }

/* WordPress-style zoom + slight rotate */
.animate-zoom-rotate {
    opacity: 0;
    transform: scale(0.85) rotate(-3deg);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}
.animate-zoom-rotate.animate-visible {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* Stagger children — each child fades in with a 100ms cascade */
.stagger-children > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    will-change: opacity, transform;
}
.stagger-children.animate-visible > *:nth-child(1) { transition-delay:   0ms; opacity: 1; transform: translateY(0); }
.stagger-children.animate-visible > *:nth-child(2) { transition-delay: 100ms; opacity: 1; transform: translateY(0); }
.stagger-children.animate-visible > *:nth-child(3) { transition-delay: 200ms; opacity: 1; transform: translateY(0); }
.stagger-children.animate-visible > *:nth-child(4) { transition-delay: 300ms; opacity: 1; transform: translateY(0); }
.stagger-children.animate-visible > *:nth-child(5) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }
.stagger-children.animate-visible > *:nth-child(6) { transition-delay: 500ms; opacity: 1; transform: translateY(0); }
.stagger-children.animate-visible > *:nth-child(7) { transition-delay: 600ms; opacity: 1; transform: translateY(0); }
.stagger-children.animate-visible > *:nth-child(8) { transition-delay: 700ms; opacity: 1; transform: translateY(0); }

/* Continuous float — for hero accent shapes */
.animate-float { animation: brLandingFloatY 3s ease-in-out infinite; }
@keyframes brLandingFloatY {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll,
    .animate-slide-left,
    .animate-slide-right,
    .animate-scale,
    .animate-fade,
    .animate-slide-up,
    .animate-bounce-up,
    .animate-zoom-rotate,
    .stagger-children > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .animate-float { animation: none !important; }
}