/* ========================================================================== Sacred Threshold page transition (PROTOTYPE) A deep-aubergine curtain rises to cover the outgoing page, a gold Kintsugi seam draws through the two-dove + heart mark and holds a calm beat, then the curtain lifts away to reveal the incoming page. Pieces -> peace, at every threshold. Paired with transition.js. Remove both files + the two lines per page to pull the whole effect. All motion is gated by prefers-reduced-motion in transition.js (no cover class is ever set for motion-sensitive visitors). ========================================================================== */ /* Flash-free instant cover for the INCOMING page: painted by a pure-CSS pseudo-element the moment transition.js (in ) adds .pfp-cover to , before the body renders. transition.js then mounts the animated overlay on top (identical colour, so the swap is invisible) and plays the reveal. */ html.pfp-cover::before { content: ""; position: fixed; inset: 0; z-index: 9998; background: #21113D; /* --colors-brand-primary-deep */ } /* The animated branded curtain, mounted by transition.js on both phases. */ .pfp-overlay { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: #21113D; transform: translateY(100%); /* parked below the viewport */ /* Timing from Authority Read (web-motion-patterns skill), nudged a little slower per client: cover 720ms, reveal 820ms, easing cubic-bezier(0.76,0,0.24,1). */ transition: transform 0.72s cubic-bezier(0.76, 0, 0.24, 1); pointer-events: none; will-change: transform; } /* Risen to fully cover the page. */ .pfp-overlay[data-state="cover"] { transform: translateY(0); } /* Lifts up and off the top to reveal the page beneath (a continuous upward sweep across the two page loads). Reveal runs slightly longer than the cover, matching Authority Read's 700ms. */ .pfp-overlay[data-state="reveal"] { transform: translateY(-100%); transition: transform 0.82s cubic-bezier(0.76, 0, 0.24, 1); } /* Used only on the incoming page for one frame so the curtain sits already-up without sliding in from the bottom. */ .pfp-overlay.pfp-instant { transition: none; } /* Incoming page only: if the overlay is already mounted before first paint, keep any opacity settling very fast, and keep the crest transform fixed so all contents ride the curtain on reveal instead of drifting against the lift. */ .pfp-overlay.pfp-quickfade .pfp-word, .pfp-overlay.pfp-quickfade .pfp-mark { transition: opacity 0.24s ease; } .pfp-overlay.pfp-quickfade .pfp-mark { transform: none; } /* --- Kintsugi gold seam: draws across as the curtain covers --- */ .pfp-seam { position: absolute; left: 50%; top: calc(50% + 84px); width: min(64vw, 380px); height: 2px; transform: translate(-50%, -50%) scaleX(0); transform-origin: center; background: linear-gradient( 90deg, transparent, #c98f3d 16%, #f2d08b 50%, #c98f3d 84%, transparent ); box-shadow: 0 0 22px rgba(242, 208, 139, 0.45); transition: transform 0.72s cubic-bezier(0.76, 0, 0.24, 1) 0.06s; } .pfp-overlay[data-state="cover"] .pfp-seam, .pfp-overlay[data-state="reveal"] .pfp-seam { transform: translate(-50%, -50%) scaleX(1); } /* --- Two-dove + heart mark (SVG mask so we can tint it cream -> gold). The url() resolves against THIS stylesheet, so the path is correct for pages at any directory depth. --- */ .pfp-mark { position: relative; width: clamp(112px, 16vw, 156px); aspect-ratio: 469 / 436; /* The site-wide wings-with-heart crest, in its own teal/gold, on the plum. */ background: url("../assets/sections/truth-handoff/truth-ornament-alpha.webp") center / contain no-repeat; opacity: 0; transform: translateY(10px) scale(0.96); transition: opacity 0.56s ease 0.16s, transform 0.62s cubic-bezier(0.2, 0.7, 0.2, 1) 0.16s; } .pfp-overlay[data-state="cover"] .pfp-mark, .pfp-overlay[data-state="reveal"] .pfp-mark { opacity: 1; transform: none; } /* --- The held word --- */ .pfp-word { position: absolute; top: calc(50% + 120px); left: 50%; transform: translateX(-50%); width: max-content; max-width: min(86vw, 520px); margin: 0; /* Use a stable system serif here: async webfont settling caused a subtle northward nudge during the covered hold. */ font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.15rem, 3.4vw, 1.6rem); font-style: italic; line-height: 1; letter-spacing: 0.02em; text-align: center; color: #f4efdf; opacity: 0; transition: opacity 0.52s ease 0.22s; } .pfp-overlay[data-state="cover"] .pfp-word, .pfp-overlay[data-state="reveal"] .pfp-word { opacity: 0.9; }