/* ==========================================================================
   VLISTA — Bewegung
   Ausschliesslich transform und opacity, damit alles auf dem Kompositor bleibt.
   ========================================================================== */

}

@keyframes vl-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.75); }
}

/* Einblenden beim Eintreten in den Sichtbereich.
   main.js setzt data-reveal="in", sobald das Element sichtbar wird. */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 1.5rem, 0);
  transition:
    opacity var(--vl-dur-slow) var(--vl-ease),
    transform var(--vl-dur-slow) var(--vl-ease);
}

[data-reveal="in"] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Gestaffelt, wenn mehrere Geschwister gemeinsam erscheinen */
[data-reveal-delay="1"] { transition-delay: 90ms; }
[data-reveal-delay="2"] { transition-delay: 180ms; }
[data-reveal-delay="3"] { transition-delay: 270ms; }
[data-reveal-delay="4"] { transition-delay: 360ms; }

/* Zeilenweiser Aufzug der Headline: jede Zeile sitzt in einem Fenster,
   das den Text beim Erscheinen freigibt. */
/* Die Maske für den Zeilenaufzug. Der enge Zeilenabstand (0.92) schneidet
   sonst Unterlängen und Umlaute ab — deshalb bekommt die Maske Luft und
   holt sie über negative Ränder wieder heraus. Der Aufzug startet um
   dieselbe Strecke tiefer, damit im Freiraum nichts vorzeitig auftaucht. */
.vl-lift {
  display: block;
  overflow: hidden;
  padding-block: var(--vl-lift-top) var(--vl-lift-bottom);
  margin-block: calc(var(--vl-lift-top) * -1) calc(var(--vl-lift-bottom) * -1);
}

.vl-lift > span {
  display: block;
  transform: translate3d(0, calc(100% + var(--vl-lift-bottom)), 0);
  transition: transform var(--vl-dur-slow) var(--vl-ease);
}

[data-reveal="in"] .vl-lift > span,
.vl-lift[data-reveal="in"] > span {
  transform: translate3d(0, 0, 0);
}

.vl-lift:nth-child(2) > span { transition-delay: 80ms; }
.vl-lift:nth-child(3) > span { transition-delay: 160ms; }
.vl-lift:nth-child(4) > span { transition-delay: 240ms; }

/* --------------------------------------------------------------------------
   Rücksicht auf Bewegungsempfindlichkeit
   Der Feed hält an, Einblendungen entfallen, alles bleibt bedienbar.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .vl-feed__pulse {
    animation: none;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .vl-lift > span {
    transform: none;
  }
}