/*
 * Buggfry Theme — Ergänzungen zum kompilierten Produktions-CSS:
 * Scroll-Reveals und Mobile-Menü-Stagger (Ersatz für framer-motion),
 * Modal-Übergänge des Preisrechners. Werte exakt wie im Original
 * (0,72s, cubic-bezier(0.22, 1, 0.36, 1), 32px Versatz).
 */

/* ── Scroll-Reveals (AnimatedReveal-Ersatz) ── */
.bf-reveal {
	opacity: 0;
	transform: translateY(32px);
	transition:
		opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--bf-delay, 0s);
}
.bf-reveal.bf-in {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.bf-reveal {
		transform: none;
		transition-duration: 0.2s;
	}
}

/* ── WordPress-Admin-Bar: Header darunter schieben, damit alle
      Header-Elemente (z. B. „Termin buchen") klickbar bleiben ── */
body.admin-bar #bf-header {
	top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar #bf-header {
		top: 46px;
	}
}

/* ── Mobile-Menü ── */
/* geschlossen: komplett aus dem Weg (fängt garantiert keine Klicks ab) */
#bf-mobile-menu:not(.bf-open) {
	pointer-events: none !important;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0s linear 0.3s;
}
#bf-mobile-menu.bf-open {
	visibility: visible;
	transition: opacity 0.3s, visibility 0s;
}
.bf-mobile-item {
	opacity: 0;
	transform: translateX(20px);
	transition:
		opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
#bf-mobile-menu.bf-open {
	opacity: 1;
	pointer-events: auto;
}
#bf-mobile-menu.bf-open .bf-mobile-panel {
	/* Tailwind v4 setzt translate-x-full über die translate-Eigenschaft */
	translate: none;
	transform: none;
}
#bf-mobile-menu.bf-open .bf-mobile-item {
	opacity: 1;
	transform: none;
}

/* ── Preisrechner-Modal (PaketDetails) ── */
.bf-modal-root {
	opacity: 0;
	transition: opacity 0.2s ease;
}
.bf-modal-root .bf-modal-panel {
	opacity: 0;
	transform: translateY(32px) scale(0.98);
	transition:
		opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.bf-modal-root.bf-open {
	opacity: 1;
}
.bf-modal-root.bf-open .bf-modal-panel {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.bf-modal-root .bf-modal-panel {
		transform: none;
	}
}

/* ── Preis-Update in der Zusammenfassung (AnimatePresence-Ersatz) ── */
@keyframes bf-price-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}
.bf-price-flash {
	animation: bf-price-in 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}