/* ============================================================
   SAV — Animationen
   ============================================================ */

/* Float-Background (Hero-Akzent-Shapes) */
@keyframes sav-float {
	0%, 100% { transform: translateY(0) translateX(0); }
	33%      { transform: translateY(-20px) translateX(10px); }
	66%      { transform: translateY(15px) translateX(-15px); }
}

/* Toast Slide-Up */
@keyframes sav-toast-in {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Fade-In + Slide-Up — für Scroll-Reveal */
@keyframes sav-reveal {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Stagger-Pop für Card-Reihen */
@keyframes sav-pop-in {
	0%   { opacity: 0; transform: scale(0.94); }
	60%  { opacity: 1; transform: scale(1.02); }
	100% { transform: scale(1); }
}

/* Subtle Pulse (Konfigurator-Preis-Update) */
@keyframes sav-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.05); }
}

/* Shake (Validation-Error) */
@keyframes sav-shake {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-6px); }
	40%, 80% { transform: translateX(6px); }
}

/* Spin — Loading-Spinner */
@keyframes sav-spin {
	from { transform: rotate(0); }
	to   { transform: rotate(360deg); }
}

/* Reveal-Klassen werden via Intersection-Observer (main.js) gesetzt */
.sav-reveal {
	opacity: 0;
	transform: translateY(20px);
	will-change: opacity, transform;
}
.sav-reveal.is-visible {
	animation: sav-reveal 0.6s var(--ease-out) forwards;
}

/* Stagger-Children: Container bekommt .sav-reveal-stagger,
   Kinder werden nacheinander animiert */
.sav-reveal-stagger > * {
	opacity: 0;
	transform: translateY(20px);
}
.sav-reveal-stagger.is-visible > * {
	animation: sav-reveal 0.6s var(--ease-out) forwards;
}
.sav-reveal-stagger.is-visible > *:nth-child(1) { animation-delay: 0.05s; }
.sav-reveal-stagger.is-visible > *:nth-child(2) { animation-delay: 0.10s; }
.sav-reveal-stagger.is-visible > *:nth-child(3) { animation-delay: 0.15s; }
.sav-reveal-stagger.is-visible > *:nth-child(4) { animation-delay: 0.20s; }
.sav-reveal-stagger.is-visible > *:nth-child(5) { animation-delay: 0.25s; }
.sav-reveal-stagger.is-visible > *:nth-child(6) { animation-delay: 0.30s; }
.sav-reveal-stagger.is-visible > *:nth-child(7) { animation-delay: 0.35s; }
.sav-reveal-stagger.is-visible > *:nth-child(8) { animation-delay: 0.40s; }
.sav-reveal-stagger.is-visible > *:nth-child(n+9) { animation-delay: 0.45s; }

/* Spinner-Utility */
.sav-spinner {
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: sav-spin 0.6s linear infinite;
}

/* Subtle Underline-Animation für Inline-Links */
.sav-link-underline {
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 1.5px;
	transition: background-size var(--duration-base) var(--ease-out);
	padding-bottom: 2px;
}
.sav-link-underline:hover {
	background-size: 100% 1.5px;
}