/* ============================================================ HERO UND ÜBERGANG Eine gemeinsame Bühne von 240 svh, darin ein gepinnter Rahmen von einer Viewporthöhe. Das Bild steht dadurch von der ersten bis zur letzten Sekunde still — es gibt keine Naht, an der eine Sektion endet und die nächste dasselbe Bild noch einmal anfängt. 1. HERO (die ersten 28 %): im Waldvideo bricht die Kamera durch die Wipfel und gibt eine geschwungene Straße mit einem Lastwagen frei; danach laufen die letzten sieben Sekunden in einer Schleife, der Lastwagen fährt immer weiter (js/hero.js). Darüber die vier Anker der Faustina-Vorlage: Metazeile, Name in zwei Ecken, Aussage, Satz — und ein Knopf, der das Video anhält. 2. ÜBERGANG (Rest): die Hero-Texte blenden weg, und aus der Mitte zieht ein clip-path die Fläche der nächsten Sektion auf — erst ein schmaler Bogen, dann Vollbild. Der Wald weicht zurück, die Seite tritt hervor. Im Bogen steht die Porträtkarte aus der About-Sektion (css/components.css). Alles am Übergang hängt an einem einzigen, gefederten Fortschrittswert, den js/hero.js berechnet. ============================================================ */ :root { --light: var(--c-lamp); /* Farbe des Straßenlichts (= #fdf6e6) */ --light-core: #fffdf6; /* Radius des Bogens oben. Bewusst groß: bei 28 % Seiteneinzug ist der Ausschnitt rund 600 px breit, erst ein Radius in dieser Größenordnung liest sich als Bogen und nicht als Kasten. */ --srh-radius: 200px; } /* ---------- Bühne --------------------------------------------------- 240 svh Scrollweg, darin ein gepinnter Rahmen von 100 svh. Bleiben 140 svh Weg: die ersten 39 gehören dem Hero — so lange steht er, während seine Texte weggehen —, die restlichen 101 dem Bogen. Den Schnitt setzt BRIDGE_FROM in js/hero.js. Vorher waren es 320 svh. Der Übergang war korrekt, aber zäh: 154 svh nur für das Aufziehen des Bogens sind zwei volle Bildschirme Wischen. */ .stage { position: relative; width: 100%; height: 240svh; /* Auf ganze Pixel gerundet: 240 svh sind auf einem 844er Gerät 2025,6 px, die Unterkante des gepinnten Rahmens läge also auf einem Bruchteil. Bogen und Standbild runden dort unterschiedlich, und es blieb eine Zeile Wald zwischen Bogen und nächster Sektion stehen. Ältere Browser ohne round() behalten die Zeile davor. */ height: round(240svh, 1px); background: #000; } /* Die Kante der Bühne — .stage__content und der Scrollhinweis richten sich beide danach. */ .stage__pin { --hero-x: var(--gutter); position: sticky; top: 0; left: 0; width: 100%; height: 100svh; overflow: hidden; background: #000; } /* ---------- Hero: Bild, Schleier, Text ------------------------------- */ .stage__hero { position: absolute; inset: 0; z-index: 1; } .stage__scene { position: absolute; inset: 0; } /* ---------- Vorschau gegen den schwarzen Anfang ---------------------- Bis das erste Videobild da ist, ist die Bühne schwarz. Gemessen auf 1,6 Mbit/s mit 150 ms Latenz, 390 px breit: erster Paint nach 992 ms, das Poster erst nach 1352 ms — über eine Sekunde nichts. Dagegen steht hier das erste Videobild zweimal, übereinander: Unten als Miniatur im Stylesheet, 64 × 36 bzw. 40 × 71 Pixel, zusammen unter 800 Byte. Sie kostet keine eigene Anfrage und ist damit genau dann da, wenn überhaupt zum ersten Mal gezeichnet wird. Ein Preloader mit Spinner wäre das Gegenteil: noch ein Skript, noch eine Anfrage, und am Ende sieht man ein Rädchen statt des Bildes. Darüber als Poster in voller Schärfe. Es stand früher als poster-Attribut am