/* =========================================================
   Page transitions — macOS Sequoia-achtig
   Stuurt op body[transition-state]
   ========================================================= */

/* Basis */ 
html, body{
	height:100%;
}

body{
	--pt-duration-fast: 180ms;
	--pt-duration: 260ms;
	--pt-duration-slow: 360ms;
	--pt-ease: cubic-bezier(.2,.9,.25,1); /* macOS-achtige ease */
	--pt-blur: 10px;
}

/* Target alleen de content, niet header/nav */
main{
	will-change: opacity, transform, filter;
	transition:
		opacity var(--pt-duration) var(--pt-ease),
		transform var(--pt-duration) var(--pt-ease),
		filter var(--pt-duration) var(--pt-ease);
}

/* -----------------------------------------
   READY (normaal zichtbaar)
------------------------------------------ */
body[transition-state="ready"] main{
	opacity:1;
	transform: translateY(0) scale(1);
	filter: blur(0);
	pointer-events:auto;
}

/* -----------------------------------------
   UNLOADING (fade-out + subtiele lift)
------------------------------------------ */
body[transition-state="unloading"] main{
	opacity:0;
/*	transform: translateY(-6px) scale(0.995);*/
	filter: blur(calc(var(--pt-blur) * 0.35));
	pointer-events:none;
}

/* -----------------------------------------
   LOADING (inhoud al gewisseld, fade-in)
------------------------------------------ */
body[transition-state="loading"] main > * {
	opacity:0;
/*	transform-origin: top center;
	transform: translateY(8px) scale(0.995);*/
	filter: blur(calc(var(--pt-blur) * 0.6));
	pointer-events:none;
}

/* Wanneer JS na swap naar ready zet,
   krijgt main automatisch de fade-in */
body[transition-state="ready"] main > *  {
	transition-duration: var(--pt-duration-slow);
}

/* -----------------------------------------
   ERROR (snelle fade + lichte shake optioneel)
------------------------------------------ */
body[transition-state="error"] main > * {
	opacity:0.85;
	filter: blur(2px);
}

/* Optionele kleine “attention” shake */
@keyframes pt-shake{
	0%{ transform: translateX(0); }
	25%{ transform: translateX(-2px); }
	50%{ transform: translateX(2px); }
	75%{ transform: translateX(-1px); }
	100%{ transform: translateX(0); }
}

body[transition-state="error"] main{
	animation: pt-shake 220ms ease-in-out 1;
}

/* -----------------------------------------
   Reduced motion respecteren
------------------------------------------ */
@media (prefers-reduced-motion: reduce){
	main{
		transition:none !important;
		filter:none !important;
		transform:none !important;
	}
}