/* Full-viewport inter-page transition (top/bottom shutters, same family as ILLUVISION boot) */ #page-tx { position: fixed; inset: 0; z-index: 10000; pointer-events: none; visibility: hidden; --illu-tx-dur: 1.2s; --illu-tx-ease: cubic-bezier(0.76, 0, 0.24, 1); } #page-tx.page-tx--active { pointer-events: auto; visibility: visible; } .page-tx__bar { position: absolute; left: 0; width: 100%; height: 50.05vh; background: #000; will-change: transform; transform: scaleY(0); transition: transform var(--illu-tx-dur) var(--illu-tx-ease) 0.1s; } .page-tx__bar--top { top: 0; transform-origin: top; } .page-tx__bar--bot { bottom: 0; transform-origin: bottom; } /* Exit: close over current view */ #page-tx.page-tx--leave .page-tx__bar--top, #page-tx.page-tx--leave .page-tx__bar--bot { transform: scaleY(1); } /* Arrival: start closed, then add .illu-tx-open on */ html.illu-tx-enter #page-tx { visibility: visible; pointer-events: none; } html.illu-tx-enter #page-tx .page-tx__bar--top, html.illu-tx-enter #page-tx .page-tx__bar--bot { transform: scaleY(1); transition: transform 0s; } html.illu-tx-enter.illu-tx-open #page-tx .page-tx__bar--top, html.illu-tx-enter.illu-tx-open #page-tx .page-tx__bar--bot { transform: scaleY(0); transition: transform var(--illu-tx-dur) var(--illu-tx-ease) 0.1s; } @media (prefers-reduced-motion: reduce) { #page-tx, .page-tx__bar, html.illu-tx-enter.illu-tx-open #page-tx .page-tx__bar--top, html.illu-tx-enter.illu-tx-open #page-tx .page-tx__bar--bot { transition-duration: 0.01ms !important; } }