/*
 * Sternhaus – Scroll-Effekte. Wird nur geladen, wenn eine Variante (a, b, c) aktiv ist.
 * Klassen setzt assets/efekt.js: sh-r (einblenden), sh-r-img (Bild aufdecken), sh-wortweise (Wort für Wort), sh-sicht (sichtbar).
 * Übernommen von der Çetinkaya-Seite, angepasst an Farben und Aufbau von Sternhaus.
 */

/* ---------- Gemeinsam ---------- */

/* Kopf bleibt oben stehen und wird beim Scrollen schmaler */
header.wp-block-template-part:has(.sh-header) { position: sticky; top: 0; z-index: 60; }
body.admin-bar header.wp-block-template-part:has(.sh-header) { top: 32px; }
@media (max-width: 782px) { body.admin-bar header.wp-block-template-part:has(.sh-header) { top: 46px; } }
.sh-header { transition: padding .35s ease, box-shadow .35s ease, background-color .45s ease, border-color .45s ease; }
.sh-logo__icon { transition: width .35s ease, height .35s ease; }
body.sh-gescrollt .sh-header { padding-top: .45rem !important; padding-bottom: .45rem !important; box-shadow: 0 6px 24px rgba(20, 53, 61, .12); }
body.sh-gescrollt .sh-logo__icon { width: 34px; height: 34px; }

.sh-hero { overflow: hidden; }

/* Einblenden von unten */
.sh-r { opacity: 0; transform: translate3d(var(--sh-x, 0), 26px, 0); }
/* Beim Hochscrollen kommen die Elemente von oben */
.sh-r.sh-von-oben:not(.sh-sicht) { transform: translate3d(var(--sh-x, 0), -26px, 0); }
.sh-r.sh-sicht {
	opacity: 1;
	transform: none;
	transition: opacity .9s cubic-bezier(.2, .65, .25, 1) var(--sh-d, 0ms), transform 1s cubic-bezier(.2, .65, .25, 1) var(--sh-d, 0ms);
}

@media (prefers-reduced-motion: no-preference) {
	/* Startbild-Texte und Seitentitel beim Laden */
	.sh-js .sh-hero .wp-block-cover__inner-container > *,
	.sh-js h1.wp-block-post-title {
		animation: sh-steigen 1s cubic-bezier(.2, .65, .25, 1) both;
	}
	.sh-js .sh-hero .wp-block-cover__inner-container > :nth-child(2) { animation-delay: .12s; }
	.sh-js .sh-hero .wp-block-cover__inner-container > :nth-child(3) { animation-delay: .26s; }
	.sh-js .sh-hero .wp-block-cover__inner-container > :nth-child(4) { animation-delay: .4s; }
}
@keyframes sh-steigen { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ---------- B und C: Tiefe ---------- */
@media (prefers-reduced-motion: no-preference) {
	.sh-js .sh-efekt-b .sh-hero .wp-block-cover__image-background,
	.sh-js .sh-efekt-c .sh-hero .wp-block-cover__image-background {
		animation: sh-naeher 2.8s cubic-bezier(.2, .6, .2, 1) both;
		will-change: translate;
	}
}
@keyframes sh-naeher { from { scale: 1.12; } to { scale: 1; } }

/* Bilder wie hinter einem Vorhang aufdecken. Verdeckt wird nur das Bild, nicht der Rahmen:
   ein vollständig verdeckter Rahmen gilt für Chrome nie als sichtbar und würde nie erscheinen. */
.sh-r-img { overflow: hidden; }
.sh-r-img img { clip-path: inset(0 0 100% 0); scale: 1.12; }
.sh-efekt-c .sh-r-img img { clip-path: inset(0 100% 0 0); }
.sh-r-img.sh-von-oben:not(.sh-sicht) img { clip-path: inset(100% 0 0 0); }
.sh-efekt-c .sh-r-img.sh-von-oben:not(.sh-sicht) img { clip-path: inset(0 0 0 100%); }
.sh-r-img.sh-sicht img {
	clip-path: inset(-40px);
	scale: 1;
	transition: clip-path 1.25s cubic-bezier(.75, 0, .2, 1) var(--sh-d, 0ms), scale 1.8s cubic-bezier(.2, .6, .2, 1) var(--sh-d, 0ms);
}

/* Hausmodell-Karten: Bild zoomt beim Erscheinen leicht heraus */
.sh-efekt-b .sh-card.sh-r img, .sh-efekt-c .sh-card.sh-r img { scale: 1.1; }
.sh-efekt-b .sh-card.sh-sicht img, .sh-efekt-c .sh-card.sh-sicht img { scale: 1; transition: scale 1.6s cubic-bezier(.2, .6, .2, 1) var(--sh-d, 0ms); }
.sh-card .wp-block-image { overflow: hidden; border-radius: 10px; }

/* ---------- C: lebendig ---------- */

/* Kopf transparent über dem Startbild, hell beim Scrollen (nur Seiten mit Startbild) */
.sh-efekt-c.sh-mit-hero header.wp-block-template-part:has(.sh-header) { margin-bottom: calc(-1 * var(--sh-hh, 84px)); }
.sh-efekt-c.sh-mit-hero:not(.sh-gescrollt) .sh-header {
	background-color: transparent !important;
	border-bottom-color: transparent;
	box-shadow: none;
}
.sh-efekt-c.sh-mit-hero:not(.sh-gescrollt) .sh-header .wp-block-navigation__responsive-container:not(.is-menu-open) a,
.sh-efekt-c.sh-mit-hero:not(.sh-gescrollt) .sh-header .wp-block-navigation__responsive-container-open,
.sh-efekt-c.sh-mit-hero:not(.sh-gescrollt) .sh-header .sh-logo { color: #fff !important; text-shadow: 0 1px 10px rgba(10, 30, 36, .55); }
.sh-efekt-c.sh-mit-hero:not(.sh-gescrollt) .sh-header .sh-logo small { color: rgba(255, 255, 255, .8); }
.sh-efekt-c.sh-mit-hero .sh-hero { padding-top: calc(var(--sh-hh, 84px) + 2rem) !important; }
/* Dunkler Verlauf oben, damit das helle Menü auch vor hellem Himmel lesbar bleibt */
.sh-efekt-c.sh-mit-hero .sh-hero::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: calc(var(--sh-hh, 84px) + 120px);
	background: linear-gradient(180deg, rgba(20, 53, 61, .75) 0%, rgba(20, 53, 61, .35) 55%, rgba(20, 53, 61, 0) 100%);
	z-index: 1; pointer-events: none;
}

/* Überschriften Wort für Wort */
.sh-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .16em; margin-bottom: -.16em; }
.sh-w > span { display: inline-block; transform: translateY(112%); }
.sh-wortweise.sh-von-oben:not(.sh-sicht) .sh-w > span { transform: translateY(-112%); }
.sh-wortweise.sh-sicht .sh-w > span {
	transform: none;
	transition: transform .95s cubic-bezier(.2, .7, .2, 1);
	transition-delay: calc(var(--sh-d, 0ms) + var(--i, 0) * 60ms);
}
@media (prefers-reduced-motion: no-preference) {
	.sh-js .sh-efekt-c .sh-hero h1:not(.sh-geteilt),
	.sh-js .sh-efekt-c h1.wp-block-post-title:not(.sh-geteilt) { opacity: 0; animation: sh-zeigen 0s 1.2s forwards; }
	.sh-js .sh-efekt-c .sh-hero .wp-block-cover__inner-container > h1,
	.sh-js .sh-efekt-c h1.wp-block-post-title { animation: none; }
}
@keyframes sh-zeigen { to { opacity: 1; } }

/* Ablauf-Schritte: goldene Linie zeichnet sich unter der Nummer */
.sh-efekt-c .sh-schritt { position: relative; }
.sh-efekt-c .sh-schritt::after {
	content: ""; position: absolute; left: 0; top: 3.1rem; width: 56px; height: 2px;
	background: var(--wp--preset--color--accent-2); transform-origin: left; transform: scaleX(1);
}
.sh-efekt-c .sh-schritt.sh-r::after { transform: scaleX(0); }
.sh-efekt-c .sh-schritt.sh-sicht::after { transform: scaleX(1); transition: transform 1.1s cubic-bezier(.65, 0, .2, 1) calc(var(--sh-d, 0ms) + .2s); }

/* Empfehlungs-Betrag: kurzer Glanz beim Erscheinen */
.sh-efekt-c .sh-referral.sh-sicht .sh-big { animation: sh-glanz 1.6s ease calc(var(--sh-d, 0ms) + .5s) both; }
@keyframes sh-glanz { 0% { text-shadow: none; } 40% { text-shadow: 0 0 22px rgba(201, 162, 75, .75); } 100% { text-shadow: none; } }

/* Lesefortschritt oben */
.sh-fortschritt {
	position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 90;
	background: linear-gradient(90deg, var(--wp--preset--color--accent-2), var(--wp--preset--color--accent-1));
	transform: scaleX(0); transform-origin: left; pointer-events: none;
}
body.admin-bar .sh-fortschritt { top: 32px; }
@media (max-width: 782px) { body.admin-bar .sh-fortschritt { top: 46px; } }