/* =========================================================================
   DITIB-NRW 2026 — motion.css
   Scroll-Reveal, Ornament-Drift, Hover-Choreografie, reduced-motion.
   Leitidee: langsam, leise, edel (design-system §5).
   ========================================================================= */

/* --------------------------------------------------- Scroll-Reveal
   WICHTIG: Verstecken NUR wenn JS bestätigt läuft (html.js) — Inhalte
   dürfen ohne JavaScript niemals unsichtbar sein (Progressive Enhancement). */
.reveal {
	transition: opacity var(--dur-reveal) var(--ease-out-soft),
		transform var(--dur-reveal) var(--ease-out-soft);
}
/* Versteckt wird NUR per JS-gesetzter .pre-reveal-Klasse, unmittelbar vor der
   Einblendung. Jeder Ausführungspfad ohne (vollständiges) JS zeigt alles. */
.reveal.pre-reveal {
	opacity: 0;
	transform: translateY(16px);
}
.reveal.is-revealed {
	opacity: 1;
	transform: none;
}
/* Staffelung (stagger) über Inline-Var --reveal-delay aus reveal.js */
.reveal[style*="--reveal-delay"] { transition-delay: var(--reveal-delay); }

/* Kinder eines Reveal-Containers gestaffelt (versteckt nur via .pre-reveal) */
.reveal-group > * {
	transition: opacity var(--dur-reveal) var(--ease-out-soft),
		transform var(--dur-reveal) var(--ease-out-soft);
}
.reveal-group.pre-reveal > * {
	opacity: 0;
	transform: translateY(16px);
}
.reveal-group.is-revealed > * { opacity: 1; transform: none; }
.reveal-group.is-revealed > *:nth-child(1) { transition-delay: 0ms; }
.reveal-group.is-revealed > *:nth-child(2) { transition-delay: 70ms; }
.reveal-group.is-revealed > *:nth-child(3) { transition-delay: 140ms; }
.reveal-group.is-revealed > *:nth-child(4) { transition-delay: 210ms; }
.reveal-group.is-revealed > *:nth-child(5) { transition-delay: 280ms; }
.reveal-group.is-revealed > *:nth-child(6) { transition-delay: 350ms; }

/* --------------------------------------------------- Ornament-Drift/Atmen */
@keyframes ornament-drift {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	50%  { transform: translate3d(-6px, -4px, 0) scale(1.015); }
	100% { transform: translate3d(0, 0, 0) scale(1); }
}
/* Ruhiges, seriöses Erscheinungsbild: Ornament-Drift/Parallax deaktiviert (reduzierte Effekte). */
.ornament-layer.is-drift { animation: none; }
.ornament-layer.is-parallax { transition: none; transform: none !important; }

/* Pausiert wenn Tab inaktiv (JS setzt .is-paused) */
.ornament-layer.is-paused { animation-play-state: paused; }

/* --------------------------------------------------- Stat-Count-up */
.stat__num { transition: none; }
.stat__num[data-count] { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------- Menü-Icon-Morph
   Standard: Moschee-Silhouette (Kuppel + Minarette).
   [aria-expanded="true"] → Schließen-Zustand (X). */
.menu-toggle[aria-expanded="true"] .mosque-dome { opacity: 0; transform: scale(.6); }
.menu-toggle[aria-expanded="true"] .mosque-minaret { opacity: 0; }
.menu-toggle[aria-expanded="true"] .mosque-base { opacity: 0; }
.menu-toggle[aria-expanded="true"] .close-1 { opacity: 1; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .close-2 { opacity: 1; transform: rotate(-45deg); }
.menu-toggle .close-1,
.menu-toggle .close-2 { opacity: 0; transform-origin: center; }

/* =========================================================================
   REDUCED MOTION — alle nicht-essenziellen Transforms/Parallax aus.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.reveal,
	.reveal-group > * { opacity: 1 !important; transform: none !important; }
	.ornament-layer { animation: none !important; transform: none !important; }
	.ornament-layer.is-parallax { transform: none !important; }
	.section-divider .draw path,
	.section-divider .draw polygon,
	.section-divider .draw line { stroke-dashoffset: 0 !important; }
	/* Hover-Transforms auf reine Farbwechsel reduziert */
	.card:hover, .card:focus-within,
	.btn:hover, .wp-element-button:hover,
	.social-links a:hover { transform: none !important; }
}