/* All animation lives here. The reduced-motion block at the end switches every piece of it off. */
html {
    scroll-behavior: smooth;
}

/* Only hidden when script is present to reveal it again, so pages read fine with JavaScript off. */
.js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
}

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

.mobile-nav:not([hidden]) {
    animation: panel-in .2s ease-out;
}

@keyframes panel-in {
    from { opacity: 0; transform: translateY(-8px); }
}

/* pathLength="100" on each signal makes one dash cycle exactly 100 units, whatever the trace length. */
.circuit-field__signal {
    stroke-dasharray: 9 91;
    animation: circuit-travel var(--signal-duration, 7s) linear var(--signal-delay, 0s) infinite;
}

@keyframes circuit-travel {
    from { stroke-dashoffset: 109; }
    to { stroke-dashoffset: 9; }
}

/* Nothing scrolls on paper, so a section still waiting below the fold would print blank. */
@media print {
    .js .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }

    .js .reveal {
        opacity: 1;
        transform: none;
    }

    .btn:hover {
        transform: none;
    }

    .circuit-field__signal {
        display: none;
    }
}