/**
 * Animationen.
 *
 * Ergänzt main.css, ohne bestehende Regeln zu überschreiben. Zwei Bausteine:
 *
 *   1. Ein Scroll-Reveal-System, das assets/js/animations.js über die
 *      Klassen `rst-reveal` (Einzelelement) und `rst-stagger` (Gruppe mit
 *      versetzten Kindern) steuert. Ohne JavaScript bleibt alles sofort
 *      sichtbar – das ist progressive enhancement, kein Voraussetzung.
 *   2. Feine Hover- und Eintritts-Animationen auf vorhandenen Bausteinen
 *      (Karten, Knöpfe, Kreise, FAQ, schwebende Schaltfläche, Hero).
 *
 * `prefers-reduced-motion` schaltet am Ende der Datei alles ab.
 *
 * @package RedSea_Tours
 */

:root {
	--rst-reveal-duration: 700ms;
	--rst-reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--rst-reveal-distance: 26px;
	--rst-stagger-step: 80ms;
}

/* --------------------------------------------------------------------------
   1. Scroll-Reveal
   -------------------------------------------------------------------------- */

.rst-reveal {
	opacity: 0;
	transform: translateY(var(--rst-reveal-distance));
	transition:
		opacity var(--rst-reveal-duration) var(--rst-reveal-ease),
		transform var(--rst-reveal-duration) var(--rst-reveal-ease);
}

.rst-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Gruppen mit versetzten Kindern (Karten-Raster, Kreise, FAQ, Zeitstrahl …).
   Das Elternelement trägt `rst-stagger`, jedes Kind `rst-reveal`; erst wenn
   der Elterncontainer den Bildschirm erreicht, lösen alle Kinder gemeinsam
   aus – zeitlich leicht versetzt über nth-child. */
.rst-stagger > .rst-reveal {
	transition-delay: 0ms;
}

.rst-stagger.is-visible > .rst-reveal {
	opacity: 1;
	transform: none;
}

.rst-stagger > .rst-reveal:nth-child(2) {
	transition-delay: var(--rst-stagger-step);
}

.rst-stagger > .rst-reveal:nth-child(3) {
	transition-delay: calc(var(--rst-stagger-step) * 2);
}

.rst-stagger > .rst-reveal:nth-child(4) {
	transition-delay: calc(var(--rst-stagger-step) * 3);
}

.rst-stagger > .rst-reveal:nth-child(5) {
	transition-delay: calc(var(--rst-stagger-step) * 4);
}

.rst-stagger > .rst-reveal:nth-child(6) {
	transition-delay: calc(var(--rst-stagger-step) * 5);
}

.rst-stagger > .rst-reveal:nth-child(7),
.rst-stagger > .rst-reveal:nth-child(8),
.rst-stagger > .rst-reveal:nth-child(9),
.rst-stagger > .rst-reveal:nth-child(10) {
	transition-delay: calc(var(--rst-stagger-step) * 6);
}

/* Leichte Skalierung zusätzlich zum Aufsteigen – wirkt bei runden Kacheln
   (Kategorie-Kreise) lebendiger als reines Verschieben. */
.rst-circles__item.rst-reveal {
	transform: translateY(var(--rst-reveal-distance)) scale(0.92);
}

.rst-stagger.is-visible > .rst-circles__item.rst-reveal {
	transform: none;
}

/* Karten bekommen zusätzlich einen „Vorhang"-Enthüllungseffekt: Das Bild
   liegt zunächst hinter der unteren Kante verborgen und fährt beim
   Erscheinen hoch. Läuft über dieselbe nth-child-Verzögerung wie Aufsteigen
   und Einblenden, da es dasselbe Element ist – keine zweite Regelkette
   nötig. Browser ohne clip-path-Unterstützung ignorieren die Zeile und
   zeigen weiterhin das normale Aufsteigen/Einblenden. */
.rst-stagger > .rst-card.rst-reveal {
	clip-path: inset(0 0 14% 0 round var(--rst-radius-lg));
	transition:
		opacity var(--rst-reveal-duration) var(--rst-reveal-ease),
		transform var(--rst-reveal-duration) var(--rst-reveal-ease),
		clip-path var(--rst-reveal-duration) var(--rst-reveal-ease);
}

.rst-stagger.is-visible > .rst-card.rst-reveal {
	clip-path: inset(0 0 0% 0 round var(--rst-radius-lg));
}

/* Die Abbruchkante zeichnet sich von links nach rechts, sobald ihr
   Elternelement (Abschnittskopf oder Ausflugs-Block) sichtbar wird. */
.rst-reveal .rst-edge {
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform 650ms var(--rst-reveal-ease) 180ms;
}

.rst-reveal.is-visible .rst-edge {
	transform: scaleX(1);
}

[dir="rtl"] .rst-reveal .rst-edge {
	transform-origin: right center;
}

/* --------------------------------------------------------------------------
   2. Hero – Eintritt beim Laden (kein Scroll nötig, Hero ist immer sichtbar)
   -------------------------------------------------------------------------- */

@keyframes rst-hero-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.rst-hero__eyebrow,
.rst-hero__title,
.rst-hero__subtitle,
.rst-hero__search,
.rst-hero__actions {
	animation: rst-hero-in 800ms var(--rst-reveal-ease) both;
}

.rst-hero__eyebrow {
	animation-delay: 80ms;
}

.rst-hero__title {
	animation-delay: 180ms;
}

.rst-hero__subtitle {
	animation-delay: 300ms;
}

.rst-hero__search {
	animation-delay: 420ms;
}

.rst-hero__actions {
	animation-delay: 520ms;
}

/* Sehr langsame, kaum merkliche Vergrößerung des Hero-Bildes – bekannt als
   „Ken-Burns-Effekt". Läuft unabhängig vom Slider-Fading auf dem Bild
   selbst, nicht auf dem Folienelement. */
@keyframes rst-kenburns {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.08);
	}
}

/*
 * Ken Burns laeuft NUR, solange der Hero im Bild ist.
 *
 * Eine Endlos-Animation auf einem grossen Bild beschaeftigt den Compositor
 * dauerhaft - auch wenn der Gast laengst zehn Bildschirme weiter unten liest.
 * Die Klasse `is-onscreen` setzt animations.js ueber denselben Observer, der
 * ohnehin schon laeuft; es kommt kein neuer Zuhoerer dazu.
 */
.rst-hero__media img {
	animation: rst-kenburns 18s var(--rst-reveal-ease) infinite alternate;
	animation-play-state: paused;
}

.rst-hero.is-onscreen .rst-hero__media img {
	animation-play-state: running;
}

/* --------------------------------------------------------------------------
   3. Karten – zusätzlich zum bestehenden Anheben/Bildzoom
   -------------------------------------------------------------------------- */

.rst-card__media {
	isolation: isolate;
}

.rst-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		115deg,
		transparent 40%,
		rgba(255, 255, 255, 0.35) 48%,
		transparent 56%
	);
	transform: translateX(-120%);
	pointer-events: none;
}

.rst-card:hover .rst-card__media::after,
.rst-card:focus-within .rst-card__media::after {
	transform: translateX(120%);
	transition: transform 750ms var(--rst-reveal-ease);
}

/* --------------------------------------------------------------------------
   4. Knöpfe – Lichtstreif beim Überfahren, feines Drücken bleibt bestehen
   -------------------------------------------------------------------------- */

.rst-btn--accent,
.rst-btn--primary,
.rst-btn:not(.rst-btn--ghost):not(.rst-btn--secondary) {
	position: relative;
	overflow: hidden;
}

.rst-btn--accent::before,
.rst-btn--primary::before,
.rst-btn:not(.rst-btn--ghost):not(.rst-btn--secondary)::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		115deg,
		transparent 35%,
		rgba(255, 255, 255, 0.4) 48%,
		transparent 61%
	);
	transform: translateX(-130%);
	pointer-events: none;
}

.rst-btn--accent:hover::before,
.rst-btn--primary:hover::before,
.rst-btn:not(.rst-btn--ghost):not(.rst-btn--secondary):hover::before {
	transform: translateX(130%);
	transition: transform 650ms var(--rst-reveal-ease);
}

/* Der Pfeil in Buttons (z. B. „Ausflüge entdecken") schiebt sich beim
   Überfahren leicht nach vorn – verstärkt die Handlungsaufforderung. */
.rst-btn .rst-icon {
	transition: transform var(--rst-duration) var(--rst-ease);
}

.rst-btn:hover .rst-icon {
	transform: translateX(3px);
}

[dir="rtl"] .rst-btn:hover .rst-icon {
	transform: translateX(-3px);
}

/* --------------------------------------------------------------------------
   5. Kategorie-Kreise
   -------------------------------------------------------------------------- */

.rst-circle__ring {
	transition:
		transform var(--rst-duration) var(--rst-ease),
		filter var(--rst-duration) var(--rst-ease);
}

.rst-circle:hover .rst-circle__ring,
.rst-circle:focus-visible .rst-circle__ring {
	filter: saturate(1.15);
}

.rst-circle__media img {
	transition: transform 420ms var(--rst-ease);
}

.rst-circle:hover .rst-circle__media img {
	transform: scale(1.08);
}

/* --------------------------------------------------------------------------
   6. Schwebende WhatsApp-Schaltfläche – sanftes Schweben plus Aufmerksamkeitsring
   -------------------------------------------------------------------------- */

@keyframes rst-fab-float {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-5px);
	}
}

@keyframes rst-fab-ping {
	0% {
		transform: scale(1);
		opacity: 0.45;
	}

	100% {
		transform: scale(1.7);
		opacity: 0;
	}
}

/*
 * Der schwebende Knopf ist immer am Bildschirmrand - seine Animation laeuft
 * also die gesamte Besuchsdauer. Nach dem ersten Blick hat sie ihren Zweck
 * erfuellt: Sie soll auffallen, nicht dauerhaft zappeln. Deshalb endet sie
 * nach sechs Durchlaeufen (rund 20 Sekunden) und der Knopf steht still.
 */
.rst-fab {
	position: relative;
	animation: rst-fab-float 3.2s ease-in-out 6;
}

.rst-fab::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: currentColor;
	animation: rst-fab-ping 2.4s ease-out 5;
	pointer-events: none;
	z-index: -1;
}

.rst-fab:hover,
.rst-fab:focus-visible {
	animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   7. Hauptnavigation – Unterstrich statt nur Hintergrundfarbe
   -------------------------------------------------------------------------- */

.rst-nav__list > li > a {
	position: relative;
}

.rst-nav__list > li > a::after {
	content: "";
	position: absolute;
	left: var(--rst-space-3);
	right: var(--rst-space-3);
	bottom: 6px;
	height: 2px;
	background: var(--rst-lagoon-500);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--rst-duration) var(--rst-ease);
}

.rst-nav__list > li > a:hover::after,
.rst-nav__list > li.current-menu-item > a::after {
	transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   8. FAQ – sanftes Einblenden der Antwort
   -------------------------------------------------------------------------- */

@keyframes rst-faq-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.rst-faq__item[open] .rst-faq__answer {
	animation: rst-faq-in 320ms var(--rst-reveal-ease);
}

/* --------------------------------------------------------------------------
   9. Kopfzeile – dezentes Schrumpfen beim Herunterscrollen
   Nutzt die bereits vorhandene Klasse `is-pinned` (navigation.js).
   -------------------------------------------------------------------------- */

.rst-header--sticky .rst-header__inner,
.rst-header--sticky .rst-brand img {
	transition:
		min-height var(--rst-duration) var(--rst-ease),
		max-height var(--rst-duration) var(--rst-ease);
}

.rst-header--sticky.is-pinned .rst-header__inner {
	min-height: calc(var(--rst-header-h) - 12px);
}

.rst-header--sticky.is-pinned .rst-brand img {
	max-height: 38px;
}

/* --------------------------------------------------------------------------
   10. Hero-Titel – Wörter ziehen einzeln nach oben ein
   animations.js zerlegt den Titel in <span>-Wörter und setzt --rst-word-i;
   ohne JavaScript bleibt der Titel unverändert und sofort lesbar.
   -------------------------------------------------------------------------- */

.rst-hero__title[data-rst-split] {
	animation: none;
	opacity: 1;
	transform: none;
}

.rst-hero__title[data-rst-split] .rst-word {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.4em);
	animation: rst-hero-in 700ms var(--rst-reveal-ease) both;
	animation-delay: calc(180ms + var(--rst-word-i, 0) * 60ms);
}

/* --------------------------------------------------------------------------
   11. Karten – Lichtkegel folgt dem Mauszeiger
   animations.js schreibt --rst-mx/--rst-my nur, solange die Maus über der
   Karte steht (pointer: fine); auf Touch-Geräten bleibt die Regel inaktiv,
   da die Variablen dort nie gesetzt werden.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
	.rst-card {
		--rst-mx: 50%;
		--rst-my: 50%;
	}

	.rst-card::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 3;
		opacity: 0;
		background: radial-gradient(
			280px circle at var(--rst-mx) var(--rst-my),
			rgba(255, 255, 255, 0.16),
			transparent 65%
		);
		transition: opacity var(--rst-duration) var(--rst-ease);
		pointer-events: none;
	}

	.rst-card:hover::before {
		opacity: 1;
	}
}

/* --------------------------------------------------------------------------
   12. Preis – Unterstrich zieht beim Überfahren der Karte
   -------------------------------------------------------------------------- */

.rst-price__value {
	position: relative;
}

.rst-price__value::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: var(--rst-amber-500);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--rst-duration) var(--rst-ease);
}

.rst-card:hover .rst-price__value::after,
.rst-card:focus-within .rst-price__value::after {
	transform: scaleX(1);
}

[dir="rtl"] .rst-price__value::after {
	transform-origin: right;
}

/* --------------------------------------------------------------------------
   13. Plakette „Beliebt" – ruhiges Atmen statt starrem Stillstand
   -------------------------------------------------------------------------- */

@keyframes rst-badge-breathe {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(233, 161, 59, 0.45);
	}

	50% {
		box-shadow: 0 0 0 4px rgba(233, 161, 59, 0);
	}
}

/*
 * Dasselbe Prinzip: Der Puls lenkt beim Erscheinen den Blick auf die
 * Auszeichnung. Danach ist er nur noch Unruhe - auf einer Uebersicht mit
 * vielen Karten laufen sonst zwanzig Animationen gleichzeitig, dauerhaft.
 */
.rst-badge {
	animation: rst-badge-breathe 2.6s ease-in-out 4;
}

/* --------------------------------------------------------------------------
   14. Sterne-Bewertung – tröpfeln beim Erscheinen der Karte nach
   -------------------------------------------------------------------------- */

.rst-stagger.is-visible > .rst-card.rst-reveal .rst-rating__stars .rst-icon {
	animation: rst-star-in 420ms var(--rst-reveal-ease) both;
}

.rst-stagger.is-visible > .rst-card.rst-reveal .rst-rating__stars .rst-icon:nth-child(1) {
	animation-delay: 260ms;
}

.rst-stagger.is-visible > .rst-card.rst-reveal .rst-rating__stars .rst-icon:nth-child(2) {
	animation-delay: 310ms;
}

.rst-stagger.is-visible > .rst-card.rst-reveal .rst-rating__stars .rst-icon:nth-child(3) {
	animation-delay: 360ms;
}

.rst-stagger.is-visible > .rst-card.rst-reveal .rst-rating__stars .rst-icon:nth-child(4) {
	animation-delay: 410ms;
}

.rst-stagger.is-visible > .rst-card.rst-reveal .rst-rating__stars .rst-icon:nth-child(5) {
	animation-delay: 460ms;
}

@keyframes rst-star-in {
	from {
		opacity: 0;
		transform: scale(0.4);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   15. Hero-Bild – sehr sanfter Parallax-Versatz beim Scrollen (Desktop)
   animations.js schreibt --rst-parallax nur ab 1024px Breite und mit
   passiver, rAF-gedrosselter Scroll-Behandlung.
   -------------------------------------------------------------------------- */

.rst-hero__media {
	transform: translateY(var(--rst-parallax, 0px));
}

/* --------------------------------------------------------------------------
   16. Barrierefreiheit: reduzierte Bewegung
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.rst-reveal,
	.rst-stagger > .rst-reveal,
	.rst-circles__item.rst-reveal,
	.rst-stagger > .rst-card.rst-reveal {
		opacity: 1;
		transform: none;
		clip-path: none;
		transition: none;
	}

	.rst-reveal .rst-edge {
		transform: scaleX(1);
		transition: none;
	}

	.rst-hero__eyebrow,
	.rst-hero__title,
	.rst-hero__subtitle,
	.rst-hero__search,
	.rst-hero__actions,
	.rst-hero__media img,
	.rst-hero__title[data-rst-split] .rst-word,
	.rst-fab,
	.rst-fab::before,
	.rst-faq__item[open] .rst-faq__answer,
	.rst-badge,
	.rst-stagger.is-visible > .rst-card.rst-reveal .rst-rating__stars .rst-icon {
		animation: none;
	}

	.rst-hero__title[data-rst-split] .rst-word {
		opacity: 1;
		transform: none;
	}

	.rst-hero__media {
		transform: none;
	}

	.rst-header--sticky .rst-header__inner,
	.rst-header--sticky .rst-brand img {
		transition: none;
	}

	/* Der Lichtfleck folgt dem Zeiger und ist damit Bewegung, auch wenn
	   keine Keyframes daran haengen - er gehoert also hierher. */
	.rst-card__glow,
	.rst-card::before,

	.rst-card__media::after,
	.rst-btn--accent::before,
	.rst-btn--primary::before,
	.rst-btn:not(.rst-btn--ghost):not(.rst-btn--secondary)::before {
		transition: none;
	}
}