.page-wipe { position: fixed; inset: 0; z-index: 100; pointer-events: none; background: var(--blue); transform: translateY(105%); visibility: hidden; }
.page-wipe span { position: absolute; left: 50%; top: 50%; color: var(--paper); font: 500 clamp(72px, 13vw, 180px)/1 var(--sans); letter-spacing: -.09em; transform: translate(-50%, -50%) scale(.94); opacity: 0; }
body.is-transitioning .page-wipe { visibility: visible; animation: page-wipe .82s cubic-bezier(.72,0,.22,1) both; }
body.is-transitioning .page-wipe span { animation: initials-flash .82s cubic-bezier(.2,.72,.25,1) both; }
.page-entering { animation: page-arrive .64s cubic-bezier(.2,.72,.25,1) both; }
.medium-leaving { animation: medium-out .2s ease-in both; }.medium-entering { animation: medium-in .46s cubic-bezier(.2,.72,.25,1) both; }
@keyframes page-wipe { 0% { transform: translateY(105%); } 44% { transform: translateY(0); } 56% { transform: translateY(0); } 100% { transform: translateY(-105%); } }
@keyframes page-arrive { from { opacity: .55; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes medium-out { from { opacity: 1; filter: blur(0); transform: translateX(0); } to { opacity: 0; filter: blur(2px); transform: translateX(-16px); } }
@keyframes medium-in { from { opacity: 0; filter: blur(2px); transform: translateX(24px); } to { opacity: 1; filter: blur(0); transform: translateX(0); } }
@keyframes initials-flash { 0%, 20% { opacity: 0; transform: translate(-50%, -50%) scale(.94); } 43%, 62% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .page-wipe, body.is-transitioning .page-wipe, .page-entering { animation: none; }.page-wipe { display: none; } }