/* ============================================================
   R&G Classics — Motion Graphics (Startseite), seit 03.10.2026

   Jede Regel hier beginnt mit .bewegung. Die Klasse setzt
   bewegung.js — fehlt sie, ist diese Datei wirkungslos und die Seite
   steht in der ruhigen Fassung da. Ausschalten: siehe Kopf von
   bewegung.js.

   Bewegt wird nur transform, opacity und clip-path. Alles andere
   (Breite, Höhe, Abstände) würde bei jedem Bild das Layout neu
   rechnen lassen und ruckeln.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

.bewegung { --b-ease: cubic-bezier(0.19, 1, 0.22, 1); --b-ease-weich: cubic-bezier(0.22, 0.8, 0.24, 1); }

/* ---------------- Hero ---------------- */

/* Die Überschrift übernimmt ihr Einfahren selbst; das allgemeine
   Einblenden aus styles.css bleibt für sie aus. Bis bewegung.js sie in
   Zeilen zerlegt hat, bleibt sie unsichtbar, sonst stünde sie kurz
   fertig da und führe dann noch einmal ein. */
.bewegung .hero h1.reveal { opacity: 1; transform: none; transition: none; }
.bewegung .hero h1:not(.ist-geteilt) { visibility: hidden; }

.bewegung .hero h1 .zeile {
  display: block; overflow: hidden;
  /* Platz für Unterlängen (g, p), die sonst an der Kante abreißen */
  padding: 0.04em 0.1em 0.12em; margin: -0.04em -0.1em -0.12em;
}
.bewegung .hero h1 .zeile__innen {
  display: block;
  transform: translateY(108%);
  animation: b-zeile 1400ms var(--b-ease) forwards;
  animation-delay: calc(350ms + var(--i, 0) * 160ms);
}
@keyframes b-zeile { to { transform: none; } }

.bewegung .hero__sub.reveal { transition-duration: 1200ms; transition-delay: 900ms; }

/* Video: blendet aus der Grundfläche auf und setzt sich von leicht
   vergrößert auf seine Größe. */
.bewegung .hero__media { animation: b-hero-ein 2800ms var(--b-ease) both; }
@keyframes b-hero-ein {
  from { opacity: 0; transform: scale(1.14); }
  to   { opacity: 1; transform: none; }
}

/* Beim Wegscrollen: Video bleibt zurück und zoomt minimal, die Schrift
   zieht schneller weg und blendet aus. --hero-p läuft 0 → 1. */
.bewegung .hero__video {
  transform: translateY(calc(var(--hero-p, 0) * 22%)) scale(calc(1 + var(--hero-p, 0) * 0.08));
  will-change: transform;
}
.bewegung .hero__inner {
  transform: translateY(calc(var(--hero-p, 0) * -120px));
  opacity: calc(1 - var(--hero-p, 0) * 1.8);
}

/* Lauflinie unten in der Mitte: ein Kupferstrich, der nach unten
   durchläuft. Zeigt, dass es weitergeht, ohne es hinzuschreiben. */
.bewegung .hero::after {
  content: ""; position: absolute; z-index: 3;
  left: 50%; bottom: 0; width: 1px; height: clamp(18px, 3.2vh, 34px);
  background: linear-gradient(to bottom, transparent, var(--color-accent-400));
  transform-origin: top;
  opacity: calc(0.9 - var(--hero-p, 0) * 4);
  animation: b-lauflinie 2600ms var(--b-ease-weich) 2400ms infinite both;
}
@keyframes b-lauflinie {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------------- Newsletter ----------------
   Die Themen kommen nacheinander, wenn der Kasten erscheint. */
.bewegung .nl .nl__themen li {
  opacity: 0; transform: translateY(10px);
  transition: opacity 700ms var(--b-ease-weich), transform 900ms var(--b-ease);
  transition-delay: calc(450ms + var(--n, 0) * 110ms);
}
.bewegung .nl .nl__themen li:nth-child(2) { --n: 1; }
.bewegung .nl .nl__themen li:nth-child(3) { --n: 2; }
.bewegung .nl .nl__themen li:nth-child(4) { --n: 3; }
.bewegung .nl .nl__themen li:nth-child(5) { --n: 4; }
.bewegung .nl.is-in .nl__themen li { opacity: 1; transform: none; }

/* ---------------- Auswahl ---------------- */

/* Kupferlinie unter der Überschrift, die von links aufzieht. */
.bewegung .auswahl-kopf { position: relative; padding-bottom: var(--space-4); }
.bewegung .auswahl-kopf::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--color-accent-500), rgba(195,124,55,0.25) 45%, transparent 85%);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1800ms var(--b-ease) 250ms;
}
.bewegung .auswahl-kopf.is-in::after { transform: none; }

/* Die Fotos werden von unten freigelegt, das Bild darin setzt sich
   dabei aus leichter Vergrößerung. Nach dem Auftritt fällt die Maske
   ganz weg (fill backwards) — sonst schnitte sie den Schatten ab, den
   das Foto beim Darüberfahren bekommt. */
/* Am Desktop trägt die ganze Kachel den Rahmen — dort wird sie als
   Ganzes freigelegt, sonst stünde kurz ein leerer Rahmen da. */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .bewegung .auswahl:not(.ist-da) .auswahl__kachel { clip-path: inset(100% 0 0 0 round var(--radius-lg)); }
  .bewegung .auswahl.ist-da .auswahl__kachel {
    animation: b-freilegen-kachel 1500ms var(--b-ease) backwards;
    animation-delay: calc(var(--n, 0) * 180ms);
  }
}
@media not all and (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .bewegung .auswahl:not(.ist-da) .auswahl__bild { clip-path: inset(100% 0 0 0 round var(--radius-md)); }
  .bewegung .auswahl.ist-da .auswahl__bild {
    animation: b-freilegen 1500ms var(--b-ease) backwards;
    animation-delay: calc(var(--n, 0) * 180ms);
  }
}
@keyframes b-freilegen-kachel {
  from { clip-path: inset(100% 0 0 0 round var(--radius-lg)); }
  to   { clip-path: inset(0 0 0 0 round var(--radius-lg)); }
}
.bewegung .auswahl.ist-da .auswahl__rahmen {
  animation: b-setzen 2000ms var(--b-ease) backwards;
  animation-delay: calc(var(--n, 0) * 180ms);
}
.bewegung .auswahl__kachel:nth-child(2) { --n: 1; }
.bewegung .auswahl__kachel:nth-child(3) { --n: 2; }
.bewegung .auswahl__kachel:nth-child(4) { --n: 3; }

@keyframes b-freilegen {
  from { clip-path: inset(100% 0 0 0 round var(--radius-md)); }
  to   { clip-path: inset(0 0 0 0 round var(--radius-md)); }
}
@keyframes b-setzen {
  from { transform: scale(1.22); }
  to   { transform: none; }
}

/* Ohne Maus steht der Text unter dem Foto — dort kommt er nach dem
   Foto. Mit Maus regelt das Darüberfahren den Text, da mischt sich
   hier nichts ein. */
@media not all and (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .bewegung .auswahl:not(.ist-da) .auswahl__text { opacity: 0; }
  .bewegung .auswahl.ist-da .auswahl__text {
    animation: b-hoch 1100ms var(--b-ease) backwards;
    animation-delay: calc(500ms + var(--n, 0) * 180ms);
  }
}
@keyframes b-hoch {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------- Film als Fenster ----------------
   Siehe bewegung.js. Das Video steht fest in der Bildmitte, in der
   Größe des Rahmens; der Rahmen schneidet es aus. Ein transform auf
   einem Vorfahren würde das fixed aushebeln — deshalb fährt der Rahmen
   hier nicht hoch wie die anderen, sondern blendet nur ein. */
.bewegung .film.reveal { transform: none; transition: opacity 1200ms var(--b-ease-weich); }
/* Seitenfarbe statt Petrol: Der Teil des Rahmens, unter dem gerade kein
   Video steht, soll wie Fensterkante wirken, nicht wie ein Kasten. */
.bewegung .film--fenster { clip-path: inset(0 round var(--radius-md)); background: var(--surface-page); }
.bewegung .film--fenster .film__video {
  position: fixed; left: 50%; top: 50%;
  width: var(--film-b, 100%); height: var(--film-h, 100%);
  transform: translate(-50%, -50%);
}

.bewegung .film-halter { position: relative; }
/* Die Marken treiben beim Wegscrollen nach außen. Auf dem Telefon
   ragten sie dabei über den Rand und machten die Seite breiter.
   clip statt hidden: kein eigener Scrollbereich, und das fixe Video
   bleibt unberührt. */
.bewegung .film-section { overflow-x: clip; }

/* Messmarken. Bei mittigem Rahmen sitzen sie knapp außerhalb der Ecken,
   weiter weg treiben sie nach außen und verblassen. --pa: 0 mittig,
   1 ganz außerhalb. */
.bewegung .film-marke {
  --weg: calc(-12px - var(--pa, 1) * 56px);
  position: absolute; width: 26px; height: 26px;
  border: 0 solid var(--color-accent-400);
  opacity: calc(1 - var(--pa, 1) * 1.7);
  pointer-events: none;
}
.bewegung .film-marke--ol { top: var(--weg); left: var(--weg);   border-top-width: 1px;    border-left-width: 1px; }
.bewegung .film-marke--or { top: var(--weg); right: var(--weg);  border-top-width: 1px;    border-right-width: 1px; }
.bewegung .film-marke--ul { bottom: var(--weg); left: var(--weg);  border-bottom-width: 1px; border-left-width: 1px; }
.bewegung .film-marke--ur { bottom: var(--weg); right: var(--weg); border-bottom-width: 1px; border-right-width: 1px; }

/* ---------------- Stimmungsbilder ---------------- */
.bewegung .mood__bild img {
  transform: translateY(calc(var(--par, 0) * 6%)) scale(1.14);
  will-change: transform;
}
.bewegung .mood:not(.ist-da) .mood__bild { clip-path: inset(0 0 100% 0 round var(--radius-md)); }
.bewegung .mood.ist-da .mood__bild {
  animation: b-freilegen-oben 1600ms var(--b-ease) backwards;
  animation-delay: calc(var(--n, 0) * 160ms);
}
.bewegung .mood__bild:nth-child(2) { --n: 1; }
.bewegung .mood__bild:nth-child(3) { --n: 2; }
@keyframes b-freilegen-oben {
  from { clip-path: inset(0 0 100% 0 round var(--radius-md)); }
  to   { clip-path: inset(0 0 0 0 round var(--radius-md)); }
}

}