/* ==========================================================================
   Scroll-Animationen (nur mit JavaScript und ohne „Bewegung reduzieren“).
   html.motion  = Animationen aktiv (von site.js gesetzt)
   html.motion-pin = zusätzlich gepinnte Szenen (Desktop, genug Höhe)
   Ohne diese Klassen ist alles statisch sichtbar.
   ========================================================================== */

/* ---------- Einblenden beim Scrollen ---------- */
.motion .rv {
  opacity: 0;
  transform: translate3d(0, 48px, 0);
  transition: opacity .9s cubic-bezier(.2, .7, .1, 1), transform 1s cubic-bezier(.2, .7, .1, 1);
  transition-delay: var(--d, 0ms);
}
.motion .rv.is-in { opacity: 1; transform: none; }

/* Überschriften: von unten aus einer Maske schieben */
.motion .rv--mask {
  opacity: 1;
  transform: translate3d(0, 38%, 0);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s cubic-bezier(.7, 0, .2, 1), transform 1s cubic-bezier(.7, 0, .2, 1);
  transition-delay: var(--d, 0ms);
}
.motion .rv--mask.is-in { transform: none; clip-path: inset(-10% -5% -10% -5%); }

/* Karten: leicht gekippt und skaliert */
.motion .rv--card { transform: translate3d(0, 64px, 0) scale(.96); }

/* Bilder in Fotobändern: Zoom-out + Parallaxe */
.motion .photo-band { overflow: hidden; }
.motion .photo-band img {
  transform: translate3d(0, calc(var(--py, 0) * 1px), 0) scale(1.18);
  will-change: transform;
}

/* ---------- Verein: gepinnte Wort-Enthüllung ---------- */
.verein__text span { transition: opacity .25s linear, color .25s linear; }
.motion-pin .verein { padding: 0; height: 230vh; }
.motion-pin .verein__inner {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(72px, 8vw, 120px);
}

/* ---------- Teams: vertikales Scrollen schiebt die Leiste ---------- */
.motion-pin .teams { padding: 0; }
.motion-pin .teams__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-block: 56px 24px;
}
.motion-pin .teams__rail {
  overflow: visible;
  scroll-snap-type: none;
  transform: translate3d(calc(var(--tx, 0) * -1px), 0, 0);
  will-change: transform;
}
.motion-pin .teams__fill { transition: none; }
.motion-pin .team-card {
  transform: translate3d(0, calc(var(--lift, 0) * 1px), 0) rotate(calc(var(--tilt, 0) * 1deg));
}

/* ---------- Marquee: zusätzlicher Versatz beim Scrollen ---------- */
.motion .marquee__track { translate: calc(var(--mq, 0) * 1px) 0; }

/* ---------- Mitglied: Zeilen gleiten gegenläufig ein ---------- */
.motion .mitglied { overflow: hidden; }
.motion .mitglied__l1,
.motion .mitglied__l2,
.motion .mitglied__l3 { display: block; will-change: transform; }
.motion .mitglied__l1 { transform: translate3d(calc((1 - var(--mp, 1)) * -22vw), 0, 0); }
.motion .mitglied__l2 { transform: translate3d(calc((1 - var(--mp, 1)) * 26vw), 0, 0); }
.motion .mitglied__l3 { transform: translate3d(calc((1 - var(--mp, 1)) * -14vw), 0, 0); }

/* ---------- Footer: großer Schriftzug fährt hoch ---------- */
.motion .footer-mega {
  transform: translate3d(0, calc((1 - var(--fp, 1)) * 30%), 0);
  opacity: calc(.25 + var(--fp, 1) * .75);
}

/* ---------- Scroll-Fortschritt oben ---------- */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: 3px;
  background: var(--gelb);
  transform-origin: 0 50%;
  transform: scaleX(var(--sp, 0));
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
}