/* Motion (2026-09-27). Everything here is progressive: the start states only apply once js/motion.js sets .motion-ready on , which it skips under prefers-reduced-motion. */ /* Sector bars grow in from the left */ .motion-ready .sector-track i { transform: scaleX(0); transform-origin: left center; transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1); } .motion-ready .sector-row.in .sector-track i { transform: scaleX(1); } /* System diagram builds left to right */ .motion-ready .diagram-node { opacity: 0; transform: translateX(-12px); transition: opacity 350ms ease-out, transform 350ms cubic-bezier(0.23, 1, 0.32, 1); } .motion-ready .diagram-node.in { opacity: 1; transform: none; } /* Detail panels open and close smoothly where the browser supports it */ @media (prefers-reduced-motion: no-preference) { :root { interpolate-size: allow-keywords; } details.chapter-detail::details-content { block-size: 0; overflow: hidden; transition: block-size 260ms cubic-bezier(0.32, 0.72, 0, 1), content-visibility 260ms allow-discrete; } details.chapter-detail[open]::details-content { block-size: auto; } /* Press feedback */ .btn, .chapter-detail > summary, .pdec-fab { transition-property: transform, background-color, color, border-color; transition-duration: 120ms; } .btn:active, .chapter-detail > summary:active, .pdec-fab:active { transform: scale(0.98); } }