/* Scroll-Scrub-Story 2026-09-13: die Scrollposition steuert eine Bildfolge aus den App-Aufnahmen.
   Links die Schritte (sichtbare Liste = der Ablauf), rechts die klebende Bühne mit dem App-Fenster;
   unter 900 px klebt die Bühne als Glasband oben und die Schritte laufen darunter durch. Ohne
   JavaScript zeigt die Bühne den Clip selbst (<video> mit Poster und Steuerung). */
.scrub { display: grid; grid-template-columns: minmax(15rem, .8fr) minmax(0, 1.6fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
/* Eine Story haelt Abstand zu dem, was vor ihr steht — ausser zu ihrer eigenen Sektionsueberschrift.
   Ohne das beruehrte das App-Fenster den Block davor (Luce: Maskenauswahl, Selra: die zweite Story). */
.scrub { margin-top: clamp(3rem, 7vw, 6rem); }
.section-head + .scrub, .photo-section-head + .scrub { margin-top: 0; }
.scrub-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-column: 1; }
.scrub-step { min-height: 72vh; min-height: 72svh; display: flex; flex-direction: column; justify-content: center; gap: .6rem; opacity: .32; transition: opacity .25s ease; }
.scrub-step.is-on { opacity: 1; }
.scrub-step .n { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.scrub-step h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.035em; line-height: 1.04; font-size: clamp(1.6rem, 2.6vw, 2.35rem); margin: 0; max-width: 16ch; }
.scrub-step p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.6; max-width: 36ch; }
.scrub-step .kbd-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .2rem; color: var(--dim); font-size: .88rem; }
.scrub-step .kbd-row kbd { font-size: .88rem; }

/* Die Schritte links sind in 72svh hohe Bloecke zentriert; die Buehne rechts stand auf einem festen
   Abstand unter der Kopfzeile. Bei 900 px Fensterhoehe traf sich das ungefaehr, bei 1240 px stand die
   Buehne 300 px ueber dem Schritt und darunter blieben 659 px leer. Die Buehne bekommt deshalb die
   Hoehe des Fensters unter der Kopfzeile und zentriert ihren Inhalt darin — damit wandert sie mit der
   Fensterhoehe genauso wie die Schritte und beruehrt die Kopfzeile nie.

   Nur in der zweispaltigen Ansicht: unter 901 px ist die Buehne ein schmales Glasband ueber den
   Schritten, mit eigenem `top`, und `scrollscrub.js` liest dort `stage.getBoundingClientRect().bottom`,
   um den aktiven Schritt zu bestimmen. Eine fast fensterhohe Buehne wuerde diese Rechnung brechen. */
.scrub-stage { grid-column: 2; position: sticky; top: calc(96px + 1rem); align-self: start; display: grid; gap: .7rem; }
@media (min-width: 901px) {
  .scrub-stage { height: calc(100svh - 96px - 2rem); align-content: safe center; }
}
.scrub-window { --window-bar: clamp(1.1rem, 2.4vw, 1.75rem); position: relative; padding-top: var(--window-bar); border-radius: .95rem; overflow: hidden;
  background: #171917; box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08); }
.scrub-window::before { content: ""; position: absolute; inset: 0 0 auto; height: var(--window-bar); background: #171917; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.scrub-window::after { content: ""; position: absolute; top: calc(var(--window-bar) / 2); left: calc(var(--window-bar) * .5); width: calc(var(--window-bar) * .3); height: calc(var(--window-bar) * .3);
  border-radius: 50%; transform: translateY(-50%); background: #ff5f57; box-shadow: calc(var(--window-bar) * .55) 0 0 #febc2e, calc(var(--window-bar) * 1.1) 0 0 #28c840; }
.scrub-frame { position: relative; aspect-ratio: var(--scrub-aspect, 1440 / 754); background: #131311; overflow: hidden; }
.scrub-frame canvas, .scrub-frame .scrub-fallback { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scrub-frame .scrub-fallback { object-fit: cover; background: #000; }
.scrub-frame canvas { visibility: hidden; }
.scrub-frame.is-drawn canvas { visibility: visible; }
.scrub-frame.is-drawn .scrub-fallback { visibility: hidden; }
.scrub-key { position: absolute; left: .9rem; bottom: .9rem; min-width: 2.4em; padding: .35em .6em; font-size: 1.05rem; line-height: 1;
  border: 1px solid rgba(255, 255, 255, .3); border-bottom-width: 3px; border-radius: 9px; background: rgba(16, 17, 15, .82); color: var(--text);
  font-family: var(--mono); text-align: center; opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.scrub-key.is-shown { opacity: 1; transform: none; }
.scrub-key.hit { animation: scrub-hit .32s ease; }
@keyframes scrub-hit { 0% { transform: translateY(2px) scale(.96); background: var(--accent); color: #0d0e0d; } 100% { transform: none; } }
.scrub-rail { display: flex; gap: .35rem; }
.scrub-rail i { flex: 1; height: 3px; border-radius: 2px; background: var(--line); position: relative; overflow: hidden; }
.scrub-rail i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(var(--f, 0)); transform-origin: left; }
.scrub-note { margin: 0; font-size: .82rem; color: var(--dim); }

/* Gestapelt: Bühne klebt als Glasband oben, Bildausschnitt 3:2, Schritte laufen darunter durch */
@media (max-width: 900px) {
  .scrub { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .scrub-stage { grid-column: 1; grid-row: 1; top: calc(68px + .4rem); z-index: 2; gap: .5rem;
    margin-inline: calc(-1 * var(--gutter, 1.1rem)); padding: .5rem var(--gutter, 1.1rem) .6rem;
    background: rgba(16, 17, 15, .84); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); }
  .scrub-note { display: none; }
  .scrub-steps { grid-column: 1; grid-row: 2; padding-top: .5rem; }
  .scrub-frame { aspect-ratio: 3 / 2; }
  .scrub-step { min-height: 46vh; min-height: 46svh; justify-content: flex-start; padding-top: 1.2rem; }
  .scrub-step h3 { font-size: clamp(1.45rem, 6vw, 1.9rem); }
  .scrub-step p { font-size: .95rem; }
  .scrub-key { font-size: .95rem; left: .7rem; bottom: .7rem; }
}
@media (max-width: 900px) and (max-height: 640px) { .scrub-frame { aspect-ratio: 16 / 9; } }

/* Bewegung reduziert: jeder Schritt zeigt sofort sein Endbild (scrollscrub.js), keine Übergänge */
html.motion-off .scrub-step, .motion-off .scrub-key, .motion-off .scrub-frame .scrub-fallback { transition: none; }
@media (prefers-reduced-motion: reduce) { .scrub-step, .scrub-key { transition: none; } .scrub-key.hit { animation: none; } }