/*
 * RhekTec Builder - Effekte (sticky Header, Ladeanimation, Scroll-Animationen).
 * Alle Zustaende werden erst durch die Klasse html.rhektec-js aktiv, die ein
 * kleines Inline-Script setzt - ohne JavaScript bleibt alles normal sichtbar.
 */

/* ---------- Scroll-Animationen --------------------------------------- */
.rhektec-js .rhektec-anim,
.rhektec-js.rhektec-auto-anim .rhektec-site__content .rhektec-el-section {
	opacity: 0;
	transform: var(--fx-t, none);
	filter: var(--fx-f, none);
	transition:
		opacity var(--rhektec-anim-duration, 700ms) ease var(--rhektec-anim-delay, 0ms),
		transform var(--rhektec-anim-duration, 700ms) cubic-bezier(.2, .7, .2, 1) var(--rhektec-anim-delay, 0ms),
		filter var(--rhektec-anim-duration, 700ms) ease var(--rhektec-anim-delay, 0ms);
	will-change: opacity, transform;
}

.rhektec-js .rhektec-anim.is-visible,
.rhektec-js.rhektec-auto-anim .rhektec-site__content .rhektec-el-section.is-visible {
	opacity: 1;
	transform: none;
	filter: none;
}

.rhektec-anim--fade       { --fx-t: none; }
.rhektec-anim--fade-up    { --fx-t: translate3d(0, 32px, 0); }
.rhektec-anim--fade-down  { --fx-t: translate3d(0, -32px, 0); }
.rhektec-anim--fade-left  { --fx-t: translate3d(-40px, 0, 0); }
.rhektec-anim--fade-right { --fx-t: translate3d(40px, 0, 0); }
.rhektec-anim--zoom-in    { --fx-t: scale(.92); }
.rhektec-anim--blur-in    { --fx-t: none; --fx-f: blur(10px); }

/* ---------- Header: fixiert / schrumpfend / smart ---------------------- */
body.rhektec-header-sticky .rhektec-site-header,
body.rhektec-header-shrink .rhektec-site-header,
body.rhektec-header-smart .rhektec-site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}

body.admin-bar.rhektec-header-sticky .rhektec-site-header,
body.admin-bar.rhektec-header-shrink .rhektec-site-header,
body.admin-bar.rhektec-header-smart .rhektec-site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

body.rhektec-header-shadow .rhektec-site-header.is-scrolled {
	box-shadow: 0 2px 16px rgba(0, 0, 0, .12);
}

/* smart: beim Runterscrollen nach oben wegschieben, beim Hochscrollen zurueck */
body.rhektec-header-smart .rhektec-site-header.is-hidden {
	transform: translateY(-110%);
}

/* shrink: kompakterer Header, sobald gescrollt wurde */
body.rhektec-header-shrink .rhektec-site-header .rhektec-el-section,
body.rhektec-header-shrink .rhektec-site-header .rhektec-el-row,
body.rhektec-header-shrink .rhektec-site-header .rhektec-el-image img {
	transition: padding .3s ease, max-height .3s ease, width .3s ease;
}

body.rhektec-header-shrink .rhektec-site-header.is-scrolled .rhektec-el-section,
body.rhektec-header-shrink .rhektec-site-header.is-scrolled .rhektec-el-section > .rhektec-el-row {
	padding-top: 6px !important;
	padding-bottom: 6px !important;
}

body.rhektec-header-shrink .rhektec-site-header.is-scrolled .rhektec-el-image,
body.rhektec-header-shrink .rhektec-site-header.is-scrolled .rhektec-el-image img {
	max-height: 72px !important;
	width: auto !important;
}

/* ---------- Seiten-Ladeanimation -------------------------------------- */
@keyframes rhektec-pl-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes rhektec-pl-slide {
	from { opacity: 0; transform: translate3d(0, 24px, 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes rhektec-spin {
	to { transform: rotate(360deg); }
}

html.rhektec-pl-fade body {
	animation: rhektec-pl-fade .7s ease both;
}

html.rhektec-pl-slide-up body {
	animation: rhektec-pl-slide .7s cubic-bezier(.2, .7, .2, 1) both;
}

/* Lade-Overlay: reine CSS-Pseudo-Elemente auf <html>, kein Markup noetig */
html.rhektec-loading::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: var(--rhektec-color-background, #fff);
	transition: opacity .5s ease, visibility .5s ease;
}

html.rhektec-loading::after {
	content: "";
	position: fixed;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	z-index: 100001;
	border: 3px solid var(--rhektec-color-border, rgba(0, 0, 0, .12));
	border-top-color: var(--rhektec-color-primary, #333);
	border-radius: 50%;
	animation: rhektec-spin .8s linear infinite;
	transition: opacity .3s ease;
}

html.rhektec-loading.rhektec-loaded::before,
html.rhektec-loading.rhektec-loaded::after {
	opacity: 0;
	visibility: hidden;
}

/* ---------- Bewegung reduzieren --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.rhektec-js .rhektec-anim,
	.rhektec-js.rhektec-auto-anim .rhektec-site__content .rhektec-el-section {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
	}

	html.rhektec-pl-fade body,
	html.rhektec-pl-slide-up body {
		animation: none;
	}

	html.rhektec-loading::before,
	html.rhektec-loading::after {
		display: none;
	}

	body.rhektec-header-smart .rhektec-site-header.is-hidden {
		transform: none;
	}
}