/* ==========================================================================
   Bewegung: Keyframes, Scroll-Reveals, Ruecksicht auf Systemeinstellungen
   ========================================================================== */

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */

@keyframes ag-puls {
	0%   { transform: scale(.85); opacity: .9; }
	70%  { transform: scale(1.9); opacity: 0; }
	100% { transform: scale(1.9); opacity: 0; }
}

/* Kaum merklicher Zoom auf stehenden Slider-Kacheln.
   Vier Varianten mit verschiedenen Richtungen: Liefen alle Kacheln
   gleich, saehe das Raster aus wie eine einzige grosse Flaeche. */
@keyframes ag-atmen {
	from { transform: scale(1) translate3d(0, 0, 0); }
	to   { transform: scale(1.09) translate3d(-1.5%, -1%, 0); }
}

@keyframes ag-atmen-b {
	from { transform: scale(1.08) translate3d(1.5%, 1%, 0); }
	to   { transform: scale(1) translate3d(0, 0, 0); }
}

@keyframes ag-atmen-c {
	from { transform: scale(1.02) translate3d(1%, -1%, 0); }
	to   { transform: scale(1.1) translate3d(-1%, 1.5%, 0); }
}

@keyframes ag-atmen-d {
	from { transform: scale(1.1) translate3d(-1%, -1.5%, 0); }
	to   { transform: scale(1.01) translate3d(1%, .5%, 0); }
}

/* Der Strich, der im Scroll-Hinweis nach unten laeuft. */
@keyframes ag-tropfen {
	0%   { transform: translateY(-46px); }
	100% { transform: translateY(46px); }
}

/* Blaeschen im Cocktailglas. */
@keyframes ag-perle {
	0%   { transform: translateY(0) scale(.6); opacity: 0; }
	18%  { opacity: .85; }
	100% { transform: translateY(-46px) scale(1.15); opacity: 0; }
}

/* Aufsteigender Rauch: hoch, leicht zur Seite, dabei groesser und duenner. */
@keyframes ag-rauch {
	0% {
		transform: translate3d(0, 0, 0) scale(.45);
		opacity: 0;
	}
	12% { opacity: .62; }
	55% { opacity: .38; }
	100% {
		transform: translate3d(var(--ag-drift, 30px), -300%, 0) scale(2.3);
		opacity: 0;
	}
}

@keyframes ag-flimmern {
	from { opacity: .5; transform: scaleY(1); }
	to   { opacity: .95; transform: scaleY(1.22); }
}

/* Laufband: exakt die halbe Strecke, weil der Inhalt doppelt im
   Markup steht - dadurch ist der Sprung am Ende unsichtbar. */
@keyframes ag-laufen {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* --------------------------------------------------------------------------
   Scroll-Reveals
   -------------------------------------------------------------------------- */

/* Eine eigene, sehr weich auslaufende Kurve. Sie startet zuegig und
   kommt langsam zur Ruhe - das laesst die Bewegung teuer wirken statt
   mechanisch. */
:root { --ag-kurve-weich: cubic-bezier(.16, 1, .3, 1); }

.ag-reveal {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
	transition:
		opacity 1.1s var(--ag-kurve-weich),
		transform 1.2s var(--ag-kurve-weich);
	transition-delay: var(--ag-verzug, 0ms);
}

.ag-reveal.ist-sichtbar {
	opacity: 1;
	transform: none;
}

/* Fuer Ueberschriften und Fliesstext: kuerzerer Weg, damit die Seite
   beim Scrollen nicht staendig wogt. */
.ag-reveal--zart {
	transform: translate3d(0, 16px, 0);
	transition-duration: .9s, 1s;
}

/* Bilder ziehen zusaetzlich aus einem leichten Zoom auf - derselbe
   Gedanke wie beim Slider, nur einmalig. */
.agave .ag-reveal img {
	transform: scale(1.05);
	transition: transform 1.6s var(--ag-kurve-weich), filter 1.2s var(--ag-kurve-weich);
	transition-delay: var(--ag-verzug, 0ms);
}

.agave .ag-reveal.ist-sichtbar img { transform: scale(1); }

/* Ausnahme: Bilder, die von sich aus in Bewegung sind oder ihre
   Groesse anderweitig steuern. */
.agave .ag-reveal .ag-fliese__seite img,
.agave .ag-highlight__bild img,
.agave .ag-galerie__bild img,
.agave .ag-grill__rahmen img { transition: transform 1.2s var(--ag-kurve); }

/* Die Galerie- und Empfehlungsbilder bekommen ihren Aufzug ueber den
   Rahmen, damit der Hover-Zoom davon unberuehrt bleibt. */
.ag-galerie__bild,
.ag-highlight__bild {
	clip-path: inset(0 0 0 0);
	transition: clip-path 1.3s var(--ag-kurve-weich);
	transition-delay: var(--ag-verzug, 0ms);
}

.ag-reveal:not(.ist-sichtbar) .ag-galerie__bild,
.ag-reveal:not(.ist-sichtbar) .ag-highlight__bild { clip-path: inset(0 0 100% 0); }

/* Ohne JavaScript bleibt nichts unsichtbar - das erledigt der
   noscript-Block im Kopfbereich. */

/* --------------------------------------------------------------------------
   Ruecksicht auf "Bewegung reduzieren"
   --------------------------------------------------------------------------
   Wer das im System eingestellt hat, bekommt dieselbe Seite ohne Bewegung:
   Der Slider wechselt weich ueberblendet statt zu klappen, der Hero steht
   fertig da, der Rauch steht still. Nichts wird versteckt.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	html { scroll-behavior: auto; }

	.agave *,
	.agave *::before,
	.agave *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	/* Reveals sofort sichtbar. */
	.ag-reveal { opacity: 1; transform: none; }

	/* Slider: kein Klappen, sondern ein ruhiger Wechsel. Die Rueckseite
	   wird dafuer nach vorn geholt statt gedreht. */
	.ag-fliese { perspective: none; }
	.ag-fliese__wuerfel { transform: none !important; transition: none; }
	.ag-fliese__seite { backface-visibility: visible; -webkit-backface-visibility: visible; }
	.ag-fliese__seite--b { transform: none; }

	.ag-fliese__seite {
		opacity: 0;
		transition: opacity .4s linear !important;
	}

	.ag-fliese__seite.ist-vorn { opacity: 1; }
	.ag-fliese__seite img { animation: none; }

	/* Hero: alles offen und sichtbar, ohne Scroll-Abhaengigkeit. */
	.ag-hero { height: auto; }
	.ag-hero__buehne { position: static; height: auto; min-height: 76svh; padding-block: var(--ag-luft); }
	.ag-hero__mitte { opacity: 1 !important; transform: none !important; }
	.ag-hero__fluegel { display: none; }
	.ag-hero__hintergrund img { opacity: .22 !important; transform: none !important; }

	.ag-hero__glas {
		position: static;
		transform: none !important;
		opacity: .9 !important;
		margin-block-start: 2rem;
		order: 9;
	}

	.ag-glas__fuellung,
	.ag-glas__spiegel { transform: translateY(78px); }
	.ag-glas__limette { opacity: 1; transform: none; }
	.ag-glas__perlen { opacity: 1; }

	/* Rauch und Flimmern anhalten, aber sichtbar lassen. */
	.ag-rauch__schwade {
		animation: none;
		opacity: .3;
		transform: translate3d(0, -120%, 0) scale(1.6);
	}

	.ag-grill__flimmern { animation: none; opacity: .6; }

	/* Laufband stehen lassen. */
	.ag-laufband__spur { animation: none; }

	/* Beide Endlosbaender anhalten. Die Bilder bleiben sichtbar - nur
	   eben still, statt zu laufen und zu schweben. */
	.ag-cocktails__spur,
	.ag-galerie__spur { animation: none; }
	.agave .ag-cocktails__glas img { animation: none; }
	.ag-cocktails__schatten { animation: none; }

}

/* --------------------------------------------------------------------------
   Druck
   -------------------------------------------------------------------------- */

@media print {
	.ag-kopf, .ag-fuss, .ag-mobilleiste, .ag-cookie,
	.ag-slider, .ag-hero__fluegel, .ag-hero__glas,
	.ag-rauch, .ag-laufband, .ag-karte__sprung { display: none !important; }

	.agave { background: #fff; color: #000; font-size: 11pt; }
	.ag-hero { height: auto; }
	.ag-hero__buehne { position: static; height: auto; }
	.ag-reveal { opacity: 1; transform: none; }

	.ag-karte__bereich { break-inside: avoid; }
	.ag-gericht { break-inside: avoid; }

	a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}

/* Endlosband der Cocktails. Genau die halbe Spurbreite, weil die Reihe
   doppelt im Markup steht - dadurch ist der Rücksprung unsichtbar. */
@keyframes ag-cocktailband {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Leichtes Schweben der Gläser. */
@keyframes ag-glasschweben {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(0, -12px, 0); }
}

/* Der Schatten wird kleiner und heller, wenn das Glas steigt. */
@keyframes ag-glasschatten {
	from { transform: translate(-50%, 0) scaleX(1); opacity: 1; }
	to   { transform: translate(-50%, 0) scaleX(.82); opacity: .6; }
}

/* Endlosband nach rechts - Gegenrichtung zum Cocktailband. Die Spur
   startet um die halbe Breite nach links versetzt und laeuft auf null. */
@keyframes ag-bandrechts {
	from { transform: translate3d(-50%, 0, 0); }
	to   { transform: translate3d(0, 0, 0); }
}