/* Parallel-Cross-Fade-Morph zwischen iframes
   Beim Seitenwechsel laufen morph-out (altes iframe) und morph-in (neues iframe)
   GLEICHZEITIG ueber 750 ms. Filterketen erzeugen den weichen "Aquarell"-Look. */

.content-frame-host iframe {
	will-change: opacity, filter, transform;
	transition: height 350ms cubic-bezier(0.7, 0, 0.3, 1);
}

/* Eingehendes iframe ist initial unsichtbar (waehrend des Ladens),
   bevor die morph-in-Animation uebernimmt. */
.content-frame-host iframe.frame-incoming {
	opacity: 0;
	pointer-events: none;
}

@keyframes frame-morph-out {
	0%   { opacity: 1;    filter: blur(0)    saturate(1)   contrast(1);   transform: scale(1); }
	50%  { opacity: 0.55; filter: blur(14px) saturate(1.5) contrast(1.3); transform: scale(0.97); }
	100% { opacity: 0;    filter: blur(28px) saturate(1.8) contrast(1.5); transform: scale(0.92); }
}
@keyframes frame-morph-in {
	0%   { opacity: 0;    filter: blur(28px) saturate(1.8) contrast(1.5); transform: scale(1.08); }
	50%  { opacity: 0.55; filter: blur(14px) saturate(1.5) contrast(1.3); transform: scale(1.03); }
	100% { opacity: 1;    filter: blur(0)    saturate(1)   contrast(1);   transform: scale(1); }
}

.content-frame-host iframe.frame-morph-out {
	animation: frame-morph-out 750ms cubic-bezier(0.7, 0, 0.3, 1) forwards;
}
.content-frame-host iframe.frame-morph-in {
	animation: frame-morph-in 750ms cubic-bezier(0.7, 0, 0.3, 1) both;
}

/* Element-Morph (z.B. Galerie-Tab-Wechsel innerhalb des Galerie-iframes) */
.morph-elem-out {
	animation: morph-elem-out 280ms cubic-bezier(0.7, 0, 0.3, 1) forwards;
	will-change: opacity, filter, transform;
}
.morph-elem-in {
	animation: morph-elem-in 350ms cubic-bezier(0.7, 0, 0.3, 1) both;
	will-change: opacity, filter, transform;
}
@keyframes morph-elem-out {
	from { opacity: 1; filter: blur(0)    saturate(1)   contrast(1);   transform: scale(1); }
	to   { opacity: 0; filter: blur(24px) saturate(1.6) contrast(1.4); transform: scale(0.96); }
}
@keyframes morph-elem-in {
	from { opacity: 0; filter: blur(24px) saturate(1.6) contrast(1.4); transform: scale(1.04); }
	to   { opacity: 1; filter: blur(0)    saturate(1)   contrast(1);   transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.content-frame-host iframe.frame-morph-out,
	.content-frame-host iframe.frame-morph-in,
	.morph-elem-out,
	.morph-elem-in { animation: none; }
}