/**
 * Scroll-reveal animationer på sektionsniveau
 * Aktiveres når sektionen får data-reveal="..." og IntersectionObserver
 * tilføjer .sm-is-revealed. Stagger styres pr. barn via --sm-reveal-delay.
 */

.sm-section[data-reveal] .sm-row > * {
    opacity: 0;
    will-change: opacity, transform;
}

.sm-section[data-reveal].sm-is-revealed .sm-row > * {
    animation-duration: var(--sm-reveal-duration, 700ms);
    animation-timing-function: cubic-bezier(.22, .61, .36, 1);
    animation-fill-mode: both;
    animation-delay: var(--sm-reveal-delay, 0ms);
}

@keyframes sm-reveal-fade-in        { from { opacity: 0; }                              to { opacity: 1; } }
@keyframes sm-reveal-fade-in-up     { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes sm-reveal-fade-in-down   { from { opacity: 0; transform: translateY(-28px); }to { opacity: 1; transform: none; } }
@keyframes sm-reveal-slide-in-left  { from { opacity: 0; transform: translateX(-40px); }to { opacity: 1; transform: none; } }
@keyframes sm-reveal-slide-in-right { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes sm-reveal-zoom-in        { from { opacity: 0; transform: scale(.92); }       to { opacity: 1; transform: none; } }

.sm-section[data-reveal="fade-in"].sm-is-revealed        .sm-row > * { animation-name: sm-reveal-fade-in; }
.sm-section[data-reveal="fade-in-up"].sm-is-revealed     .sm-row > * { animation-name: sm-reveal-fade-in-up; }
.sm-section[data-reveal="fade-in-down"].sm-is-revealed   .sm-row > * { animation-name: sm-reveal-fade-in-down; }
.sm-section[data-reveal="slide-in-left"].sm-is-revealed  .sm-row > * { animation-name: sm-reveal-slide-in-left; }
.sm-section[data-reveal="slide-in-right"].sm-is-revealed .sm-row > * { animation-name: sm-reveal-slide-in-right; }
.sm-section[data-reveal="zoom-in"].sm-is-revealed        .sm-row > * { animation-name: sm-reveal-zoom-in; }

/* Respekter brugerens motion-præference */
@media (prefers-reduced-motion: reduce) {
    .sm-section[data-reveal] .sm-row > * {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}