/**
 * Theme – Social-Media-CTA («Folge uns auf Social Media»)
 *
 * Runde, langsam rotierende Blume mit Überschrift und Social-Icons, die über
 * die Ecke des darunterliegenden Abschnitts ragt. Ausgabe über den Shortcode
 * [spnkt_social_cta] (inc/shortcodes.php).
 *
 * Positionierung: Die CTA liegt auf ALLEN Breakpoints absolut in ihrem
 * nächsten positionierten Vorfahren (so auch im Alt-Theme – sie rutscht auf
 * Mobile bewusst NICHT in den Textfluss). Der umgebende Block braucht dafür
 * die Klasse `spnkt-social-cta-anchor` (Gutenberg: «Zusätzliche CSS-Klasse»).
 *
 * Animation (CSS-only; das Alt-Theme nutzte dafür GSAP + ScrollTrigger):
 *   1. Blume rotiert dauerhaft (40s linear) – unabhängig vom Reveal.
 *   2. Reveal auf Hover/Fokus (Desktop) bzw. beim Scrollen in den Viewport
 *      (Touch, via `animation-timeline: view()` mit Fallback):
 *      – Blume skaliert auf 1.05
 *      – Titelblock wandert nach oben und macht den Icons Platz
 *      – Icons skalieren von 0 auf 1, zeitversetzt (stagger 0.07s)
 *
 * Werte 1:1 aus der Live-Site ausgemessen (Root-rem-Engine beachten: die
 * Root-Grösse ändert sich je Breakpoint, darum sind alle Werte in rem).
 *
 * CSS desktop-first (Projekt-Konvention, siehe CLAUDE.md).
 */

/* Anker-Klasse für den umgebenden Block – hierauf positioniert sich die CTA. */
.spnkt-social-cta-anchor {
	position: relative;
}

.spnkt-social-cta {
	position: absolute;
	z-index: 10;
	top: -15%;
	right: -2%;
	width: 26.25rem;
	aspect-ratio: 1;

	/*
	 * Dauer und Verzögerung der Reveal-Animation als Custom Properties, damit
	 * Hover-, Fokus- und Scroll-Zustand dieselben Werte teilen.
	 */
	--spnkt-cta-dauer: 0.5s;
	--spnkt-cta-ease: cubic-bezier( 0.215, 0.61, 0.355, 1 ); /* ≈ GSAP power3.out */

	/*
	 * Versatz des Titelblocks aus der Blütenmitte heraus – in Prozent der
	 * BLÜTENGRÖSSE (cqh via Container Query), nicht in rem.
	 *
	 * Grund: Die Blüte skaliert über die viewport-proportionale Root-rem-Engine
	 * (siehe global.css) und ist je nach Breite zwischen ~160 und ~400px hoch.
	 * Ein fester rem-Versatz sitzt bei kleinen Blüten zu tief und schiebt die
	 * Icons an den unteren Rand – sichtbar z.B. um 940px Viewport-Breite.
	 * Im Ruhezustand steht nur der Titel mittig; beim Reveal rückt der Block
	 * nach oben, damit die aufklappenden Icons darunter Platz finden.
	 */
	--spnkt-cta-y-ruhe: 19cqh;
	--spnkt-cta-y-reveal: 2cqh;

	/* Bezugsgrösse für die cqh-Werte oben. */
	container-type: size;
}

/* Ecken-Varianten (Shortcode-Attribut `position`). */
.spnkt-social-cta--top-left {
	right: auto;
	left: -2%;
}

.spnkt-social-cta--bottom-right {
	top: auto;
	bottom: -15%;
}

.spnkt-social-cta--bottom-left {
	top: auto;
	right: auto;
	bottom: -15%;
	left: -2%;
}

/* --- Blume ------------------------------------------------------------- */

.spnkt-social-cta__bg,
.spnkt-social-cta__bg svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/*
 * Zwei getrennte Ebenen, weil sich zwei Transforms überlagern: der Wrapper
 * skaliert beim Reveal, das SVG darin rotiert dauerhaft. In einem Element
 * würden sich die beiden gegenseitig überschreiben.
 */
.spnkt-social-cta__bg {
	transition: transform var( --spnkt-cta-dauer ) var( --spnkt-cta-ease );
	will-change: transform;
}

.spnkt-social-cta__bg svg {
	transform-origin: center;
	animation: spnkt-cta-spin 40s linear infinite;
}

/* Blütenfarbe folgt der Saison-Palette. */
.spnkt-social-cta__bg svg path {
	fill: var( --wp--preset--color--primary );
}

@keyframes spnkt-cta-spin {

	from {
		transform: rotate( 0deg );
	}

	to {
		transform: rotate( 360deg );
	}
}

/* --- Inhalt ------------------------------------------------------------ */

/*
 * Die Inhaltsebene ist leicht schräg gestellt (8deg) – wie im Alt-Theme.
 * `pointer-events: none` auf der Ebene, damit die Blüte selbst nicht klickt;
 * die Links bekommen es weiter unten zurück.
 */
.spnkt-social-cta__inner {
	position: absolute;
	inset: 0;
	display: flex;
	/* Mittig statt oben: so bleibt der Inhalt bei jeder Blütengrösse zentriert
	   und der Reveal-Versatz wirkt symmetrisch um die Mitte. */
	align-items: center;
	justify-content: center;
	padding: 1em;
	transform: rotate( 8deg ) scale(.95,.95);
	transform-origin: center center;
	pointer-events: none;
}

.spnkt-social-cta__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	transform: translateY( var( --spnkt-cta-y-ruhe ) );
	transition: transform var( --spnkt-cta-dauer ) var( --spnkt-cta-ease );
	will-change: transform;
}

/*
 * Der Titel soll zweizeilig brechen («Folge uns auf / Social Media»); eine
 * dritte Zeile schöbe die Icons über den unteren Blütenrand. Bewusst KEIN
 * `text-wrap: balance` – das gleicht die Zeilen aus und erzeugt hier gerade
 * die dritte Zeile.
 */
.spnkt-social-cta__title {
	max-width: 22rem;
	margin: 0;
	color: var( --wp--preset--color--secondary );
	font-family: var( --wp--preset--font-family--heading );
	/* PP Woodland gibt es nur in 700 – ohne das synthetisiert der Browser
	   Fett bzw. fällt auf Outfit zurück und der Titel bricht dreizeilig. */
	font-weight: 700;
	font-size: var( --wp--preset--font-size--x-large );
	line-height: 1.19;
	text-align: center;
	hyphens: none;

	/*
	 * PP Woodland bringt sehr grosse intrinsische Font-Metriken mit: die
	 * Zeilenboxen werden dadurch ~15 % höher als line-height vorgibt und der
	 * Titel drückt die Icons nach unten aus der Blüte. `text-box-trim` schneidet
	 * den überschüssigen Halbraum weg. Browser ohne Support rendern minimal
	 * tiefer – der Reveal-Versatz unten ist so gewählt, dass es auch dann passt.
	 */
	text-box: trim-both cap alphabetic;
}

/* --- Icons ------------------------------------------------------------- */

/*
 * Festes 2-Spalten-Raster (2×2) wie auf der Live-Site. Bewusst Grid statt
 * Flex-Umbruch: der Umbruchpunkt hinge sonst an der exakten Glyphenbreite des
 * Icon-Fonts und kippte je nach Rendering auf 3+1.
 */
.spnkt-social-cta__list {
	display: grid;
	grid-template-columns: repeat( 2, auto );
	justify-content: center;
	justify-items: center;
	gap: 0.75rem 1.25rem;
	margin: 0.75em auto 0;
	padding: 0;
	list-style: none;
}

.spnkt-social-cta__item {
	margin: 0;
	display: flex;
}

/*
 * Ruhezustand: Icons sind unsichtbar und auf 0 skaliert – aber bewusst über
 * `opacity`, NICHT über `visibility`/`display`. Beide letzteren nehmen den
 * Link aus der Tab-Reihenfolge, womit die Social-Links für Tastaturnutzende
 * auf Desktop unerreichbar wären (der Reveal hängt ja am Hover). Mit opacity
 * bleibt der Link fokussierbar und `:focus-within` blendet die Blume auf.
 */
.spnkt-social-cta__link {
	display: inline-block;
	color: var( --wp--preset--color--secondary );
	font-size: 3.25rem;
	line-height: 1;
	text-decoration: none;
	opacity: 0;
	transform: scale( 0 );
	transition:
		transform var( --spnkt-cta-dauer ) var( --spnkt-cta-ease ),
		opacity var( --spnkt-cta-dauer ) var( --spnkt-cta-ease );
	pointer-events: auto; /* Gegenstück zu pointer-events:none am __inner. */
	will-change: transform, opacity;
}

/*
 * Stagger wie im Alt-Theme (0.07s je Icon). Beim Ausblenden laufen sie
 * gleichzeitig zurück – deshalb sitzt die Verzögerung nur im Reveal-Zustand.
 */
.spnkt-social-cta__item:nth-child( 1 ) .spnkt-social-cta__link {
	--spnkt-cta-stagger: 0s;
}

.spnkt-social-cta__item:nth-child( 2 ) .spnkt-social-cta__link {
	--spnkt-cta-stagger: 0.07s;
}

.spnkt-social-cta__item:nth-child( 3 ) .spnkt-social-cta__link {
	--spnkt-cta-stagger: 0.14s;
}

.spnkt-social-cta__item:nth-child( 4 ) .spnkt-social-cta__link {
	--spnkt-cta-stagger: 0.21s;
}

/* --- Reveal ------------------------------------------------------------ */

/*
 * Ein Zustand, zwei Auslöser: Hover auf der CTA und Tastaturfokus auf einem
 * der Links (`:focus-within` – ohne das wären die Icons per Tab unerreichbar).
 */
.spnkt-social-cta:hover .spnkt-social-cta__bg,
.spnkt-social-cta:focus-within .spnkt-social-cta__bg {
	transform: scale( 1.05 );
}

.spnkt-social-cta:hover .spnkt-social-cta__content,
.spnkt-social-cta:focus-within .spnkt-social-cta__content {
	transform: translateY( var( --spnkt-cta-y-reveal ) );
}

.spnkt-social-cta:hover .spnkt-social-cta__link,
.spnkt-social-cta:focus-within .spnkt-social-cta__link {
	opacity: 1;
	transform: scale( 1 );
	transition:
		transform var( --spnkt-cta-dauer ) var( --spnkt-cta-ease ) var( --spnkt-cta-stagger, 0s ),
		opacity var( --spnkt-cta-dauer ) var( --spnkt-cta-ease ) var( --spnkt-cta-stagger, 0s );
}

/* Sichtbarer Fokus (WCAG 2.4.7 / 2.4.11) auf dem farbigen Blütengrund. */
.spnkt-social-cta__link:focus-visible {
	outline: 2px solid var( --wp--preset--color--secondary );
	outline-offset: 4px;
	border-radius: 2px;
}

/*
 * Touch-Geräte kennen kein Hover: dort löst das Scrollen den Reveal aus –
 * scroll-getrieben über `animation-timeline: view()`, ganz ohne JS.
 * Browser ohne Support (aktuell Safari/Firefox) fallen über @supports auf
 * «dauerhaft sichtbar» zurück, damit die Icons nie unerreichbar sind.
 */
@media ( hover: none ) {

	/* Fallback zuerst: Icons offen zeigen, Titel in Reveal-Position. */
	.spnkt-social-cta__content {
		transform: translateY( var( --spnkt-cta-y-reveal ) );
	}

	.spnkt-social-cta__bg {
		transform: scale( 1.05 );
	}

	.spnkt-social-cta__link {
		opacity: 1;
		transform: scale( 1 );
		transition: none;
	}

	/* Wo View-Timelines unterstützt sind: dieselbe Choreografie beim Scrollen. */
	@supports ( animation-timeline: view() ) {

		.spnkt-social-cta__bg {
			transform: none;
			animation: spnkt-cta-bg-reveal linear both;
			animation-timeline: view();
			animation-range: entry 35% entry 85%;
		}

		.spnkt-social-cta__content {
			transform: translateY( var( --spnkt-cta-y-ruhe ) );
			animation: spnkt-cta-content-reveal linear both;
			animation-timeline: view();
			animation-range: entry 35% entry 85%;
		}

		.spnkt-social-cta__link {
			animation: spnkt-cta-icon-reveal linear both;
			animation-timeline: view();
		}

		/* Stagger im Scroll-Verlauf: jedes Icon startet etwas später. */
		.spnkt-social-cta__item:nth-child( 1 ) .spnkt-social-cta__link {
			animation-range: entry 45% entry 75%;
		}

		.spnkt-social-cta__item:nth-child( 2 ) .spnkt-social-cta__link {
			animation-range: entry 50% entry 80%;
		}

		.spnkt-social-cta__item:nth-child( 3 ) .spnkt-social-cta__link {
			animation-range: entry 55% entry 85%;
		}

		.spnkt-social-cta__item:nth-child( 4 ) .spnkt-social-cta__link {
			animation-range: entry 60% entry 90%;
		}
	}
}

@keyframes spnkt-cta-bg-reveal {

	from {
		transform: scale( 1 );
	}

	to {
		transform: scale( 1.05 );
	}
}

@keyframes spnkt-cta-content-reveal {

	from {
		transform: translateY( var( --spnkt-cta-y-ruhe ) );
	}

	to {
		transform: translateY( var( --spnkt-cta-y-reveal ) );
	}
}

@keyframes spnkt-cta-icon-reveal {

	from {
		opacity: 0;
		transform: scale( 0 );
	}

	to {
		opacity: 1;
		transform: scale( 1 );
	}
}

/* --- 1280px: Mini-Desktop ---------------------------------------------- */
@media only screen and ( max-width: 80em ) {

	/* Position und Grösse aus dem Alt-Theme; der Inhalts-Versatz skaliert über
	   cqh automatisch mit und braucht hier keinen eigenen Wert mehr. */
	.spnkt-social-cta {
		top: -5rem;
		right: -2.5rem;
		width: 22rem;
	}
}

/* --- 880px: Tablet ------------------------------------------------------ */
@media only screen and ( max-width: 55em ) {

	/*
	 * Ab hier gilt die Mobile-Grösse. Die Root-rem-Engine springt bei 880px
	 * nach oben (~15px statt ~9.6px), wodurch 22rem eine grössere Blüte ergäbe
	 * als auf Desktop – darum hier fix auf 11rem.
	 */
	.spnkt-social-cta {
		top: -4rem;
		right: -1.5rem;
		width: 11rem;
	}

	.spnkt-social-cta__title {
		max-width: 8rem;
		font-size: var( --wp--preset--font-size--base, 1rem );
	}

	.spnkt-social-cta__list {
		gap: 0.35rem 0.5rem;
		margin-top: 0.5em;
	}

	.spnkt-social-cta__link {
		font-size: 1.25rem;
	}
}

/* --- 576px: Mobile ------------------------------------------------------ */
@media only screen and ( max-width: 36em ) {

	/*
	 * Grösse und Innenwerte erbt die CTA vom Tablet-Block; hier rutscht sie
	 * nur 50px tiefer, damit sie den darüberliegenden Text nicht überlappt.
	 */
	.spnkt-social-cta {
		top: calc( -4rem + 50px );
	}
}

/*
 * Bewegungsreduktion: keine Rotation, kein Reveal – Icons dauerhaft sichtbar,
 * damit die Links ohne Animation erreichbar bleiben (WCAG 2.3.3).
 */
@media ( prefers-reduced-motion: reduce ) {

	.spnkt-social-cta__bg svg {
		animation: none;
	}

	.spnkt-social-cta__bg,
	.spnkt-social-cta__content,
	.spnkt-social-cta__link {
		animation: none;
		transition: none;
	}

	.spnkt-social-cta__content {
		transform: translateY( var( --spnkt-cta-y-reveal ) );
	}

	.spnkt-social-cta__link {
		opacity: 1;
		transform: none;
	}
}