/* ============================================================ NextArc — Transitions, motion helpers, a11y ============================================================ */ /* —— Cross-document (MPA) View Transitions —— */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 600ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } .site-header { view-transition-name: site-header; } .site-footer { view-transition-name: site-footer; } /* —— Reveal-on-scroll: CSS transition, armed by , triggered by .is-in (added via IntersectionObserver). Time-based, so it works in a backgrounded tab and never depends on a rAF/animation ticker. —— */ html.js-reveal .reveal-text, html.js-reveal [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); will-change: opacity, transform; } html.js-reveal .reveal-text.is-in, html.js-reveal [data-reveal].is-in { opacity: 1; transform: none; } .case-more { margin-top: clamp(1.8rem, 4vh, 2.6rem); } /* —— Skip link (a11y) —— */ .skip { position: fixed; top: 0; left: 0; z-index: 400; background: var(--gold); color: var(--ink); padding: .7rem 1.1rem; font-size: var(--fs-small); letter-spacing: .04em; transform: translateY(-130%); transition: transform .3s var(--ease); } .skip:focus { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } html.js-reveal .reveal-text, html.js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } }