/* =========================================================
   Page transitions — macOS Sequoia-achtig
   Stuurt op body[transition-state]
   Uitzondering: /instellingen/ en /settings/ lijken direct
   ========================================================= */

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

body{
	--pt-duration-fast: 80ms;
	--pt-duration: 160ms;
	--pt-duration-slow: 260ms;
	--pt-ease: cubic-bezier(.2,.9,.25,1);
	--pt-blur: 10px;
}

/* Target alleen de subpage content (niet header/nav) */
#subpagecontent{
	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"] #subpagecontent{
	opacity:1;
	transform: translateY(0) scale(1);
	filter: blur(0);
	pointer-events:auto;
}

/* -----------------------------------------
   UNLOADING (fade-out + subtiele blur)
------------------------------------------ */
body[transition-state="unloading"] #subpagecontent{
	opacity:0;
	filter: blur(calc(var(--pt-blur) * 0.35));
	pointer-events:none;
}

/* -----------------------------------------
   LOADING (inhoud al gewisseld, fade-in)
------------------------------------------ */
body[transition-state="loading"] #subpagecontent > *{
	opacity:0;
	filter: blur(calc(var(--pt-blur) * 0.6));
	pointer-events:none;
}

/* Wanneer JS na swap naar ready zet */
body[transition-state="ready"] #subpagecontent > *{
	transition-duration: var(--pt-duration-slow);
}

/* -----------------------------------------
   ERROR (snelle fade + lichte shake optioneel)
------------------------------------------ */
body[transition-state="error"] #subpagecontent > *{
	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"] #subpagecontent{
	animation: pt-shake 220ms ease-in-out 1;
}

/* -----------------------------------------
   NO-TRANSITION routes
   /instellingen/ en /settings/ moeten direct lijken:
   zet transition uit + geen blur/transform/opacity animatie
------------------------------------------ */
body[transition-to-page="instellingen"] #subpagecontent,
body[transition-from-page="instellingen"] #subpagecontent,
body[transition-to-page="settings"] #subpagecontent,
body[transition-from-page="settings"] #subpagecontent{
	transition: none !important;
	filter: none !important;
	transform: none !important;
	opacity: 1 !important;
	animation: none !important;
}

/* ook de child-regel uitschakelen (anders blijft loading > * op 0) */
body[transition-to-page="instellingen"] #subpagecontent > *,
body[transition-from-page="instellingen"] #subpagecontent > *,
body[transition-to-page="settings"] #subpagecontent > *,
body[transition-from-page="settings"] #subpagecontent > *{
	transition: none !important;
	filter: none !important;
	transform: none !important;
	opacity: 1 !important;
	animation: none !important;
	pointer-events: auto !important;
}

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