/* Page-to-page transition. Leaving: a night-sky curtain opens out from where you tapped. Arriving: it lifts away.
   Used by every page (landing, app, privacy, terms) with motion.js. Nothing here runs for reduced motion. */
.curtain, html.arriving::after {
  position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  background:
    url("/shared/logo.svg") 50% 50% / 64px no-repeat,
    radial-gradient(50vmax 50vmax at var(--cx, 50%) var(--cy, 60%), rgba(255, 106, 61, .5), transparent 62%),
    radial-gradient(70vmax 60vmax at 82% 8%, rgba(140, 80, 255, .55), transparent 66%),
    radial-gradient(60vmax 50vmax at 10% 100%, rgba(50, 100, 255, .35), transparent 66%),
    linear-gradient(165deg, #0b1235 0%, #050816 100%);
}
.curtain { clip-path: circle(0px at var(--cx) var(--cy)); transition: clip-path .56s cubic-bezier(.7, 0, .25, 1); }
.curtain.on { clip-path: circle(150vmax at var(--cx) var(--cy)); }
.curtain::after { content: ""; position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px; border-radius: 50%; border: 2px solid rgba(255, 170, 130, .55); opacity: 0; animation: curtain-ping 1.2s ease-out .45s infinite; }
@keyframes curtain-ping { from { opacity: .9; transform: scale(.5); } to { opacity: 0; transform: scale(1.6); } }
html.arriving::after { content: ""; clip-path: inset(0 0 0 0); transition: clip-path .75s cubic-bezier(.75, 0, .2, 1), opacity .75s ease; }
html.arriving.lift::after { clip-path: inset(0 0 100% 0); }
@media (prefers-reduced-motion: reduce) { .curtain, html.arriving::after { display: none; } }