/* ZeroGrav DM: the way back from Arania, the mirror of falling in. The campaign's page closes to a window the size of the globe, while this page zooms back out from inside the globe around it. Its twin, falling in, lives in the campaign's own css/fall.css. The script in index.html's decides which page changes get this and sets --fall-x, -y, -r (the globe's centre and radius) and --fall-s (how far the globe grows to fill the screen). */ @view-transition { navigation: auto; } /* One number, --fall-k, runs the whole thing: this page's scale and the closing window's radius both follow it, so the window always sits exactly on the globe's rim. It lives on the pair so the old and new pages share it. */ @property --fall-k { syntax: ""; inherits: true; initial-value: 1; } html:active-view-transition-type(climb-out)::view-transition-image-pair(root) { animation: fall-shrink .9s cubic-bezier(.45, 0, .2, 1) both; } html:active-view-transition-type(climb-out)::view-transition-old(root) { z-index: 1; mix-blend-mode: normal; animation: fall-hide .9s linear both; clip-path: circle(calc(var(--fall-r) * var(--fall-k)) at var(--fall-x) var(--fall-y)); } html:active-view-transition-type(climb-out)::view-transition-new(root) { mix-blend-mode: normal; animation: none; transform-origin: var(--fall-x) var(--fall-y); transform: scale(var(--fall-k)); } @keyframes fall-shrink { from { --fall-k: var(--fall-s); } to { --fall-k: 1; } } /* the last of the campaign melts into the globe it closed onto */ @keyframes fall-hide { 0%, 72% { opacity: 1; } 100% { opacity: 0; } }