/* Greygram — page transitions via native View Transitions (Swup native:true).
   sohub-style. Darkness happens INSIDE the VT snapshots (no overlay):
   old page darkens to near-ink first, then the new page slides up over it. */

::view-transition-group(root) {
	animation-duration: 1.25s;
	animation-timing-function: cubic-bezier(1, 0, 0.25, 1);
}

/* Brand gradient fills the gap revealed as the old page scrolls up. */
::view-transition {
	background-image: linear-gradient(to bottom, var(--paper), var(--grey-light));
}

/* Old page: scrolls up 20% while dimming + blurring; paper shows through the gap below. */
@keyframes gg-old-out {
	0%   { transform: translateY(0);    filter: brightness(1);    }
	100% { transform: translateY(-20%); filter: brightness(0.12); }
}

/* New page: slides up; corners ease from round to flush. */
@keyframes gg-new-in {
	0%   { transform: translateY(100%); border-radius: 7.5rem 7.5rem 0 0; }
	80%  { border-radius: 2.5rem 2.5rem 0 0; }
	100% { transform: translateY(0); border-radius: 0; }
}

::view-transition-old(root) {
	z-index: 1;
	animation: gg-old-out 1.25s cubic-bezier(1, 0, 0.25, 1) both;
}

::view-transition-new(root) {
	z-index: 10000;
	overflow: hidden;
	transform-origin: bottom center;
	animation: gg-new-in 1.25s cubic-bezier(1, 0, 0.25, 1) both;
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(root),
	::view-transition-old(root),
	::view-transition-new(root) { animation: none !important; }
}