/* Motion system. Subtle, fast, purposeful — see docs/DEVELOPMENT-BRIEF.md
   §18. Reduced-motion is handled globally in base.css (durations collapse
   to ~0), so every rule here can stay simple. */

/* Scoped to .js (set by an inline script in <head>, before paint) so that
   without JavaScript — or if reveal.js fails to load — content is fully
   visible by default. Motion is an enhancement layer, never a requirement
   to see the page (Development Master Prompt §21: "JavaScript darf nicht
   erforderlich sein, damit grundlegender Content funktioniert"). */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--duration-slow) var(--ease-out),
                transform var(--duration-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* Hero signature motif: the oscilloscope trace draws itself in once, on
   load — not looping, not decorative-only (it is the brand's own waveform
   mark). */
.hero__waveform polyline {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: beos-trace 1.4s var(--ease-out) 0.2s forwards;
}

@keyframes beos-trace {
    to { stroke-dashoffset: 0; }
}