/**
 * Animation · Text aufklappen (CSS)
 *
 * Typ:      Styles (CSS)
 * Position: Frontend
 *
 * Gehört zum gleichnamigen JS-Snippet.
 *
 * Die Ausblendung ist eine Maske, kein Verlaufs-Rechteck darüber: damit
 * ist sie unabhängig von der Hintergrundfarbe und funktioniert auch über
 * Bildern.
 *
 * Die beiden Stopps sind hier per @property registriert. Nur dadurch
 * lässt sich eine Custom Property überhaupt animieren – sonst springt
 * sie. Die konkreten Werte kommen aus Bricks (--dn-fade-start /
 * --dn-fade-end am Textblock); hier steht nur die Mechanik.
 */

@property --dn-fade-start {
	syntax: "<length>";
	inherits: false;
	initial-value: 9999px;
}

@property --dn-fade-end {
	syntax: "<length>";
	inherits: false;
	initial-value: 9999px;
}

[data-dn-anim~="text-expand"] .dn-expand__text {
	-webkit-mask-image: linear-gradient(180deg, #000 var(--dn-fade-start), transparent var(--dn-fade-end));
	mask-image: linear-gradient(180deg, #000 var(--dn-fade-start), transparent var(--dn-fade-end));
	transition: --dn-fade-start .55s cubic-bezier(.22, .61, .36, 1),
	            --dn-fade-end .55s cubic-bezier(.22, .61, .36, 1);
}

[data-dn-anim~="text-expand"] [data-dn-expand="knopf"] {
	user-select: none;
}

[data-dn-anim~="text-expand"] [data-dn-expand="knopf"]:focus-visible {
	outline: 2px solid #e2001a;
	outline-offset: 6px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	[data-dn-anim~="text-expand"] .dn-expand__text {
		transition: none;
	}
}