/* ══ WORTFLUG: Seitenübergang über das Menü (Variante A, Auftrag Anis 2026-10-31) ══
   Steuerung, Auswahl der Auslöser und Benennung der alten Seite: js/wortflug.js.
   Diese Datei lädt in header.php blockierend auf jeder Seite. Sie muss vor dem
   ersten Bild der neuen Seite feststehen: @view-transition gilt nur, wenn es beim
   Aufdecken der Seite bekannt ist, und die Bewegung läuft in der neuen Seite.

   Fassung 2 (Auftrag Anis 2026-10-31, nach Bildschirmvideo: „noch zu klein“): Das
   Wort ist der Auftritt. Es schwillt auf Überschriftgröße an, kippt leicht, taucht in
   die Eyebrow-Pille ein und federt nach. Die Überschrift wartet, bis das Wort eintaucht.

   Fassung 3 (Auftrag Anis 2026-10-31: „dezente und edle Druckwelle“ bei der Landung):
   Statt zweier aufgeblasener Ringe läuft beim Aufsetzen eine kreisrunde Druckwelle aus
   der Pille: ein kurzer Lichtkern, eine feine blaue Wellenfront mit weichem Nachlauf
   und ein leiseres pinkes Echo. Die Welle rast los und läuft sanft aus.

   Fassung 4 (Auftrag Anis 2026-10-31: „verfeinern, flüssiger, GPU und CPU optimieren“;
   Bildschirmvideo: durchgehend 60 fps, aber Haltepunkte in der Bewegung): Das Wort
   landet in einer einzigen gedämpften Federbewegung statt in vier Abschnitten, die
   jeweils zum Stillstand kamen. Die Überschrift und der Rest der Seite setzen früher
   ein, damit zwischen Anschwellen und Landung kein Bewegungsloch entsteht. Die
   Zeilenmasken laufen nicht mehr über clip-path (Neuzeichnen in jedem Bild auf dem
   Hauptthread), sondern über einen ruhenden Ausschnitt des Bildpaars: Animiert wird
   nur noch transform und opacity, alles läuft auf dem Compositor.

   Ablauf (gemessen ab dem Aufdecken der neuen Seite):
   👉 0 – 0,28s     Die alte Bühne (Menü bzw. Seite) blendet aus.
   👉 0 – 1,10s     Das angetippte Wort fliegt in die Eyebrow: Anschwellen bis 0,42s,
                    danach eine gedämpfte Feder: Originalgröße bei 0,71s, tiefste
                    Stauchung (0,91) bei 0,82s, ruhig auslaufend bis 1,10s.
   👉 0,62 – 0,86s  Menüwort und Eyebrow blenden ineinander, während das Wort nahe der
                    Originalgröße ist (so wird keines der beiden Bilder vergrößert
                    gezeigt und unscharf).
   👉 0,78 – 1,85s  Druckwelle, gezündet beim Aufschlag (tiefste Stauchung): Lichtkern
                    0,78 – 1,48s, Wellenfront 0,80 – 1,85s, Echo 0,92 – 1,87s.
   👉 0 – 1,15s     Bis zu drei Wolken gleiten an die Plätze der Hero-Wolken.
   👉 0,52 – 1,48s  Die Überschrift steigt Zeile für Zeile aus ihrer Maske auf
                    (0,08s Versatz je Zeile).
   👉 0,30 – 0,90s  Der Rest der neuen Seite steigt 14px auf und blendet ein.
   Die Kopfzeile ist ein eigenes Teil und bleibt stehen; Menükreuz und Burger
   blenden in 0,35s ineinander.

   Animiert werden ausschließlich transform und opacity (seit Fassung 4 auch bei den
   Zeilenmasken; die frühere clip-path-Ausnahme entfällt). */

@view-transition {
    navigation: auto;
}

/* ── Gegenstücke auf der Zielseite ──
   Nur bei Ankunft über das Menü (html.wf-ankunft, gesetzt in js/wortflug.js vor dem
   ersten Bild) und nur ohne reduzierte Bewegung. Die Namen stehen bewusst im CSS:
   Sie greifen, sobald der Hero geparst ist, unabhängig davon, wann pagereveal läuft.
   Die drei Hero-Wolken stehen in beiden Seiten von oben nach unten im Markup
   (oben rechts, Mitte links, unten); die alte Seite nummeriert ihre sichtbaren Wolken
   ebenso von oben nach unten. */
@media (prefers-reduced-motion: no-preference) {
    html.wf-ankunft .glass-header { view-transition-name: wf-kopf; }
    html.wf-ankunft #heroEntrance .pu-eyebrow { view-transition-name: wf-wort; }
    html.wf-ankunft #heroEntrance .pu-line-1 { view-transition-name: wf-zeile-1; }
    html.wf-ankunft #heroEntrance .pu-line-2 { view-transition-name: wf-zeile-2; }
    html.wf-ankunft #heroEntrance .pu-line-3 { view-transition-name: wf-zeile-3; }
    html.wf-ankunft #heroEntrance .pu-line-4 { view-transition-name: wf-zeile-4; }
    html.wf-ankunft div:has(+ #heroEntrance) > .parallax-cloud:nth-child(1) { view-transition-name: wf-wolke-1; }
    html.wf-ankunft div:has(+ #heroEntrance) > .parallax-cloud:nth-child(2) { view-transition-name: wf-wolke-2; }
    html.wf-ankunft div:has(+ #heroEntrance) > .parallax-cloud:nth-child(3) { view-transition-name: wf-wolke-3; }
}

/* ── Druckwelle der Landung ──
   Drei kreisrunde Teile, die js/wortflug.js nur für die Dauer des Übergangs fest über
   die Mitte der Eyebrow legt (Durchmesser aus der gemessenen Pillenbreite) und danach
   wieder entfernt. Sichtbar sind sie nur als Bilder des Übergangs.
   Jedes Teil ist in seiner Endgröße gezeichnet und startet verkleinert: Die Linie wird
   dabei nie über ihre echte Auflösung vergrößert und bleibt fein. Die Verläufe sind in
   Prozent des Radius angegeben, die Proportionen gelten also auf jeder Breite.
   Wellenfront wie eine echte Druckwelle: außen eine feine Kante (98,8 → 100 %), nach
   innen ein kurzer, weicher Nachlauf, die Mitte bleibt frei. Das Echo ist nur eine
   Haarlinie. Farben aus --amina-blue
   (72,160,214) und --amina-pink (213,90,146) abgeleitet. */
.wf-welle {
    position: fixed;
    z-index: 120;
    border-radius: 50%;
    pointer-events: none;
    visibility: hidden;
}
/* Sichtbar nur, solange der Übergang aktiv ist. Safari baut die Übergangsbilder ab
   und zeichnet die Seite ein Bild lang, bevor js/wortflug.js die Teile nach
   vt.finished entfernt: Ohne diese Regel stünde die Welle in diesem Bild in voller
   Größe und Deckkraft da (Bildschirmvideo Anis 2026-10-31, 4,16s). :active-view-transition
   endet im selben Bild wie der Übergang. Browser ohne die Pseudoklasse verwerfen die
   Regel und zeigen keine Welle; sie können auch keine dokumentübergreifenden Übergänge. */
html:active-view-transition .wf-welle {
    visibility: visible;
}
.wf-welle--kern {
    background: radial-gradient(closest-side,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(72, 160, 214, 0.16) 50%,
        rgba(72, 160, 214, 0) 100%);
}
.wf-welle--front {
    background: radial-gradient(closest-side,
        rgba(72, 160, 214, 0) 74%,
        rgba(72, 160, 214, 0.035) 88%,
        rgba(72, 160, 214, 0.12) 96%,
        rgba(72, 160, 214, 0.5) 98.8%,
        rgba(72, 160, 214, 0) 100%);
}
.wf-welle--echo {
    background: radial-gradient(closest-side,
        rgba(213, 90, 146, 0) 90%,
        rgba(213, 90, 146, 0.18) 98.6%,
        rgba(213, 90, 146, 0) 100%);
}

/* ── Bühne ── */
html.wf-ankunft::view-transition-old(root) {
    animation: wf-aus 0.28s cubic-bezier(0.4, 0, 1, 1) both;
}
html.wf-ankunft::view-transition-new(root) {
    animation: wf-ein-hoch 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

/* ── Kopfzeile: steht, nur der Inhalt blendet über ── */
html.wf-ankunft::view-transition-group(wf-kopf) {
    z-index: 2;
    animation-duration: 0.35s;
}

/* ── Wort → Eyebrow ──
   Gruppe: Lage und Größe wandern vom Menüwort zur Eyebrow, mit weichem Anlauf, damit
   das Anschwellen noch in der Bildmitte stattfindet und nicht schon unter der
   Kopfzeile. Über der Kopfzeile, weil das Wort am Desktop aus ihr herausfliegt.
   Bildpaar: trägt Anschwellen, Kippen und die Feder der Landung. Die Skalierung wirkt
   auf die jeweilige Gruppengröße, braucht also keine Koordinaten und gilt auf jeder
   Breite. Beide Bilder füllen die Höhe der Gruppe und behalten ihr Seitenverhältnis. */
html.wf-ankunft::view-transition-group(wf-wort) {
    z-index: 3;
    animation-duration: 1.1s;
    animation-timing-function: cubic-bezier(0.62, 0, 0.3, 1);
}
html.wf-ankunft::view-transition-image-pair(wf-wort) {
    transform-origin: 50% 50%;
    animation: wf-wort-flug 1.1s linear both;
}
html.wf-ankunft::view-transition-old(wf-wort),
html.wf-ankunft::view-transition-new(wf-wort) {
    height: 100%;
    object-fit: contain;
    /* Wie beim Standard-Überblenden: Die Deckkraft beider Bilder ergänzt sich, statt
       in der Mitte durchzuscheinen. */
    mix-blend-mode: plus-lighter;
}
html.wf-ankunft::view-transition-old(wf-wort) {
    animation: wf-wort-alt 1.1s linear both;
}
html.wf-ankunft::view-transition-new(wf-wort) {
    animation: wf-wort-neu 1.1s linear both;
}

/* ── Landung: Druckwelle ──
   Unter Wort (3), Kopfzeile (2) und Überschrift (2): Die Welle läuft hinter der Pille
   hervor und unter Glas-Kopfzeile und Schrift durch, über den Wolken. Der Kern zündet
   knapp vor der tiefsten Stauchung des Wortes (0,82s), die Front folgt, das Echo kommt
   0,12s nach ihr. Weite und Licht laufen getrennt: Die Weite
   rast los und läuft sanft aus, das Licht steht kurz und verklingt. */
html.wf-ankunft::view-transition-group(wf-welle-kern),
html.wf-ankunft::view-transition-group(wf-welle-1),
html.wf-ankunft::view-transition-group(wf-welle-2) {
    z-index: 1;
}
html.wf-ankunft::view-transition-group(wf-zeile-1),
html.wf-ankunft::view-transition-group(wf-zeile-2),
html.wf-ankunft::view-transition-group(wf-zeile-3),
html.wf-ankunft::view-transition-group(wf-zeile-4) {
    z-index: 2;
}
html.wf-ankunft::view-transition-new(wf-welle-kern) {
    animation: wf-kern-weite 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.78s both,
               wf-kern-licht 0.7s linear 0.78s both;
}
html.wf-ankunft::view-transition-new(wf-welle-1) {
    animation: wf-welle-weite 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both,
               wf-welle-licht 1.05s linear 0.8s both;
}
html.wf-ankunft::view-transition-new(wf-welle-2) {
    animation: wf-welle-weite 0.95s cubic-bezier(0.16, 1, 0.3, 1) calc(0.8s + 0.12s) both,
               wf-welle-licht 0.95s linear calc(0.8s + 0.12s) both;
}

/* ── Wolken ── */
html.wf-ankunft::view-transition-group(wf-wolke-1),
html.wf-ankunft::view-transition-group(wf-wolke-2),
html.wf-ankunft::view-transition-group(wf-wolke-3) {
    animation-duration: 1.15s;
    animation-timing-function: cubic-bezier(0.45, 0.05, 0.2, 1);
}
html.wf-ankunft::view-transition-old(wf-wolke-1),
html.wf-ankunft::view-transition-old(wf-wolke-2),
html.wf-ankunft::view-transition-old(wf-wolke-3),
html.wf-ankunft::view-transition-new(wf-wolke-1),
html.wf-ankunft::view-transition-new(wf-wolke-2),
html.wf-ankunft::view-transition-new(wf-wolke-3) {
    animation-duration: 1.15s;
}

/* ── Überschrift ──
   Maske ohne clip-path: Das Bildpaar jeder Zeile ist der ruhende Ausschnitt. Es reicht
   oben und seitlich 30 % über die Zeile hinaus (Überhänge der Schrift) und unten 12 %
   (Unterlängen); overflow: hidden schneidet dort ab. Das Zeilenbild selbst behält
   exakt die Größe der Zeile (H × B) und sitzt im vergrößerten Ausschnitt an seinem
   Platz: Der Ausschnitt ist (30 + 100 + 12) % = 142 % der Zeilenhöhe hoch und
   (30 + 100 + 30) % = 160 % der Zeilenbreite breit, das Bild steht also 30/142 der
   Ausschnitthöhe von oben und 30/160 der Ausschnittbreite von links und ist 100/160 so
   breit; die Höhe folgt aus dem Seitenverhältnis. Die Zeile steigt von 112 % unter
   ihrem Platz auf, also genau von der Ausschnittkante (100 % + 12 %): Sie taucht aus
   einer ruhenden Linie auf. Bewegt wird nur transform. */
html.wf-ankunft::view-transition-image-pair(wf-zeile-1),
html.wf-ankunft::view-transition-image-pair(wf-zeile-2),
html.wf-ankunft::view-transition-image-pair(wf-zeile-3),
html.wf-ankunft::view-transition-image-pair(wf-zeile-4),
html.wf-ankunft::view-transition-image-pair(wf-alt-zeile-1),
html.wf-ankunft::view-transition-image-pair(wf-alt-zeile-2),
html.wf-ankunft::view-transition-image-pair(wf-alt-zeile-3),
html.wf-ankunft::view-transition-image-pair(wf-alt-zeile-4) {
    inset: -30% -30% -12% -30%;
    overflow: hidden;
}
html.wf-ankunft::view-transition-new(wf-zeile-1),
html.wf-ankunft::view-transition-new(wf-zeile-2),
html.wf-ankunft::view-transition-new(wf-zeile-3),
html.wf-ankunft::view-transition-new(wf-zeile-4),
html.wf-ankunft::view-transition-old(wf-alt-zeile-1),
html.wf-ankunft::view-transition-old(wf-alt-zeile-2),
html.wf-ankunft::view-transition-old(wf-alt-zeile-3),
html.wf-ankunft::view-transition-old(wf-alt-zeile-4) {
    inset: auto;
    top: calc(100% * 30 / 142);
    left: calc(100% * 30 / 160);
    width: calc(100% * 100 / 160);
    height: auto;
}
html.wf-ankunft::view-transition-new(wf-zeile-1),
html.wf-ankunft::view-transition-new(wf-zeile-2),
html.wf-ankunft::view-transition-new(wf-zeile-3),
html.wf-ankunft::view-transition-new(wf-zeile-4) {
    animation: wf-zeile-rein 0.72s cubic-bezier(0.76, 0, 0.24, 1) both;
}
/* Versatz je Zeile: 0,52s + 0,08s × (Zeile − 1). Die erste Zeile steigt auf, während das
   Wort sich zur Pille zusammenzieht: Es gibt keinen Moment ohne Bewegung. */
html.wf-ankunft::view-transition-new(wf-zeile-1) { animation-delay: 0.52s; }
html.wf-ankunft::view-transition-new(wf-zeile-2) { animation-delay: calc(0.52s + 0.08s * 1); }
html.wf-ankunft::view-transition-new(wf-zeile-3) { animation-delay: calc(0.52s + 0.08s * 2); }
html.wf-ankunft::view-transition-new(wf-zeile-4) { animation-delay: calc(0.52s + 0.08s * 3); }

/* Die Überschrift der alten Seite (nur von Seite zu Seite, nicht aus dem Menü)
   fällt in ihre Maske. */
html.wf-ankunft::view-transition-old(wf-alt-zeile-1),
html.wf-ankunft::view-transition-old(wf-alt-zeile-2),
html.wf-ankunft::view-transition-old(wf-alt-zeile-3),
html.wf-ankunft::view-transition-old(wf-alt-zeile-4) {
    animation: wf-zeile-raus 0.34s cubic-bezier(0.5, 0, 0.75, 0) both;
}

@keyframes wf-aus {
    to { opacity: 0; }
}
@keyframes wf-ein-hoch {
    from { opacity: 0; transform: translateY(14px); }
}
/* Anschwellen auf das 2,1-Fache (aus 2rem Menüwort wird Überschriftgröße), dabei
   −5° gekippt. Danach ein einziger Federweg zurück, ohne Zwischenhalt: gedämpfte
   Schwingung (Eigenfrequenz 10/s, Dämpfung 0,62) über 0,682s, in 40 gleichen
   Zeitschritten abgetastet. Sie schießt einmal 8,3 % über das Ziel hinaus (Maßstab
   2,1 − 1,1 × 1,083 = 0,91, leichtes Kippen nach rechts) und läuft danach ohne zweites
   Zurückfedern aus: Die Restschwingung wird auf den letzten 30 % weich ausgeblendet,
   damit das Ende exakt auf 1 liegt statt mit einem Ruck. */
@keyframes wf-wort-flug {
    0%   { transform: none; animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1); }
    38%  { transform: scale(2.1) rotate(-5deg);
           animation-timing-function: linear(0, 0.0135, 0.0503, 0.1048, 0.1724, 0.2487, 0.3301, 0.4135, 0.4964, 0.5766, 0.6526, 0.7232, 0.7876, 0.8453, 0.896, 0.9397, 0.9768, 1.0073, 1.0319, 1.0509, 1.065, 1.0747, 1.0806, 1.0832, 1.0832, 1.081, 1.0771, 1.072, 1.0659, 1.0581, 1.0485, 1.0383, 1.0286, 1.02, 1.013, 1.0076, 1.0039, 1.0017, 1.0005, 1.0001, 1); }
    100% { transform: none; }
}
/* Überblenden, während das Wort nahe der Originalgröße ist (56 % bis 78 % = 0,62 bis
   0,86s, um den Durchgang durch 1 bei 0,71s). */
@keyframes wf-wort-alt {
    0%, 56%   { opacity: 1; }
    78%, 100% { opacity: 0; }
}
@keyframes wf-wort-neu {
    0%, 56%   { opacity: 0; }
    78%, 100% { opacity: 1; }
}
/* Druckwelle: Start bei 18 % der Endgröße (Durchmesser 0,18 × 4,2 ≈ 0,76 Pillenbreiten,
   also hinter dem Wort verborgen), gleichmäßig nach allen Seiten. */
@keyframes wf-welle-weite {
    from { transform: scale(0.18); }
    to   { transform: none; }
}
@keyframes wf-welle-licht {
    0%   { opacity: 0; }
    7%   { opacity: 1; }
    35%  { opacity: 0.8; }
    100% { opacity: 0; }
}
@keyframes wf-kern-weite {
    from { transform: scale(0.55); }
    to   { transform: none; }
}
@keyframes wf-kern-licht {
    0%   { opacity: 0; }
    20%  { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes wf-zeile-rein {
    from { transform: translateY(112%); }
}
@keyframes wf-zeile-raus {
    to { transform: translateY(112%); }
}

/* ── Reduzierte Bewegung: nichts fliegt, die Seiten blenden kurz über ── */
@media (prefers-reduced-motion: reduce) {
    html.wf-ankunft::view-transition-old(root) {
        animation: wf-aus 0.18s linear both;
    }
    html.wf-ankunft::view-transition-new(root) {
        animation: wf-aus 0.18s linear reverse both;
    }
}