/**
 * Scroll Motion Language — brand layer on top of AOS
 *
 * Vocabulary (keep it small so motion reads as one system):
 *   - Section heading + intro:  data-aos="fade-up", no delay
 *   - Card/grid items:          data-aos="fade-up", data-aos-delay = index * 100, cap 300
 *   - Large media (video/img):  data-aos="fade-up"
 *   - Small icons/badges:       data-aos="zoom-in"
 *   - Leistungen connectors:    data-aos="connector-grow|connector-pop" (leistungen-page.css)
 *   - Hero, forms, above-the-fold content: never scroll-animated (LCP/CLS, conversion)
 *
 * Timing comes from brand tokens (assets/brand-tokens.css):
 *   --ease-standard, --dur-fast/base/slow. AOS init (functions.php) sets
 *   duration 500 / offset 60 / once:true and disables on reduced motion.
 */

/* Token-based easing for every AOS transition */
[data-aos] {
    transition-timing-function: var(--ease-standard, cubic-bezier(.2, .8, .2, 1)) !important;
}

/* Restrained travel: AOS defaults to 100px, which reads flashy.
   24px keeps the reveal noticeable but calm (B2B). */
body[data-aos-easing] [data-aos='fade-up'] {
    transform: translate3d(0, 24px, 0);
}

body[data-aos-easing] [data-aos='zoom-in'] {
    transform: scale(.94);
}

body[data-aos-easing] [data-aos='fade-up'].aos-animate,
body[data-aos-easing] [data-aos='zoom-in'].aos-animate {
    transform: none;
}

/* Safety net: if aos.js ever fails to run (blocked, JS error), aos.css alone
   would leave [data-aos] content stuck at opacity 0. Reduced-motion users get
   everything instantly; and content is never hidden without JS. */
@media (prefers-reduced-motion: reduce) {
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}

/* ------------------------------------------------------------------
   Reading progress bar (single posts) — native CSS scroll-driven
   animation, zero JS. Progressive enhancement: browsers without
   animation-timeline (Firefox, older) simply never show the bar.
------------------------------------------------------------------- */
.reading-progress {
    display: none;
}

@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .reading-progress {
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1100; /* above the sticky masthead */
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, var(--accent, #2563eb), var(--accent-text, #1d4ed8));
            transform-origin: 0 50%;
            transform: scaleX(0);
            animation: reading-progress-grow linear both;
            animation-timeline: scroll(root);
            pointer-events: none;
        }

        @keyframes reading-progress-grow {
            from { transform: scaleX(0); }
            to   { transform: scaleX(1); }
        }
    }
}