/* ============================================================================ COFFEE FESTIVAL EUROPE — Bewegung nach Thema ---------------------------------------------------------------------------- theme.css unterscheidet die Seitengruppen im Stand: Farbe, Signatur, Satzton. Diese Datei unterscheidet sie in der Bewegung — und das ist der Teil, den man zuerst bemerkt, weil er passiert, waehrend man liest. Der entscheidende Punkt: es kommt KEIN zweiter Beobachter dazu. Die Seite hat bereits einen, der [data-reveal] die Klasse `is-in` gibt, sobald ein Abschnitt ins Bild kommt. Bisher fuehrte der ueberall zu demselben Weg — 22 Pixel hoch, dieselbe Kurve, dieselbe Staffelung. Genau daher kam der Eindruck, jede Seite bewege sich gleich. Hier wird nur der Anfangszustand und das Tempo ausgetauscht. Der Endzustand (`transform:none;opacity:1`) bleibt derselbe, und er kommt aus page.css. Das ist wichtig: sollte diese Datei einmal nicht geladen werden, faellt die Seite auf die alte Bewegung zurueck — und nicht auf leere Flaechen. Bewegt wird ausschliesslich mit transform und opacity. background-position, clip-path und filter zwingen den Hauptfaden zu neuer Rasterung; das ist auf schwachen Geraeten der Unterschied zwischen fliessen und ruckeln. ========================================================================= */ @media (prefers-reduced-motion:no-preference){ /* ---- 1 · Der Weg herein, je Thema -------------------------------------- Herkunft hebt sich und richtet sich auf · Stadt faehrt aus der Flanke ein · Nachhaltigkeit waechst aus dem Boden · Zugang wischt klar auf · Buehne springt an · Aussteller setzt fest auf · Presse laeuft zeilenweise · Besuch schwebt und kommt weich zur Ruhe · Rechtliches blendet nur. */ body[data-pt="roast"] [data-reveal] > *{transform:translate3d(0,32px,0) rotate(-.6deg) scale(.988)} body[data-pt="civic"] [data-reveal] > *{transform:translate3d(-36px,0,0)} body[data-pt="grove"] [data-reveal] > *{transform:translate3d(0,28px,0) scale(.94)} body[data-pt="clear"] [data-reveal] > *{transform:translate3d(0,14px,0)} body[data-pt="stage"] [data-reveal] > *{transform:translate3d(0,26px,0) scale(.93)} body[data-pt="trade"] [data-reveal] > *{transform:translate3d(-22px,9px,0)} body[data-pt="press"] [data-reveal] > *{transform:translate3d(0,16px,0) scaleY(.86)} body[data-pt="visit"] [data-reveal] > *{transform:translate3d(0,42px,0)} body[data-pt="legal"] [data-reveal] > *{transform:none} /* Tempo und Kurve. --rv-schritt ist die Staffelung zwischen Geschwistern. */ body[data-pt="roast"]{--rv-dauer:1.05s;--rv-kurve:var(--e-out-expo);--rv-schritt:.07s} body[data-pt="civic"]{--rv-dauer:.9s; --rv-kurve:var(--e-out-expo);--rv-schritt:.06s} body[data-pt="grove"]{--rv-dauer:1.15s;--rv-kurve:var(--e-out-expo);--rv-schritt:.085s} body[data-pt="clear"]{--rv-dauer:.62s;--rv-kurve:var(--e-out-cubic);--rv-schritt:.045s} body[data-pt="stage"]{--rv-dauer:.85s;--rv-kurve:cubic-bezier(.34,1.48,.64,1);--rv-schritt:.065s} body[data-pt="trade"]{--rv-dauer:.58s;--rv-kurve:var(--e-out-expo);--rv-schritt:.042s} body[data-pt="press"]{--rv-dauer:.6s; --rv-kurve:var(--e-out-cubic);--rv-schritt:.036s} body[data-pt="visit"]{--rv-dauer:1s; --rv-kurve:cubic-bezier(.22,1.2,.36,1);--rv-schritt:.075s} body[data-pt="legal"]{--rv-dauer:.42s;--rv-kurve:var(--e-out-cubic);--rv-schritt:.025s} /* ACHTUNG — hier lag ein Fehler, der jede Themenseite betraf: Der Ruhezustand steht in page.css als `[data-reveal].is-in > *` und wiegt (0,2,0). Der Eingangszustand hier oben wiegt mit `body[data-pt="…"]` eine Stufe mehr, (0,2,1). Damit gewann der Eingang, und die Verschiebung blieb stehen: Karten auf den Pressethemen etwa hingen dauerhaft 14 Pixel tief und 10 Prozent gestaucht (gemessen: matrix(1,0,0,0.9,0,14) auf .asset, auch Minuten nach dem Eintreten). Die Deckkraft kam an, die Bewegung nie. Deshalb steht der Ruhezustand jetzt auch hier — mit (0,3,1) schwerer als jeder Eingang, auf dem Rechner wie auf dem Telefon. */ body[data-pt] [data-reveal].is-in > *{opacity:1;transform:none} body[data-pt] [data-reveal].is-in > *{ transition:opacity calc(var(--rv-dauer,.8s) * .8) var(--e-out-cubic), transform var(--rv-dauer,1s) var(--rv-kurve,var(--e-out-expo))} body[data-pt] [data-reveal].is-in > *:nth-child(2){transition-delay:calc(var(--rv-schritt,.06s) * 1)} body[data-pt] [data-reveal].is-in > *:nth-child(3){transition-delay:calc(var(--rv-schritt,.06s) * 2)} body[data-pt] [data-reveal].is-in > *:nth-child(4){transition-delay:calc(var(--rv-schritt,.06s) * 3)} body[data-pt] [data-reveal].is-in > *:nth-child(5){transition-delay:calc(var(--rv-schritt,.06s) * 4)} body[data-pt] [data-reveal].is-in > *:nth-child(6){transition-delay:calc(var(--rv-schritt,.06s) * 5)} body[data-pt] [data-reveal].is-in > *:nth-child(7){transition-delay:calc(var(--rv-schritt,.06s) * 6)} body[data-pt] [data-reveal].is-in > *:nth-child(8){transition-delay:calc(var(--rv-schritt,.06s) * 7)} body[data-pt] [data-reveal].is-in > *:nth-child(n+9){transition-delay:calc(var(--rv-schritt,.06s) * 8)} /* ---- 2 · Das Themenfeld im Seitenkopf ----------------------------------- Ein sehr flaches Muster, das langsam zieht. Es hat pro Thema eine andere Geometrie und ist so schwach gehalten, dass es als Stimmung wirkt und nicht als Zierrat. Bewegt wird der Kasten, nicht das Muster — background-position waere der teure Weg zum selben Bild. */ body[data-pt] .phead{position:relative} /* Der Seitenkopf trug hier frueher ein Themenmuster auf `::after` — gebogene Linien, Diagonalen, ein Raster. Auf den Koepfen mit Film lag es VOR dem Bild (z-index 0 gegen -2) und war das einzige, was man von dem Clip noch sah, nachdem der Verlauf ihn abgedunkelt hatte. Gemessen ueber acht Koepfe: mittlere Helligkeit 22–31 von 255 — praktisch schwarz. Das Muster ist ersatzlos gestrichen; die Stimmung tragen jetzt der Film und der Verlauf. */ body[data-pt] .phead > *{position:relative;z-index:1} /* … aber nicht das Filmbild und der Schein. Die beiden liegen absichtlich HINTER allem (z-index -2 und -1) und sind absolut auf den ganzen Kopf gespannt. Von dieser Regel auf `relative` gestellt fallen sie in den Fluss zurueck und werden so hoch wie ihr Inhalt: aus der Flaeche hinter Logo und Menue wurde ein Streifen mitten im Kopf. Gemessen: auf dem Rechner 176–896 in einem Kopf von 0–1156, auf dem Telefon ein 219 Pixel hoher Balken. */ body[data-pt] .phead > .phead__film{position:absolute;z-index:-2} body[data-pt] .phead > .phead__glow{position:absolute;z-index:-1} /* ---- 3 · Die Kinobahn kommt je Thema anders auf ------------------------- Der Ausgangszustand haengt an `.tmc:not(.tm-in)` und damit an einer Klasse, die erst das Skript setzt. Bleibt das Skript aus, ist das Bild schlicht da. Ein Effekt darf nie der Grund sein, warum etwas fehlt. */ .cine__media{transform-origin:50% 55%} body[data-pt] .cine.tmc:not(.tm-in) .cine__media{opacity:0;transform:scale(1.08)} body[data-pt="civic"] .cine.tmc:not(.tm-in) .cine__media{transform:scale(1.05) translate3d(4%,0,0)} body[data-pt="stage"] .cine.tmc:not(.tm-in) .cine__media{transform:scale(1.14)} body[data-pt="trade"] .cine.tmc:not(.tm-in) .cine__media{transform:scale(1.03)} body[data-pt="press"] .cine.tmc:not(.tm-in) .cine__media{transform:none} body[data-pt="grove"] .cine.tmc:not(.tm-in) .cine__media{transform:scale(1.06) translate3d(0,3%,0)} body[data-pt] .cine.tmc .cine__media{ transition:opacity 1.1s var(--e-out-cubic),transform 1.7s var(--e-out-expo)} } /* Ende: prefers-reduced-motion: no-preference */ /* ---- Rueckzug ----------------------------------------------------------- */ .a11y-rm body[data-pt] [data-reveal] > *, .a11y-rm [data-reveal] > *{opacity:1!important;transform:none!important; transition:none!important} .a11y-rm .cine .cine__media{opacity:1!important;transform:none!important; transition:none!important}