/* ============================================================
   TITO.TRADE – ANIMATIONS
   Motion communicate, not decorate.
   Progressiv: ohne JS / mit reduced-motion immer sichtbar.
   --load-dur / --rv-dur / delays zentral steuerbar.
   ============================================================ */

/* ---------- Hero-Load: Blur → Sharp, gestaffelt ---------- */
html.js .reveal-load,
html.js .reveal,
html.js .reveal-scale {
    opacity: 0;
}

/* Load-Reveal läuft als Keyframe – unabhängig vom JS-Timing */
html.js .reveal-load {
    animation: loadReveal var(--load-dur, 800ms) var(--ease-out) both;
    animation-delay: var(--load-delay, 0ms);
}

@keyframes loadReveal {
    from { opacity: 0; transform: translateY(28px); filter: blur(10px); }
    to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* ---------- Scroll-Reveal (IO-getriggert) ---------- */
html.js .reveal {
    transform: translateY(34px);
    filter: blur(6px);
    transition: opacity 700ms var(--ease-out),
                transform 700ms var(--ease-out),
                filter 700ms var(--ease-out);
    transition-delay: var(--rv-delay, 0ms);
    will-change: opacity, transform;
}
html.js .reveal.is-visible { opacity: 1; transform: none; filter: blur(0); }

html.js .reveal-scale {
    transform: scale(0.94) translateY(20px);
    transition: opacity 700ms var(--ease-out),
                transform 700ms var(--ease-out);
    transition-delay: var(--rv-delay, 0ms);
    will-change: opacity, transform;
}
html.js .reveal-scale.is-visible { opacity: 1; transform: none; }

/* ---------- Reduced Motion / no-motion-Flag ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html.js .reveal, html.js .reveal-scale { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* Debug/QA: html.no-motion → Instant-Jumps statt Smooth-Scroll */
html.no-motion { scroll-behavior: auto; }

html.no-motion .reveal, html.no-motion .reveal-load, html.no-motion .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
}
html.no-motion .hero-glow { animation: none !important; }
html.no-motion .cursor-dot { display: none; }