/* EuropeNews24 – Bewegung. Liegt als eigene Schicht über en24.css: kein Raster, keine Farbe und keine Schrift wird geändert,
   es kommen nur Übergänge, sanftes Einblenden und Rückmeldungen beim Zeigen dazu. Die schmale Leiste beim Scrollen ist ein eigenes Element
   (Stile in en24.css, Skript en24-bewegung.js); der Kopf selbst bleibt immer, wie er ist.
   Bewegung steckt in „prefers-reduced-motion: no-preference“ (bei „weniger Bewegung“ bleibt die Seite still wie vorher); nur der
   Lesefortschritt bleibt, weil er eine Anzeige ist. Alles ist Zugabe: wo ein Browser etwas nicht kann, bleibt die Seite wie sie war.
   Es bewegen sich nur Deckkraft, Verschiebung und Skalierung – nie etwas, das das Layout verschiebt (CLS 0).
   Die Datei kommt nicht blockierend (functions.php): keine Regel darf beim späten Eintreffen etwas verschieben. Was die neue Seite schon
   im ersten Bild braucht (Abschnitt 1), steht zwischen „inline:anfang“ und „inline:ende“ und wird zusätzlich in den <head> geschrieben (inc/helfer.php).
   Marke: kurz, gerichtet, einmal. Was hereinkommt, kommt von unten (beim Seitenwechsel von rechts, zurück von links); nichts federt, nichts pulsiert. */

/* inline:anfang */
/* Zeitkurven für alles im Theme (der Vorhang in inc/vorhang.php schreibt dieselben Werte aus); keine überschwingt (y in [0, 1]) */
:root {
  --bew-ein: cubic-bezier(.16, .84, .32, 1);     /* hereinkommen */
  --bew-aus: cubic-bezier(.5, 0, .9, .3);        /* gehen: nur für Wege (translate), nie für Deckkraft */
  --bew-weg: linear;                             /* Deckkraft geht gleichmäßig: Alt und Neu liegen so kaum übereinander */
  --bew-weich: cubic-bezier(.2, .7, .2, 1);      /* Form wandert (Bild, Kopf, Logo) */
  --bew-marke: cubic-bezier(.22, 1, .36, 1);     /* Vorhang, Akzentlinie */
}
@media (prefers-reduced-motion: no-preference) {
  /* ---------- 1. Seitenwechsel „Spaltenschub“ ----------
     Chrome, Edge, Safari ab 18.2; Firefox wechselt wie bisher. Die Spalten werden wie Bögen auf dem Umbruchtisch geschoben:
     Hauptspalte und Seitenleiste gehen nach links weg und kommen mit kleinem Versatz von rechts herein, beim Zurück im Verlauf
     gespiegelt (--en24-x). Der Kopf liegt darüber und steht still wie ein Rahmen, das Logo darin bewegt sich nie (kein eigener Name):
     Er heißt nur, wenn er auf beiden Seiten oben steht; sonst blendet er weich (en24-wechsel.js). Das Bild der angeklickten Meldung
     wandert über den Spalten in den Artikel (das Bild im Artikel heißt von Haus aus „en24-bild“, das Skript gibt dem Bild der Liste
     denselben Namen). Klassen und Maße setzt assets/en24-wechsel.js (Inline-Skript im <head>, pageswap und pagereveal).
     Ende nach 680 ms; Weg mit --bew-aus, Deckkraft mit --bew-weg, die neue Hälfte kommt erst ab 60 % der Ausblenddauer. */
  @view-transition { navigation: auto; }
  .kopf { view-transition-name: en24-kopf; }
  .beitrag-bild img { view-transition-name: en24-bild; }
  .haupt { view-transition-name: en24-haupt; }
  .leiste { view-transition-name: en24-leiste; }
  /* Richtung und alte Lage gelten nur im Übergang selbst: Sie hängen am Pseudo-Element ::view-transition, nicht an <html>. So muss der
     Browser vor dem ersten Bild der neuen Seite nicht die Stile aller Elemente neu rechnen */
  ::view-transition { --en24-x: 1; }
  html.en24-zurueck::view-transition { --en24-x: -1; }
  /* Rest der Seite (Fuß, Grund): zwei Ebenen im normalen Mischmodus (zwei helle addieren sich nicht zu Weiß) */
  ::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
  ::view-transition-old(root) { z-index: 1; animation: en24-weg .24s var(--bew-weg) both; }
  ::view-transition-new(root) { z-index: 2; animation: en24-her .36s var(--bew-ein) .15s both; }
  /* Kopf: Stehen beide Seiten oben, ist er auf beiden gleich: der alte bleibt, der neue legt sich darüber (nur die Markierung der
     Rubrik wechselt weich), nichts wandert und nichts blinkt. Der alte Kopf ist deckend (eigene Grundfläche): nie scheint etwas durch.
     Steht er nur auf einer Seite im Bild (aus der schmalen Leiste oder in eine gescrollte Seite), heißt er nur dort und blendet:
     neu herein in 280 ms, alt hinaus in 200 ms; die Leiste geht dabei mit der alten Seite */
  ::view-transition-group(en24-kopf) { z-index: 3; animation: none; }
  ::view-transition-old(en24-kopf), ::view-transition-new(en24-kopf) { mix-blend-mode: normal; }
  ::view-transition-old(en24-kopf) { animation: none; }
  ::view-transition-new(en24-kopf) { animation: en24-her .28s var(--bew-ein) .08s both; }
  ::view-transition-new(en24-kopf):only-child { animation: en24-her .28s var(--bew-ein) both; }
  ::view-transition-old(en24-kopf):only-child { animation: en24-weg .2s var(--bew-weg) both; }
  /* Schmale Leiste: steht sie beim Klick, liegt sie im Übergang über allem (sonst lägen die Spalten der alten Seite darüber) und
     blendet in 200 ms aus; die neue Seite beginnt oben mit dem Kopf */
  html.en24-leiste-an .leiste-oben { view-transition-name: en24-leiste-oben; }
  ::view-transition-group(en24-leiste-oben) { z-index: 5; animation: none; }
  ::view-transition-old(en24-leiste-oben) { animation: en24-weg .2s var(--bew-weg) both; }
  ::view-transition-new(en24-leiste-oben) { animation: none; }
  /* Spalten: Die Gruppen stehen (kein Größenmorph zwischen verschieden langen Spalten, die Breite ist auf allen Seiten gleich).
     Die alte Hälfte bleibt an ihrer alten Lage (--en24-dy-…, gemessen) und geht 28 px weg, die Leiste 60 ms nach der Hauptspalte
     („zweiter Bogen“); die neue kommt aus 36 px Versatz an ihrer neuen Lage herein. */
  ::view-transition-group(en24-haupt), html:not(.en24-leiste-gleich)::view-transition-group(en24-leiste) { animation: none; z-index: 1; }
  ::view-transition-old(en24-haupt), ::view-transition-new(en24-haupt), ::view-transition-old(en24-leiste), ::view-transition-new(en24-leiste) { mix-blend-mode: normal; }
  ::view-transition-old(en24-haupt) { --dy: var(--en24-dy-haupt, 0px); animation: en24-weg .28s var(--bew-weg) both, en24-schub .28s var(--bew-aus) both; }
  ::view-transition-old(en24-leiste) { --dy: var(--en24-dy-leiste, 0px); animation: en24-weg .28s var(--bew-weg) .06s both, en24-schub .28s var(--bew-aus) .06s both; }
  ::view-transition-new(en24-haupt) { animation: en24-spalte .46s var(--bew-ein) .17s both; }
  ::view-transition-new(en24-leiste) { animation: en24-spalte .46s var(--bew-ein) .23s both; }
  /* Seitenleiste mit gleichem Inhalt an gleicher Stelle (Prüfsumme, neben der Hauptspalte, Lage auf 24 px gleich; Klasse
     en24-leiste-gleich): dasselbe Stück Papier. Kein Schub, kein Überblenden, die Gruppe gleicht nur den kleinen Rest der Lage aus */
  html.en24-leiste-gleich::view-transition-group(en24-leiste) { z-index: 1; animation-duration: .46s; animation-timing-function: var(--bew-weich); }
  html.en24-leiste-gleich::view-transition-old(en24-leiste) { animation: none; opacity: 0; }
  html.en24-leiste-gleich::view-transition-new(en24-leiste) { animation: none; opacity: 1; }
  /* Bild: Rahmen wandert über den Spalten, darin blendet der schärfere Zuschnitt des Artikels über den kleinen der Liste */
  ::view-transition-group(en24-bild) { z-index: 2; animation-duration: .52s; animation-timing-function: var(--bew-weich); }
  ::view-transition-old(en24-bild), ::view-transition-new(en24-bild) { height: 100%; object-fit: cover; mix-blend-mode: normal; }
  ::view-transition-old(en24-bild) { animation: none; opacity: 1; }
  ::view-transition-new(en24-bild) { animation: en24-her .24s var(--bew-ein) .22s both; }
  /* Bild nur auf einer Seite (Artikel → Rubrik, Artikel ohne Bild): es geht und kommt mit der Hauptspalte */
  ::view-transition-old(en24-bild):only-child { --dy: 0px; animation: en24-weg .28s var(--bew-weg) both, en24-schub .28s var(--bew-aus) both; }
  ::view-transition-new(en24-bild):only-child { animation: en24-spalte .46s var(--bew-ein) .17s both; }
  @keyframes en24-schub { from { translate: 0 var(--dy, 0px); } to { translate: calc(var(--en24-x) * -28px) var(--dy, 0px); } }
  @keyframes en24-spalte { from { opacity: 0; translate: calc(var(--en24-x) * 36px) 0; } }
  @keyframes en24-weg { to { opacity: 0; } }
  @keyframes en24-her { from { opacity: 0; } }
  /* Hell/Dunkel (Abschnitt 6): die benannten Elemente sind dabei aus, damit wirklich alles im Kreis wechselt */
  html.en24-modus-wechsel :is(.kopf, .leiste-oben, .beitrag-bild img, .haupt, .leiste) { view-transition-name: none; }
  html.en24-modus-wechsel::view-transition-old(root), html.en24-modus-wechsel::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
}
/* inline:ende */

/* Erkennung für das Skript: diese Datei ist angekommen (sie lädt nicht blockierend) */
:root { --en24-bewegung: 1; }

/* Bildplatzhalter: die Fläche steht, bevor das Bild da ist (setzt das Skript für Bilder, die beim Start noch laden) */
img[data-bild] { background-color: var(--flaeche, #f1f5fb); }

/* ---------- 2. Lesefortschritt (nur im Artikel; bleibt auch bei „weniger Bewegung“, er zeigt nur den Stand) ----------
   Dünne Akzentlinie ganz oben, so breit wie der Text des Artikels gelesen ist. Chrome, Edge, Safari: scroll-gesteuerte Animation;
   sonst setzt das Skript --en24-lesen (0 bis 1); ohne beides bleibt die Linie leer. */
:root:has(.beitrag .inhalt)::after {
  content: ""; position: fixed; top: var(--en24-ab, var(--wp-admin--admin-bar--height, 0px)); left: 0; right: 0; height: 3px; z-index: 90;
  background: var(--akzent); transform-origin: 0 50%; scale: var(--en24-lesen, 0) 1; pointer-events: none;
}
/* Steht oben die schmale Leiste, sitzt die Linie auf ihrem unteren Rand und fährt mit ihr */
html.en24-leiste-an:has(.beitrag .inhalt)::after { translate: 0 calc(var(--leiste-hoehe) - 2px); }
@media (prefers-reduced-motion: no-preference) { :root:has(.beitrag .inhalt)::after { transition: translate .3s cubic-bezier(.16, .84, .32, 1); } }
@supports (animation-timeline: view()) and (timeline-scope: --en24-lesen) {
  :root:has(.beitrag .inhalt) { timeline-scope: --en24-lesen; }
  .beitrag .inhalt { view-timeline: --en24-lesen block; }
  :root:has(.beitrag .inhalt)::after { scale: 0 1; animation: en24-lesen linear both; animation-timeline: --en24-lesen; animation-range: contain 0% contain 100%; }
  @keyframes en24-lesen { to { scale: 1 1; } }
}

@media (prefers-reduced-motion: no-preference) {
  /* ---------- 3. Einblenden beim Scrollen ----------
     Meldungen und Blöcke der Seitenleiste kommen beim Hereinscrollen von unten ins Bild (16 px) und sind fertig, bevor sie die
     Bildmitte erreichen. Was beim Laden schon im ersten Bildschirm steht, markiert das Skript (data-sofort) und ist einfach da.
     Rückfall: alles steht von Anfang an da. */
  @supports (animation-timeline: view()) {
    .meldungen > .meldung, .leiste > .widget {
      animation: en24-ein linear both; animation-timeline: view(); animation-range: entry 0% entry 42%;
    }
    .meldungen > .meldung[data-sofort], .leiste > .widget[data-sofort] { animation: none; }
    @keyframes en24-ein { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
  }

  /* ---------- 4. Bilder: Farbfläche, dann kurzes Einblenden ----------
     Bilder, die beim Start noch laden, stehen als ruhige Farbfläche da (CSS oben, Seitenverhältnis kommt aus en24.css) und blenden
     nach dem Laden in 0,2 s ein. Dauert das Laden länger als eine Sekunde, zieht dreimal ein leiser Schimmer über die Fläche, dann
     ist Ruhe (kein Dauer-Puls). Der Schimmer ist eine Ebene über dem Bild, die nur verschoben wird; der Rahmen schneidet sie ab. */
  .bild:has(> img[data-bild="lang"]), .beitrag-bild:has(> img[data-bild="lang"]) { position: relative; overflow: clip; }
  .bild:has(> img[data-bild="lang"])::after, .beitrag-bild:has(> img[data-bild="lang"])::after {
    content: ""; position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 16 / 9; pointer-events: none; translate: -100% 0;
    background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--tinte) 6%, transparent) 50%, transparent 80%);
    animation: en24-schimmer 1.1s linear 3;
  }
  @keyframes en24-schimmer { from { translate: -100% 0; } to { translate: 100% 0; } }
  img[data-bild="da"] { animation: en24-her .2s var(--bew-ein) both; }

  /* ---------- 5. Zeigen und Zeigen-Lassen ---------- */
  .bild { overflow: hidden; }
  .bild img { transition: scale .42s var(--bew-ein); }
  /* Titel: statt der sofortigen Unterstreichung wächst eine dünne Linie von links. Auch bei Tastaturfokus; die Fokusumrandung bleibt. */
  .aufmacher h2 a, .meldung h3 a, .meistgelesen .w-titel, .neueste .w-titel {
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px;
    box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background-size .24s var(--bew-ein);
  }
  .aufmacher h2 a:focus-visible, .meldung h3 a:focus-visible, .meistgelesen a:focus-visible .w-titel, .neueste a:focus-visible .w-titel {
    text-decoration: none; background-size: 100% 1px;
  }
  .menue a { transition: color .16s, border-color .16s; }
  .thema, a.page-numbers, .modus, .suche button { transition: color .16s, border-color .16s, background-color .16s, filter .16s; }
  sup.fn { transition: opacity .16s; }
  /* Nur wo es eine Maus gibt (auf Touchgeräten bliebe „Hover“ nach dem Tippen hängen) */
  @media (hover: hover) {
    .aufmacher h2 a:hover, .meldung h3 a:hover, .meldung .bild:hover + div h3 a, .aufmacher .bild:hover ~ .aufmacher-text h2 a,
    .meistgelesen a:hover .w-titel, .neueste a:hover .w-titel { text-decoration: none; background-size: 100% 1px; }
    /* Bild zoomt minimal, wenn Bild oder Titel gezeigt werden */
    .meldung .bild:hover img, .meldung:has(h3 a:hover) .bild img, .aufmacher .bild:hover img, .aufmacher:has(h2 a:hover) .bild img { scale: 1.03; }
    .menue a:not(.aktiv):not([aria-current]):hover { border-bottom-color: color-mix(in srgb, var(--akzent) 35%, transparent); }
    .thema:hover:not(.aktiv) { background-color: color-mix(in srgb, var(--akzent) 7%, var(--flaeche)); }
    sup.fn:hover { opacity: .65; }
  }
  /* Fußnote, zu der man gesprungen ist: kurz kräftig markiert, dann ruhig */
  .fussnoten li.aktiv { animation: en24-markiert 1.2s ease-out; }
  @keyframes en24-markiert { from { background-color: color-mix(in srgb, var(--akzent) 22%, var(--grund)); } }

  /* ---------- 6. Hell/Dunkel ----------
     Mit View Transition wächst der neue Modus als Kreis vom Schalter aus (das Skript setzt die Klasse und führt den Kreis aus, 0,4 s;
     die Regeln dazu stehen in Abschnitt 1). Ohne die Technik läuft der Farbwechsel weich (Klasse en24-weich, nur kurz). */
  html.en24-weich *, html.en24-weich *::before, html.en24-weich *::after {
    transition: background-color .24s ease, color .24s ease, border-color .24s ease, fill .24s ease, stroke .24s ease !important;
  }

  /* ---------- 7. Ladebalken ----------
     Drei Pixel, unbestimmt: ein Lichtstreif läuft über die Akzentlinie oben (ein Ton heller als die Linie, im Dunkelmodus dunkler,
     sonst wäre er auf ihr unsichtbar). Das Skript blendet ihn ein, wenn eine Navigation länger als 120 ms dauert. */
  html::before {
    content: ""; position: fixed; top: var(--en24-ab, var(--wp-admin--admin-bar--height, 0px)); left: 0; width: 34%; height: 3px; z-index: 100;
    background: linear-gradient(90deg, transparent, var(--en24-streif) 35%, var(--en24-streif) 65%, transparent);
    --en24-streif: color-mix(in srgb, var(--akzent) 30%, var(--grund));
    translate: -100% 0; opacity: 0; pointer-events: none; transition: opacity .16s;
  }
  html.en24-laedt::before { opacity: 1; animation: en24-laden .9s linear infinite; }
  @keyframes en24-laden { from { translate: -100% 0; } to { translate: 300% 0; } }

  /* ---------- 8. Kennzahlen ----------
     Mit dem Abgang des Vorhangs (erste Seite einer Sitzung) blenden die Werte kurz nacheinander ein. Das Skript setzt die Klasse, solange
     der Vorhang die Seite noch deckt; Grundverzug 280 ms: dann wird sein Grund durchsichtig (ab 320 ms), die Werte kommen sichtbar mit
     ihm herein. Ohne Vorhang bleiben sie stehen (kein Hochzählen, kein Blinken). Alles ist nach gut 0,7 s fertig: ab dem sechsten Wert
     kommt keine Verzögerung mehr dazu. */
  .en24-kz-ein .kz-wert { animation: en24-her .32s var(--bew-ein) both; animation-delay: calc(var(--i, 0) * 30ms + 280ms); }
  .en24-kz-ein .kennzahlen li:nth-child(2) { --i: 1; } .en24-kz-ein .kennzahlen li:nth-child(3) { --i: 2; } .en24-kz-ein .kennzahlen li:nth-child(4) { --i: 3; }
  .en24-kz-ein .kennzahlen li:nth-child(5) { --i: 4; } .en24-kz-ein .kennzahlen li:nth-child(n+6) { --i: 5; }
}

/* Auf Papier keine Animationen und keine Balken */
@media print {
  html::before, html::after { display: none !important; }
  .meldungen > .meldung, .leiste > .widget { animation: none !important; opacity: 1 !important; translate: none !important; }
}