/*
 * Scroll-Animationen der Startseite (Conrat_Motion, conrat-motion.js).
 *
 * conrat-motion.js setzt data-cm / data-cm-draw nur auf Elemente, die beim Laden
 * unterhalb des sichtbaren Bereichs liegen, und nur ohne „Bewegung reduzieren“.
 * Animiert werden ausschließlich transform und opacity (kein Layout-Shift).
 * !important, weil viele Zielelemente eigene (teils !important-)Übergänge haben;
 * nach dem Einblenden entfernt das Skript data-cm wieder, dann gelten deren Regeln.
 */

/* ---------- Einblenden ---------- */

[data-cm] {
	transition: opacity .85s cubic-bezier(.2, .7, .2, 1), transform .85s cubic-bezier(.2, .7, .2, 1) !important;
	transition-delay: var(--cm-delay, 0ms) !important;
}

[data-cm]:not(.is-in) {
	opacity: 0 !important;
}

[data-cm="up"]:not(.is-in) {
	transform: translate3d(0, 40px, 0) !important;
}

[data-cm="rise"]:not(.is-in) {
	transform: translate3d(0, 56px, 0) scale(.97) !important;
}

[data-cm="left"]:not(.is-in) {
	transform: translate3d(-56px, 0, 0) !important;
}

[data-cm="right"]:not(.is-in) {
	transform: translate3d(56px, 0, 0) !important;
}

[data-cm="zoom"]:not(.is-in) {
	transform: scale(.92) !important;
}

@media (max-width: 879px) {
	[data-cm="up"]:not(.is-in) {
		transform: translate3d(0, 24px, 0) !important;
	}

	[data-cm="rise"]:not(.is-in) {
		transform: translate3d(0, 32px, 0) scale(.98) !important;
	}
}

/* ---------- Überschriften Wort für Wort ---------- */

/* Der Container bleibt sichtbar, die Wörter kommen einzeln. */
[data-cm="words"]:not(.is-in) {
	opacity: 1 !important;
}

.cm-word {
	display: inline-block;
}

[data-cm="words"] .cm-word {
	transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
	transition-delay: calc(var(--cm-delay, 0ms) + var(--cm-i, 0) * 55ms);
}

[data-cm="words"]:not(.is-in) .cm-word {
	opacity: 0;
	transform: translate3d(0, .5em, 0);
}

/* ---------- Blogliste: Bild zoomt beim Einblenden sanft auf 100 % ---------- */

[data-cm] .conrat-blog-media {
	overflow: hidden;
}

[data-cm] .conrat-blog-media img {
	transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
	transition-delay: var(--cm-delay, 0ms);
}

[data-cm]:not(.is-in) .conrat-blog-media img {
	transform: scale(1.1);
}

/* ---------- Linien und Kanten zeichnen sich (bleiben gezeichnet) ---------- */

hr[data-cm-draw] {
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}

hr[data-cm-draw].is-drawn {
	transform: scaleX(1);
}

/* Kupfer-Unterstrich unter den Projekt-Überschriften */
.conrat-project h2.wp-block-heading[data-cm-draw]::after {
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .9s cubic-bezier(.2, .7, .2, 1) .35s;
}

.conrat-project h2.wp-block-heading[data-cm-draw].is-drawn::after {
	transform: scaleX(1);
}

/* Kupfer-Oberkante der AI-Agents-Karten: gleiche Kante als Overlay, von links gewischt */
.conrat-feat-card[data-cm-draw] {
	position: relative;
	border-top-color: transparent !important;
}

.conrat-feat-card[data-cm-draw]::before {
	content: "";
	position: absolute;
	top: -3px;
	right: -1px;
	bottom: -1px;
	left: -1px;
	border-top: 3px solid #CC785C;
	border-radius: inherit;
	clip-path: inset(0 100% 0 0);
	transition: clip-path 1s cubic-bezier(.2, .7, .2, 1) .3s;
	pointer-events: none;
}

.conrat-feat-card[data-cm-draw].is-drawn::before {
	clip-path: inset(0 0 0 0);
}

/* Community-Band: Kupfer-Kante oben (Element fügt das Skript ein) */
.conrat-community-panel[data-cm-draw] {
	position: relative;
}

.cm-edge {
	position: absolute;
	top: 0;
	right: 28px;
	left: 28px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: #CC785C;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 1s cubic-bezier(.2, .7, .2, 1) .35s;
	pointer-events: none;
}

.is-drawn > .cm-edge {
	transform: scaleX(1);
}

/* ---------- EU-AI-Act-Header: eigene Animation erst im Bild starten ---------- */

.conrat-aiact.cm-hold,
.conrat-aiact.cm-hold * {
	animation-play-state: paused !important;
}

/* ---------- Fortschrittsbalken ---------- */

#cm-progress {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 99990;
	height: 3px;
	background: #CC785C;
	transform: scaleX(0);
	transform-origin: left;
	pointer-events: none;
}

body.admin-bar #cm-progress {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar #cm-progress {
		top: 46px;
	}
}

/* ---------- Parallax (Laptop-Bild) und Neigung (Hero-Kacheln), nur Desktop ---------- */

.cm-parallax {
	overflow: hidden;
}

.cm-parallax img {
	will-change: transform;
}

.conrat-hero .bento.cm-tilt {
	transform: perspective(1400px) rotateX(var(--cm-rx, 0deg)) rotateY(var(--cm-ry, 0deg));
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Markieren ohne Übergang ---------- */

/* Beim Markieren (cm-init, zwei Frames lang) sofort verstecken statt sichtbar auszublenden. */
.cm-init,
.cm-init .cm-word,
.cm-init .conrat-blog-media img,
.cm-init::before,
.cm-init::after,
.cm-init > .cm-edge {
	transition: none !important;
}

/* ---------- Sicherheitsnetz ---------- */

@media (prefers-reduced-motion: reduce) {
	[data-cm],
	[data-cm] .cm-word,
	[data-cm] .conrat-blog-media img {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	#cm-progress {
		display: none;
	}
}