/* assets/css/stream.css — vertikaler Stream rechts, Branding links bleibt erhalten */

/* zentrale Variablen:
   - --portrait-vh: Basis ist die sichtbare Höhe
   - --stream-w: daraus abgeleitete Stream-Breite
   WICHTIG: Der Header kann diese Variable ebenfalls benutzen!
*/
:root {
  --portrait-vh: 100svh;
  /* Breite: aus Höhe abgeleitet, aber gedeckelt auf 920px und nie breiter als der Viewport */
  --stream-w: min(calc(var(--portrait-vh) * 0.6666667), 920px, 100svw);
  --ph-bg: #f4f4f4;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ph-bg: #1a1a1a;
  }
}

/* Wrapper für den Stream-Bereich.
   Kein width:100%, damit der Rest des Layouts (Header/Branding) unverändert bleibt. */
.stream {
  margin: 0;
  padding: 0;
}

/* eigentlicher Stream rechts:
   - Breite aus der Variable (damit der Header dieselbe kennt)
   - nach rechts geschoben
   - einspaltig, keine Lücken
*/
.stream__rail {
  width: var(--stream-w);
  max-width: 100svw;
  margin-left: auto;
  margin-right: 0;
  padding: 0;

  /* einspaltig */
  column-count: 1;
  column-gap: 0;
}

/* Sentinel für Infinite Scroll */
#stream-sentinel {
  width: 1px;
  height: 1px;
}

/* jedes Bild-Item ohne zusätzliche Außenabstände */
.stream__item,
figure.stream__item {
  break-inside: avoid;
  margin: 0;
  padding: 0;
}

/* Picture als Block, mit Platzhalter-Hintergrund bis Bild geladen ist */
.stream__picture,
.stream__rail picture {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: var(--ph-bg);
}

/* Bild füllt die Stream-Breite aus */
.stream__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: opacity .25s ease;
}

/* nach dem Laden: sichtbar, Platzhalter weg */
.stream__img.is-ready {
  opacity: 1;
}
.stream__rail picture.is-ready {
  background: transparent;
}

/* Drawer/Index-Skeleton wie gehabt */
.indexpanel .indexday {
  margin: 0;
  padding: 0;
}
.indexpanel .indexthumb {
  display: inline-block;
  vertical-align: top;
  margin: 0;
  background: #eee;
}
.indexpanel .indexthumb.skel {
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  0%   { opacity: .55; }
  50%  { opacity: .85; }
  100% { opacity: .55; }
}

/* ============================================================
   NEU: initiales Einscrollen des Streams (layoutneutral)
   ============================================================ */
@keyframes stream-rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Startzustand vor dem ersten Rendern */
.stream__rail.is-fadeprep {
  opacity: 0;
  transform: translateY(18px);
}

/* Wenn Inhalte da sind → sanft einfahren */
.stream__rail.is-loaded {
  animation: stream-rise-in .48s ease-out both;
  /* leichte Verzögerung, damit Bilder sichtbar sind */
  animation-delay: .12s;
}