/* =========================================================================
   Page Transition - Wipe Overlay
   -------------------------------------------------------------------------
   ISOLATED FILE: This file is intentionally kept separate from style.css
   so that theme styling updates never accidentally break page transitions.
   -------------------------------------------------------------------------
   WARNING: Do NOT remove whitespace around + and - inside calc().
   CSS calc() REQUIRES whitespace around + and - operators, otherwise the
   whole expression is invalid and silently dropped by the parser. A bug
   like `calc(-70%+ 170% * var(...))` will break the View Transitions wipe.
   Always write `calc(-70% + 170% * var(...))` with spaces.
   -------------------------------------------------------------------------
   This section has two layers:
     1. Native View Transitions API (Chromium 126+) — mask-based wipe.
     2. JS fallback overlay (.page-transition-overlay) — transform wipe.
   Both produce the same upward-wipe visual. Keep them in sync if either
   timing (0.6s) or easing (cubic-bezier(.45, 0, .35, 1)) changes.
   ========================================================================= */

/* 1. Native View Transitions API (Chromium 126+) */
@view-transition {
	navigation: auto;
}
@media (prefers-reduced-motion: no-preference) {
	@property --wipe-progress {
		syntax: "<number>";
		initial-value: 0;
		inherits: false;
	}
	::view-transition-old(root), ::view-transition-new(root) {
		backface-visibility: hidden;
		mix-blend-mode: normal;
	}
	::view-transition-old(root) {
		animation: none 0.6s cubic-bezier(.45, 0, .35, 1);
		animation-fill-mode: both;
		opacity: 1;
		transform: none;
	}
	::view-transition-new(root) {
		animation: satouauto-wipe-in 0.6s cubic-bezier(.45, 0, .35, 1);
		animation-fill-mode: both;
		-webkit-mask-image: linear-gradient(0deg, #000 calc(-70% + 170% * var(--wipe-progress, 0)), transparent calc(170% * var(--wipe-progress, 0)));
		mask-image: linear-gradient(0deg, #000 calc(-70% + 170% * var(--wipe-progress, 0)), transparent calc(170% * var(--wipe-progress, 0)));
		opacity: 1;
		transform: none;
	}
	@keyframes satouauto-wipe-in {
		from {
			--wipe-progress: 0;
		}
		to {
			--wipe-progress: 1;
		}
	}
}

/* 2. JS fallback overlay (browsers without View Transitions API).
   The CSS animation `satouauto-overlay-reveal` is a failsafe: even if JS
   fails to load or throws, the overlay still auto-reveals the page content
   via this keyframe after ~0.8s, so the site is never stuck behind a black
   screen. When JS is available and the browser supports MPA View
   Transitions, the JS hides this overlay entirely via display:none. */
.page-transition-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: #000;
	z-index: 99999;
	pointer-events: none;
	transform: translateY(0);
	will-change: transform;
	transition: transform 0.6s cubic-bezier(.45, 0, .35, 1);
	animation: satouauto-overlay-reveal 0.6s cubic-bezier(.45, 0, .35, 1) 0.2s both;
}
.page-transition-overlay.wipe-out {
	transform: translateY(-100%);
	animation: none;
}
.page-transition-overlay.wipe-in {
	transform: translateY(0);
	animation: none;
}
@keyframes satouauto-overlay-reveal {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(-100%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.page-transition-overlay {
		display: none !important;
		animation: none !important;
	}
}