/* ───────────────────────────────────────────────────────────── Maki — Page transitions ───────────────────────────────────────────────────────────── Site-wide crossfade between MPA navigations. What moves and what doesn't • Background images, noise overlays, decorative orbs, particle canvases, AND the top rail (topbar) carry `data-pt-keep` so they stay rock-steady during the swap. • Only the foreground content (the card / hero / main section) plays the fade + slide. The motion • In : opacity 0 → 1, translateY 18px → 0 • Out : opacity 1 → 0, translateY 0 → -10px • Curve: ease-out-expo-ish (snappy start, soft landing) • Time : 280 ms — long enough to read as a glide, short enough that it never feels like a delay. The JS controller toggles two classes on : • `pt-ready` → DOM is parsed, play fade-in • `pt-leaving` → about to navigate, play fade-out ───────────────────────────────────────────────────────────── */ :root { --pt-dur: 280ms; --pt-ease: cubic-bezier(0.22, 1, 0.36, 1); } /* Only direct children of that are NOT flagged as "keep" participate in the transition. */ html:not(.pt-ready) body > *:not([data-pt-keep]) { opacity: 0; transform: translateY(18px); } html.pt-ready body > *:not([data-pt-keep]) { animation: maki-pt-in var(--pt-dur) var(--pt-ease) both; } @keyframes maki-pt-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } html.pt-leaving body > *:not([data-pt-keep]) { opacity: 0; transform: translateY(-10px); transition: opacity var(--pt-dur) var(--pt-ease), transform var(--pt-dur) var(--pt-ease); animation: none; pointer-events: none; } /* Hard opt-out: ignore the transition entirely. */ @media (prefers-reduced-motion: reduce) { html:not(.pt-ready) body > *:not([data-pt-keep]), html.pt-ready body > *:not([data-pt-keep]), html.pt-leaving body > *:not([data-pt-keep]) { opacity: 1; transform: none; transition: none; animation: none; } }