/* ============================================================================ PAGE TRANSITION — compound, single source of truth. The subtle cross-page ENTER motion the app shell replays when the route changes (rise + fade by default). The BEHAVIOUR lives in _page-transition.js (window.PageTransition); this file holds only the motion TOKEN defaults (read by the controller at play time, so the motion governor can scale them and the Inspector can retune them live) + the resting `.pt` state. Pair with _page-transition.js. Import AFTER colors_and_type.css. NO pre-animation hidden state is baked in CSS — the resting state is fully VISIBLE, so no-JS / reduced-motion / print show content immediately; the controller animates FROM hidden via the Web Animations API (governor-scaled, restart-safe). This is the system entrance vocabulary (subtle rise + fade) — never a slideshow or an infinite decorative loop. Motion tokens (the compound-architecture contract) — declared on `.pt`, NOT :root, so a consumer overrides them per-instance (inline style, a data-pt-motion preset, or the Inspector) and the global never freezes. NEVER hardcode these durations/distances in the JS again. --pt-dur : entrance duration --pt-dist : travel distance for the rise / fall / slip variants --pt-ease : entrance easing (expo-out) --pt-stagger : per-item delay when staggering [data-pt-item] children ============================================================================ */ .pt { --pt-dur: 460ms; /* @kind other */ --pt-dist: 16px; --pt-ease: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --pt-stagger: 80ms; /* @kind other */ opacity: 1; /* resting state visible — the entrance is WAA, from hidden */ } /* Named timing presets — mirror _page-transition.config.js. A preset only retunes the tokens; the variant (direction) is orthogonal (data-pt-motion / the controller's `variant` option). */ .pt--gentle { --pt-dur: 560ms; --pt-dist: 18px; } .pt--snappy { --pt-dur: 300ms; --pt-dist: 12px; } .pt--deliberate { --pt-dur: 680ms; --pt-dist: 22px; } .pt--instant { --pt-dur: 1ms; --pt-dist: 0px; } /* ── Diagonal / circular wipe (View Transition) — PageTransition.wipe ─────── Whole-page state swap (e.g. the prototype's interface-language switch): the NEW state sweeps in from an anchor — either along a soft-edged diagonal front or as an expanding circle. The controller stamps `.pt-vt-wipe` + `data-pt-wipe=""` on for the duration, writes the anchor (--pt-wipe-x/-y) / gradient angle (--pt-wipe-angle) inline, and drives the REGISTERED length --pt-wipe-p on ::view-transition-new(root) via WAA (governor-scaled). The mask gradients below read it: opaque up to `p − feather`, transparent past `p` — feather 0 = a hard edge. At the initial 0px both gradients are fully transparent, so the new snapshot stays hidden until the sweep's first frame (the animation's fill:forwards then holds the fully-revealed end state until teardown). The wipe tokens sit on :root as the exception to the tokens-on-the-component rule — the instance IS the page (the view-transition pseudo tree hangs off ); there is no per-instance element to scope them to. */ @property --pt-wipe-p { syntax: ''; inherits: false; initial-value: 0px; } :root { --pt-wipe-dur: 2000ms; /* @kind other */ --pt-wipe-ease: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --pt-wipe-feather: 200px; /* soft-edge width; 0 = hard edge */ --pt-wipe-shape: circle; /* @kind other */ /* diagonal | circle — read by the controller */ } :root.pt-vt-wipe::view-transition-old(root), :root.pt-vt-wipe::view-transition-new(root) { animation: none; /* old stays put below — no default crossfade */ mix-blend-mode: normal; } :root.pt-vt-wipe[data-pt-wipe="diagonal"]::view-transition-new(root) { -webkit-mask-image: linear-gradient(var(--pt-wipe-angle, 225deg), #000 calc(var(--pt-wipe-p) - var(--pt-wipe-feather, 0px)), transparent var(--pt-wipe-p)); mask-image: linear-gradient(var(--pt-wipe-angle, 225deg), #000 calc(var(--pt-wipe-p) - var(--pt-wipe-feather, 0px)), transparent var(--pt-wipe-p)); } :root.pt-vt-wipe[data-pt-wipe="circle"]::view-transition-new(root) { -webkit-mask-image: radial-gradient(circle at var(--pt-wipe-x, 100%) var(--pt-wipe-y, 0px), #000 calc(var(--pt-wipe-p) - var(--pt-wipe-feather, 0px)), transparent var(--pt-wipe-p)); mask-image: radial-gradient(circle at var(--pt-wipe-x, 100%) var(--pt-wipe-y, 0px), #000 calc(var(--pt-wipe-p) - var(--pt-wipe-feather, 0px)), transparent var(--pt-wipe-p)); }