@view-transition {
	navigation: auto;
}

::view-transition-group(root) {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*) {
		animation: none;
	}
}

@keyframes fade-out {
	to {
		opacity: 0;
	}
}
@keyframes fade-in {
	from {
		opacity: 0;
	}
}

/* --- DEFAULT (Crossfade) --- */
html[data-transition="default"]::view-transition-old(slide-canvas) {
	animation: 0.3s ease both fade-out;
}
html[data-transition="default"]::view-transition-new(slide-canvas) {
	animation: 0.3s ease both fade-in;
}

/* --- CONTROLS (Crossfade on every transition) --- */
::view-transition-old(slide-controls) {
	animation: 0.3s ease both fade-out;
}
::view-transition-new(slide-controls) {
	animation: 0.3s ease both fade-in;
}

/* --- SLIDE (Pushes old out and new in) --- */
html[data-transition="slide"]:not([data-direction="backward"])::view-transition-old(slide-canvas) {
	animation: 0.4s cubic-bezier(0.4, 0, 0.2, 1) both slide-out-left;
}
html[data-transition="slide"]:not([data-direction="backward"])::view-transition-new(slide-canvas) {
	animation: 0.4s cubic-bezier(0.4, 0, 0.2, 1) both slide-in-right;
}
html[data-transition="slide"][data-direction="backward"]::view-transition-old(slide-canvas) {
	animation: 0.4s cubic-bezier(0.4, 0, 0.2, 1) both slide-out-right;
}
html[data-transition="slide"][data-direction="backward"]::view-transition-new(slide-canvas) {
	animation: 0.4s cubic-bezier(0.4, 0, 0.2, 1) both slide-in-left;
}

@keyframes slide-out-left {
	to {
		transform: translateX(-100%);
		opacity: 0;
	}
}
@keyframes slide-in-right {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
}
@keyframes slide-out-right {
	to {
		transform: translateX(100%);
		opacity: 0;
	}
}
@keyframes slide-in-left {
	from {
		transform: translateX(-100%);
		opacity: 0;
	}
}

/* --- WIPE (Edge-to-Edge Sweep) --- */
html[data-transition="wipe"]:not([data-direction="backward"])::view-transition-old(slide-canvas) {
	animation: none;
}
html[data-transition="wipe"]:not([data-direction="backward"])::view-transition-new(slide-canvas) {
	animation: 0.5s cubic-bezier(0.4, 0, 0.2, 1) both wipe-in-right;
	z-index: 2;
}
html[data-transition="wipe"][data-direction="backward"]::view-transition-old(slide-canvas) {
	animation: 0.5s cubic-bezier(0.4, 0, 0.2, 1) both wipe-out-right;
	z-index: 2;
}
html[data-transition="wipe"][data-direction="backward"]::view-transition-new(slide-canvas) {
	animation: none;
	z-index: 1;
}

@keyframes wipe-in-right {
	from {
		clip-path: inset(0 0 0 100%);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}
@keyframes wipe-out-right {
	from {
		clip-path: inset(0 0 0 0);
	}
	to {
		clip-path: inset(0 0 0 100%);
	}
}

/* --- ZOOM (Scale In/Out with Depth) --- */
html[data-transition="zoom"]:not([data-direction="backward"])::view-transition-old(slide-canvas) {
	animation: 0.5s ease-in-out both zoom-out-back;
}
html[data-transition="zoom"]:not([data-direction="backward"])::view-transition-new(slide-canvas) {
	animation: 0.5s ease-in-out both zoom-in-front;
}
html[data-transition="zoom"][data-direction="backward"]::view-transition-old(slide-canvas) {
	animation: 0.5s ease-in-out both zoom-out-front;
	z-index: 2;
}
html[data-transition="zoom"][data-direction="backward"]::view-transition-new(slide-canvas) {
	animation: 0.5s ease-in-out both zoom-in-back;
	z-index: 1;
}

@keyframes zoom-out-back {
	to {
		transform: scale(0.8);
		opacity: 0;
	}
}
@keyframes zoom-in-front {
	from {
		transform: scale(1.2);
		opacity: 0;
	}
}
@keyframes zoom-out-front {
	to {
		transform: scale(1.2);
		opacity: 0;
	}
}
@keyframes zoom-in-back {
	from {
		transform: scale(0.8);
		opacity: 0;
	}
}

/* --- FLIP (3D Card Rotation) --- */
html[data-transition="flip"]::view-transition-group(slide-canvas) {
	perspective: 1500px;
}
html[data-transition="flip"]:not([data-direction="backward"])::view-transition-old(slide-canvas) {
	animation: 0.6s ease-in both flip-out-left;
}
html[data-transition="flip"]:not([data-direction="backward"])::view-transition-new(slide-canvas) {
	animation: 0.6s ease-out both flip-in-right;
}
html[data-transition="flip"][data-direction="backward"]::view-transition-old(slide-canvas) {
	animation: 0.6s ease-in both flip-out-right;
}
html[data-transition="flip"][data-direction="backward"]::view-transition-new(slide-canvas) {
	animation: 0.6s ease-out both flip-in-left;
}

@keyframes flip-out-left {
	to {
		transform: rotateY(-90deg);
		opacity: 0;
	}
}
@keyframes flip-in-right {
	from {
		transform: rotateY(90deg);
		opacity: 0;
	}
}
@keyframes flip-out-right {
	to {
		transform: rotateY(90deg);
		opacity: 0;
	}
}
@keyframes flip-in-left {
	from {
		transform: rotateY(-90deg);
		opacity: 0;
	}
}

/* --- DISSOLVE (Soft Blur Fade) --- */
html[data-transition="dissolve"]::view-transition-old(slide-canvas) {
	animation: 0.6s ease-in both dissolve-out;
}
html[data-transition="dissolve"]::view-transition-new(slide-canvas) {
	animation: 0.6s ease-out both dissolve-in;
}

@keyframes dissolve-out {
	to {
		opacity: 0;
		filter: blur(10px);
	}
}
@keyframes dissolve-in {
	from {
		opacity: 0;
		filter: blur(10px);
	}
}

/* --- IRIS (Circle Spotlight Expand/Contract) --- */
html[data-transition="iris"]:not([data-direction="backward"])::view-transition-old(slide-canvas) {
	animation: none;
}
html[data-transition="iris"]:not([data-direction="backward"])::view-transition-new(slide-canvas) {
	animation: 0.7s ease-in-out both iris-in;
	z-index: 2;
}
html[data-transition="iris"][data-direction="backward"]::view-transition-old(slide-canvas) {
	animation: 0.7s ease-in-out both iris-out;
	z-index: 2;
}
html[data-transition="iris"][data-direction="backward"]::view-transition-new(slide-canvas) {
	animation: none;
	z-index: 1;
}

@keyframes iris-in {
	from {
		clip-path: circle(0% at 50% 50%);
	}
	to {
		clip-path: circle(150% at 50% 50%);
	}
}
@keyframes iris-out {
	from {
		clip-path: circle(150% at 50% 50%);
	}
	to {
		clip-path: circle(0% at 50% 50%);
	}
}

/* --- BARN (Center Window Split) --- */
html[data-transition="barn"]:not([data-direction="backward"])::view-transition-old(slide-canvas) {
	animation: none;
}
html[data-transition="barn"]:not([data-direction="backward"])::view-transition-new(slide-canvas) {
	animation: 0.6s cubic-bezier(0.4, 0, 0.2, 1) both barn-open;
	z-index: 2;
}
html[data-transition="barn"][data-direction="backward"]::view-transition-old(slide-canvas) {
	animation: 0.6s cubic-bezier(0.4, 0, 0.2, 1) both barn-close;
	z-index: 2;
}
html[data-transition="barn"][data-direction="backward"]::view-transition-new(slide-canvas) {
	animation: none;
	z-index: 1;
}

@keyframes barn-open {
	from {
		clip-path: inset(0 50% 0 50%);
	}
	to {
		clip-path: inset(0 0% 0 0%);
	}
}
@keyframes barn-close {
	from {
		clip-path: inset(0 0% 0 0%);
	}
	to {
		clip-path: inset(0 50% 0 50%);
	}
}

/* --- SPIN (Whirlpool Rotation) --- */
html[data-transition="spin"]:not([data-direction="backward"])::view-transition-old(slide-canvas) {
	animation: 0.6s ease-in both spin-out-left;
}
html[data-transition="spin"]:not([data-direction="backward"])::view-transition-new(slide-canvas) {
	animation: 0.6s ease-out both spin-in-right;
}
html[data-transition="spin"][data-direction="backward"]::view-transition-old(slide-canvas) {
	animation: 0.6s ease-in both spin-out-right;
}
html[data-transition="spin"][data-direction="backward"]::view-transition-new(slide-canvas) {
	animation: 0.6s ease-out both spin-in-left;
}

@keyframes spin-out-left {
	to {
		transform: rotate(-90deg) scale(0.5);
		opacity: 0;
	}
}
@keyframes spin-in-right {
	from {
		transform: rotate(90deg) scale(0.5);
		opacity: 0;
	}
}
@keyframes spin-out-right {
	to {
		transform: rotate(90deg) scale(0.5);
		opacity: 0;
	}
}
@keyframes spin-in-left {
	from {
		transform: rotate(-90deg) scale(0.5);
		opacity: 0;
	}
}