/**
 * Syoska Motion Presets – Text & Überschriften
 *
 * smp-fade-in-up: erscheint leicht von unten (einmalig beim Laden).
 * smp-blur-in: weicher Unschärfe-Fade-in.
 * smp-typewriter: Schreibmaschine per JS – siehe assets/js/typewriter.js
 *   Markup: .smp-typewriter mit data-smp-typewriter-text="..." oder .smp-typewriter__source
 */

@keyframes smp-fade-in-up {
	from {
		opacity: 0;
		transform: translateY(0.6rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes smp-blur-in {
	from {
		opacity: 0;
		filter: blur(8px);
	}
	to {
		opacity: 1;
		filter: blur(0);
	}
}

.smp-fade-in-up {
	animation: smp-fade-in-up var(--smp-duration-slow) var(--smp-ease-out) both;
}

.smp-blur-in {
	animation: smp-blur-in var(--smp-duration-slow) var(--smp-ease-out) both;
}

/* Verzögert sichtbar (gestaffelt mit --smp-delay im Theme) */
.smp-fade-in-up.smp-delay-1 {
	animation-delay: 0.12s;
}

.smp-fade-in-up.smp-delay-2 {
	animation-delay: 0.24s;
}

.smp-fade-in-up.smp-delay-3 {
	animation-delay: 0.36s;
}

/* Schreibmaschine */
.smp-typewriter {
	display: inline;
	min-height: 1.2em;
}

.smp-typewriter__source {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.smp-typewriter__target {
	display: inline;
}

@keyframes smp-caret-blink {
	0%,
	49% {
		opacity: 1;
	}
	50%,
	100% {
		opacity: 0;
	}
}

.smp-typewriter__caret {
	display: inline-block;
	width: 0.08em;
	min-width: 2px;
	height: 1em;
	margin-left: 1px;
	vertical-align: -0.12em;
	background-color: var(--smp-typewriter-caret-color);
	animation: smp-caret-blink 1s step-end infinite;
}

.smp-typewriter.smp-typewriter--complete .smp-typewriter__caret {
	animation: none;
	opacity: 0;
}