/* ============================================================
   Selected Works als Fluss (Variante, Leon 15.09.2026)
   Nur fuer index-flow.html, haengt an .selected--flow, .llist--flow
   und (Ladebalken, mittige Ueberschrift) an .latest. style.css und
   die geteilten Skripte bleiben unangetastet, damit Leon beide
   Fassungen gegeneinander halten kann.

   Drei Zeilenformen, Reihenfolge steht als data-flow im HTML:
     wide  Film ueber die volle Breite, Titel links, Angaben rechts
     l     Film links, Angaben rechts
     r     Film rechts, Angaben links
   Kein Raster: wide, l, r, wide, r, l, wide, l, r.

   Auftritt, zweite Fassung (Leon 15.09. zur ersten: "sieht aus wie
   Windows Movie Maker 2008", "dieses Reinschieben ist unnoetig"):
   keine Platte, kein Anheben von unten, keine Uhr. Jeder Film
   beginnt als das Markenviereck, ein kleines Quadrat mitten in
   seiner Flaeche, und oeffnet sich AM SCROLLWEG zur vollen Flaeche.
   Dabei zieht die Kamera zurueck (Bild von 1.18 auf 1). Der Stand
   haengt an --p (0 zu, 1 offen), flow.js schreibt ihn je Bild aus
   der Lage der Flaeche im Fenster. Rueckwaerts scrollen schliesst
   wieder, was noch unter der Mitte steht. Titel schreibt sich mit
   dem Schreibkopf der Hero, sobald die Flaeche halb offen ist.

   Poster und Video liegen zusammen in .lrow-zoom und bekommen
   dieselbe Transformation, die Maske (.lrow-clip) liegt darueber:
   nichts kann gegeneinander verrutschen. Keine Platte und kein
   Schatten unter dem Bild (Leon 15.09.), nur das Bild selbst.

   Mitte hell, Rest grau (Leon 15.09.: "eigentlich muesste ja das, was
   in der Mitte ist, weiss werden und die anderen ausgegraut"): die
   Zeile, deren Film der Bildmitte am naechsten ist, traegt .is-mid.
   Am Rechner uebernimmt die Zeile unter dem Zeiger. style.css dimmt
   beim Hover den eigenen Titel (0.7), das ist hier ausdruecklich
   aufgehoben.
   ============================================================ */

/* ---- Ueberschriften mittig (Leon 15.09.: "latest projects auch in
   die mitte und nicht linksbuendig", Selected Works einzeilig) ---- */
.selected--flow .latest-logo { text-align: center; }
.selected--flow .ll-word { display: block; white-space: nowrap; }

/* ---- Zeilenformen ---- */
.llist--flow .lrow { position: relative; }

.llist--flow .lrow--r {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.62fr);
}
.llist--flow .lrow--r .lrow-media { order: 2; }
.llist--flow .lrow--r .lrow-cap   { order: 1; }

.llist--flow .lrow--wide {
  display: block;
  width: 100%;
}
.llist--flow .lrow--wide .lrow-cap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 40px);
  align-items: start;
  margin-top: clamp(16px, 1.8vw, 26px);
}
.llist--flow .lrow--wide .lrow-side { padding-top: 0.35em; }

@media (max-width: 860px) {
  /* Untereinander gilt eine Reihenfolge: erst der Film, dann die
     Worte. Die gespiegelten Spalten muessen hier ausdruecklich zurueck
     auf eine, sonst schlaegt die Regel oben die Handy-Regel aus
     style.css (gleiche Spezifitaet, spaeter im Kaskadenlauf). */
  .llist--flow .lrow--r { grid-template-columns: 1fr; }
  .llist--flow .lrow--r .lrow-media { order: 0; }
  .llist--flow .lrow--r .lrow-cap   { order: 0; }
}
@media (max-width: 760px) {
  .llist--flow .lrow--wide .lrow-cap { grid-template-columns: 1fr; gap: 12px; }
  .llist--flow .lrow--wide .lrow-side { padding-top: 0; }
}

/* ---- Auftritt: das Viereck oeffnet sich ---- */
.llist--flow .lrow {
  --p: 1;          /* Oeffnung 0..1, flow.js */
  --sq: 120px;     /* Kantenlaenge des Vierecks am Anfang */
  --lit: 1;        /* 1 hell (Mitte), 0 gedimmt */
}
@media (max-width: 760px) {
  .llist--flow .lrow { --sq: 72px; }
}

/* Die Flaeche selbst traegt kein Bild mehr, flow.js zieht das
   Standbild in .lrow-zoom. */
.llist--flow .lrow-media.is-boxed {
  background-image: none !important;
  /* Auch keine Grundfarbe: im hellen Modus stand sonst ein schwarzes
     Rechteck in voller Groesse um das kleine Viereck (gemessen 15.09.).
     Schwarz traegt .lrow-clip, und das wird mitgeschnitten. */
  background-color: transparent;
}

.llist--flow .lrow-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
  /* Prozent oben/unten beziehen sich auf die Hoehe, links/rechts auf
     die Breite: bei --p 0 bleibt genau das Quadrat --sq in der Mitte. */
  clip-path: inset(
    calc((50% - var(--sq) / 2) * (1 - var(--p)))
    calc((50% - var(--sq) / 2) * (1 - var(--p)))
    calc((50% - var(--sq) / 2) * (1 - var(--p)))
    calc((50% - var(--sq) / 2) * (1 - var(--p)))
  );
  will-change: clip-path;
}
.llist--flow .lrow-zoom {
  position: absolute;
  inset: 0;
  background: #000 center / cover no-repeat;
  /* Kamera faehrt zurueck: 1.18 zu, 1 offen. */
  transform: scale(calc(1 + 0.18 * (1 - var(--p))));
  transform-origin: 50% 50%;
  will-change: transform;
}
.llist--flow .lrow-zoom video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

.llist--flow .lrow-media.is-boxed { box-shadow: none; }

/* Worte kommen mit der Oeffnung, ohne eigene Uhr: --t ist der Anteil
   ab halber Oeffnung, flow.js rechnet ihn aus --p. Keine transition,
   der Wert kommt je Bild. */
.llist--flow .lrow.is-boxed .lrow-title,
.llist--flow .lrow.is-boxed .fstat-val,
.llist--flow .lrow.is-boxed .lrow-blurb {
  opacity: var(--t, 1);
}

/* ---- Mitte hell, Rest grau ---- */
/* Die gedimmte Zeile: Worte auf 0.35, ueber dem Film ein Schleier in
   Seitenfarbe. Beides als eigene Ebene mit Kurve, getrennt von den
   Werten, die flow.js je Bild setzt. */
.llist--flow .lrow-cap {
  opacity: calc(0.35 + 0.65 * var(--lit));
  transition: opacity 600ms var(--ease);
}
.llist--flow .lrow-media.is-boxed::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: var(--bg);
  opacity: calc(0.55 * (1 - var(--lit)));
  transition: opacity 600ms var(--ease);
  pointer-events: none;
}
.llist--flow .lrow.is-mid { --lit: 1; }
.llist--flow .lrow.is-dim { --lit: 0; }
/* Am Rechner gilt der Zeiger: die Zeile darunter ist hell, alle
   anderen grau, auch die mittige. Der Titel wird NICHT gedimmt
   (style.css: .lrow:hover .lrow-title 0.7). */
@media (hover: hover) and (pointer: fine) {
  .llist--flow:hover .lrow { --lit: 0; }
  .llist--flow:hover .lrow:hover { --lit: 1; }
  .llist--flow .lrow:hover .lrow-title { opacity: var(--t, 1); }
}

/* ---- Ladebalken unter dem laufenden Reiter (Latest Projects) ----
   Leon 15.09.: "ueber dem Projekt ... einen kleinen Strich machen, der
   das unterstreicht, der wie so ein Ladebalken fungiert, dass man
   sieht, okay, das laedt gerade durch, jetzt kommt das naechste".
   Ein Haarstrich unter dem Namen, fuellt sich von links ueber die
   Standzeit (--dwell aus flow.js, 7000 ms wie DWELL in feature.js).
   Beim Wechsel steht er sofort unter dem naechsten. */
.ftab { position: relative; }
.ftab::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
}
.ftab.is-on.is-fill::after {
  opacity: 1;
  animation: flowFill var(--dwell, 7000ms) linear forwards;
}
.ftab.is-on.is-fill.is-hold::after { animation-play-state: paused; }
@keyframes flowFill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .llist--flow .lrow { --p: 1 !important; }
  .llist--flow .lrow-clip { clip-path: none; }
  .llist--flow .lrow-zoom { transform: none; }
  .llist--flow .lrow-cap,
  .llist--flow .lrow-media.is-boxed::after { transition: none; }
  .ftab.is-on.is-fill::after { animation-duration: 0.01ms; transform: scaleX(1); }
}