/* =========================================================================
   DITIB-NRW 2026 — ornament.css
   Girih/Arabeske-Ebenen, Ghost-Kontrast, Sektionstrenner, Draw-on.
   Würde-Regel: Sakrale Inhalte (Basmala) sind NIE animiert (siehe motion.css
   & mobile-menu — Basmala trägt bewusst keine Animations-Hooks).
   ========================================================================= */

/* Ornament-Ebene als absolut positionierte Fläche hinter Content */
.ornament-layer {
	position: absolute;
	inset: -18% -10%;
	z-index: 0;
	pointer-events: none;
	background-repeat: repeat;
	background-size: 120px 120px;
	will-change: transform;
}
.ornament-layer--girih { background-image: var(--ornament-girih); opacity: .10; }
.ornament-layer--gold { background-image: var(--ornament-girih-gold); opacity: .12; }

/* Ghost-Kontrast harte Grenze (design-system §6.3):
   Muster hinter Text zum Textbereich hin ausfaden (Vignette-Maske). */
.hero .ornament-layer,
.feature-dark .ornament-layer {
	-webkit-mask: radial-gradient(120% 90% at 80% 20%, #000 0%, transparent 70%);
	mask: radial-gradient(120% 90% at 80% 20%, #000 0%, transparent 70%);
}

/* Helle Sektion mit dezentem Ghost-Muster in text-freien Rändern */
.has-ghost-girih { position: relative; isolation: isolate; }
.has-ghost-girih > .ornament-layer--girih { opacity: .07; }

/* --------------------------------------------- Sektionstrenner (Divider) */
.section-divider {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-block: var(--wp--preset--spacing--70);
}
.section-divider svg,
.section-divider img {
	width: 100%;
	max-width: 720px;
	height: 32px;
}
/* Draw-on: Gold-Linien zeichnen sich beim Reveal */
.section-divider .draw path,
.section-divider .draw polygon,
.section-divider .draw line {
	stroke-dasharray: var(--dash, 1000);
	stroke-dashoffset: var(--dash, 1000);
}
.section-divider.is-revealed .draw path,
.section-divider.is-revealed .draw polygon,
.section-divider.is-revealed .draw line {
	transition: stroke-dashoffset var(--dur-reveal) var(--ease-out-soft);
	stroke-dashoffset: 0;
}

/* Star-Mark Einzelmotiv als dekorativer Akzent */
.star-mark {
	width: 2rem; height: 2rem;
	color: var(--wp--preset--color--gold-500);
	flex: 0 0 auto;
}
.star-mark svg { width: 100%; height: 100%; }

/* Basmala-Leiste: bewusst statisch, keine Transform/Animation-Hooks */
.basmala { display: inline-block; }
.basmala svg,
.basmala img { display: block; }

/* Karten-Eck-Akzent (star-mark, dünn) */
.card--accent { position: relative; }
.card--accent::before {
	content: "";
	position: absolute; top: 1rem; right: 1rem;
	width: 1.4rem; height: 1.4rem;
	background: var(--wp--preset--color--gold-500);
	opacity: .35;
	-webkit-mask: url("../img/ornament/star-mark-gold.svg") center / contain no-repeat;
	mask: url("../img/ornament/star-mark-gold.svg") center / contain no-repeat;
	transition: opacity var(--dur-base) var(--ease-standard);
}
.card--accent:hover::before { opacity: .7; }