/* * Nav "space warp" page transition — paired with assets/js/nav-warp.js. * * The JS toggles classes on ; this file defines the two visual halves: * 1. the content twist (nav + section/main recede/return with a rotate) and * 2. the full-screen hyperspace canvas the JS injects. * --warp-ms is set inline by the JS per direction (out vs in). * * All of this is transient (classes are removed after the animation), so it * never affects resting layout. prefers-reduced-motion users never get the * classes added (the JS bails), so no reduced-motion guard is needed here. */ /* The injected hyperspace layer: above everything (nav is z-index 10) so the warp reads as space rushing over the whole viewport. */ .sol-warp-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 9998; opacity: 0; pointer-events: none; mix-blend-mode: screen; /* streaks add light over the dark starfield */ } /* ---- content twist targets (present on every public page) ---- */ /* Transition is only defined while .sol-warp is on the body, so nothing here animates at rest. transform-origin centres the twist on the viewport. */ body.sol-warp nav, body.sol-warp section, body.sol-warp main { transition: transform var(--warp-ms, 650ms) cubic-bezier(0.6, 0.02, 0.35, 1), opacity var(--warp-ms, 650ms) ease, filter var(--warp-ms, 650ms) ease; transform-origin: 50% 50%; will-change: transform, opacity, filter; } /* Warp OUT end-state: page twists clockwise, shrinks into the distance, fades. */ body.sol-warp-out nav, body.sol-warp-out section, body.sol-warp-out main { transform: scale(0.55) rotate(26deg); opacity: 0; filter: blur(6px); } /* Warp IN start-state: applied WITHOUT a transition (no .sol-warp yet), so the page starts large and counter-twisted, then settles to identity once the JS flips on .sol-warp. */ body.sol-warp-in-start nav, body.sol-warp-in-start section, body.sol-warp-in-start main { transform: scale(1.65) rotate(-24deg); opacity: 0; filter: blur(8px); } /* Bonus: gently warp the real starfield too where it exists (interior pages), so the twist isn't only the overlay. Harmless where .space-bg is absent. */ body.sol-warp .space-bg .canvas { transition: transform var(--warp-ms, 650ms) cubic-bezier(0.6, 0.02, 0.35, 1); transform-origin: 50% 50%; } body.sol-warp-out .space-bg .canvas { transform: scale(1.6) rotate(18deg); } body.sol-warp-in-start .space-bg .canvas { transform: scale(1.6) rotate(-18deg); }