/* atomic-inview — Fade/Slide-in. Früh laden (z. B. via <f:asset.css>), damit der
   Start-Zustand vor dem JS gilt (kein Flash). Tunebar über CSS-Variablen.

   Wrapper-Modus  (ohne target): die <atomic-inview> selbst wird eingeblendet.
   Observer-Modus (mit target):  die per Selektor markierten [data-reveal]-Elemente. */

atomic-inview[target] { display: contents; }

atomic-inview:not([target]),
[data-reveal] {
    opacity: 0;
    transform: translateY(var(--atomic-inview-shift, 24px));
    transition:
        opacity var(--atomic-inview-duration, 0.8s) var(--atomic-inview-easing, cubic-bezier(0.22, 0.61, 0.36, 1)),
        transform var(--atomic-inview-duration, 0.8s) var(--atomic-inview-easing, cubic-bezier(0.22, 0.61, 0.36, 1));
}

atomic-inview:not([target]) { display: block; }

atomic-inview:not([target]).revealed,
[data-reveal].revealed {
    opacity: 1;
    transform: none;
}

[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }
[data-reveal-delay="4"] { transition-delay: 0.4s; }
[data-reveal-delay="5"] { transition-delay: 0.5s; }

@media (prefers-reduced-motion: reduce) {
    atomic-inview:not([target]),
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}