/* Kreuzberg Audio Scroll Animations CSS */
/* ================================================================ */
/* CONFIGURATION (CSS VARIABLES) */
/* ================================================================ */
:root {
    /* Speed Settings */
    --kr-duration-slow: 1.2s;
    --kr-duration-normal: 0.8s;
    --kr-duration-fast: 0.5s;
    
    /* Distance Settings */
    --kr-distance: 30px;
    --kr-distance-side: 50px;
    --kr-scale-start: 0.8;
    
    /* Default values */
    --kr-duration: var(--kr-duration-normal);
    --kr-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ================================================================ */
/* SPEED CLASSES */
/* ================================================================ */
.kr-speed-slow { --kr-duration: var(--kr-duration-slow); }
.kr-speed-normal { --kr-duration: var(--kr-duration-normal); }
.kr-speed-fast { --kr-duration: var(--kr-duration-fast); }

/* ================================================================ */
/* BASE ANIMATION CLASS */
/* ================================================================ */
.kr-animate {
    opacity: 1;
    transform: none;
}

/* HIDE ELEMENTS ONLY WHEN JS IS ENABLED */
.kr-js-enabled .kr-animate {
    transform-style: preserve-3d;
    will-change: opacity, transform;
    opacity: 0;
}

/* SHOW ELEMENTS WHEN ANIMATED */
.kr-js-enabled .kr-animate.kr-visible {
    transition: opacity var(--kr-duration) var(--kr-ease), 
                transform var(--kr-duration) var(--kr-ease);
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) !important;
}

/* ================================================================ */
/* ANIMATION DIRECTIONS */
/* ================================================================ */

/* FROM BOTTOM */
.kr-js-enabled .kr-from-bottom {
    transform: translate3d(0, var(--kr-distance), 0);
}

/* FROM TOP */
.kr-js-enabled .kr-from-top {
    transform: translate3d(0, calc(var(--kr-distance) * -1), 0);
}

/* FROM LEFT */
.kr-js-enabled .kr-from-left {
    transform: translate3d(calc(var(--kr-distance-side) * -1), 0, 0);
}

/* FROM RIGHT */
.kr-js-enabled .kr-from-right {
    transform: translate3d(var(--kr-distance-side), 0, 0);
}

/* SCALE EFFECT */
.kr-js-enabled .kr-scale {
    transform: scale3d(var(--kr-scale-start), var(--kr-scale-start), var(--kr-scale-start));
}

/* ================================================================ */
/* STAGGER DELAYS */
/* ================================================================ */
.kr-delay-none { transition-delay: 0s !important; }
.kr-delay-short:nth-child(1) { transition-delay: 0s; }
.kr-delay-short:nth-child(2) { transition-delay: 0.1s; }
.kr-delay-short:nth-child(3) { transition-delay: 0.2s; }
.kr-delay-short:nth-child(4) { transition-delay: 0.3s; }

.kr-delay-medium:nth-child(1) { transition-delay: 0s; }
.kr-delay-medium:nth-child(2) { transition-delay: 0.2s; }
.kr-delay-medium:nth-child(3) { transition-delay: 0.4s; }
.kr-delay-medium:nth-child(4) { transition-delay: 0.6s; }

.kr-delay-long:nth-child(1) { transition-delay: 0s; }
.kr-delay-long:nth-child(2) { transition-delay: 0.4s; }
.kr-delay-long:nth-child(3) { transition-delay: 0.8s; }
.kr-delay-long:nth-child(4) { transition-delay: 1.2s; }

/* ================================================================ */
/* EMERGENCY FALLBACK - Show all hidden elements after timeout */
/* ================================================================ */
.kr-emergency-fallback .kr-animate {
    opacity: 1 !important;
    transform: none !important;
}

/* ================================================================ */
/* FOOTER EXCLUSIONS */
/* ================================================================ */
footer .kr-animate,
.footer .kr-animate,
.site-footer .kr-animate,
#footer .kr-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* ================================================================ */
/* ACCESSIBILITY: PREFERS-REDUCED-MOTION */
/* ================================================================ */
@media (prefers-reduced-motion: reduce) {
    .kr-animate,
    .kr-animate * {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
        transition-delay: 0s !important;
    }
}