/* ============================================================
   Bewegungsebene

   Die Bewegung kommt aus dem Druckbild, nicht aus dem Baukasten der
   Landingpages. Leitbild ist der Risodruck: das Papier läuft ein, die
   zweite Farbe trifft mit leichtem Versatz auf, Linien werden gezogen.

   Regeln, die hier gelten:
   * Nichts bewegt sich länger als 0,6 Sekunden. Ausnahmen: der Papierstau
     der 404-Seite (1,1 s) und das versteckte Hitzefrei (1,8 s).
   * Nichts springt, nichts fliegt von weit außen herein.
   * Kein Element ist ohne Bewegung unsichtbar — ohne die Animation
     steht alles fertig da (wichtig ohne JavaScript und in alten Browsern).
   * `prefers-reduced-motion: reduce` schaltet die gesamte Datei ab.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* --- 1 Der Passer läuft ein -------------------------------------------
     Die Cyan-Platte kommt aus einem größeren Versatz in ihre Endlage.
     Genau das passiert beim Risodruck, wenn der zweite Durchgang trifft. */

  /* Wichtig: Die Endlage der Cyan-Platte ist **nicht** null, sondern der
     Passerversatz aus components.css. Landete sie auf null, wäre der
     Zweifarbendruck weg — genau das Merkmal, um das es geht. */
  @keyframes passer-cyan {
    from { translate: -24px -18px; opacity: 0; }
    to   { translate: -5px -4px; opacity: 1; }
  }

  /* Die Tinte kommt aus der Gegenrichtung — so wirkt es wie zwei Durchgänge. */
  @keyframes passer-tinte {
    from { translate: 12px 9px; opacity: 0; }
    to   { translate: 0 0; opacity: 1; }
  }

  /* `backwards` statt `both`: Die Endlage ist ohnehin der Ruhewert. Hielte die
     Animation ihn fest, käme der Passer-Wackler (Abschnitt 8) nicht mehr durch. */
  .draw__plate--cyan {
    animation: passer-cyan 0.55s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }

  .draw__plate--ink {
    animation: passer-tinte 0.45s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }

  /* Im Wahrzeichenband treffen die fünf Zeichnungen nacheinander auf. */
  .draw-strip .draw:nth-child(1) .draw__plate { animation-delay: 0.00s; }
  .draw-strip .draw:nth-child(2) .draw__plate { animation-delay: 0.06s; }
  .draw-strip .draw:nth-child(3) .draw__plate { animation-delay: 0.12s; }
  .draw-strip .draw:nth-child(4) .draw__plate { animation-delay: 0.18s; }
  .draw-strip .draw:nth-child(5) .draw__plate { animation-delay: 0.24s; }

  /* --- 2 Linien werden gezogen ------------------------------------------
     Ressortstriche und Balken wachsen von links, wie mit dem Lineal. */

  @keyframes strich {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  .ressort::after,
  .band--ruled::before {
    content: "";
    display: block;
  }

  .ressort {
    position: relative;
    border-bottom-color: transparent;
  }

  .ressort::after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--line) * -1);
    height: var(--line);
    background: var(--ink);
    transform-origin: left;
    animation: strich 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  /* --- 3 Der Seitenkopf setzt sich ---------------------------------------
     Schlagzeile und Vorspann kommen minimal von unten — zwölf Pixel,
     nicht fünfzig. Es soll wirken, als lege sich der Satz aufs Papier. */

  @keyframes satz {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }

  .pagehead > div > *,
  .frontpage__motto > div:first-child > *,
  .opener > *,
  .article > * {
    animation: satz 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .pagehead > div > :nth-child(1),
  .frontpage__motto > div:first-child > :nth-child(1),
  .opener > :nth-child(1),
  .article > :nth-child(1) { animation-delay: 0.02s; }

  .pagehead > div > :nth-child(2),
  .frontpage__motto > div:first-child > :nth-child(2),
  .opener > :nth-child(2),
  .article > :nth-child(2) { animation-delay: 0.09s; }

  .pagehead > div > :nth-child(3),
  .frontpage__motto > div:first-child > :nth-child(3),
  .opener > :nth-child(3),
  .article > :nth-child(3) { animation-delay: 0.16s; }

  .pagehead > div > :nth-child(4),
  .article > :nth-child(4) { animation-delay: 0.23s; }

  /* --- 4 Der Textmarker wird aus der Hand gezogen --------------------------
     Zwei schiefe Züge statt eines Balkens. Beide drucken im Modus multiply:
     Wo sie sich überlappen, liegt das Cyan doppelt und wird dunkler — wie ein
     zweiter Auftrag mit dem echten Marker. Ohne Bewegung bleibt der flache
     Balken aus base.css stehen. Nur in Schlagzeilen: Die Züge brechen nicht
     um, im Fließtext bleibt deshalb der umbrechende Balken.                */

  @keyframes zug {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  h1 .mark {
    position: relative;
    isolation: isolate;
    white-space: nowrap;
    background: none;
  }

  h1 .mark::before,
  h1 .mark::after {
    content: "";
    position: absolute;
    z-index: -1;
    background: var(--cyan);
    mix-blend-mode: multiply;
    transform-origin: left center;
  }

  h1 .mark::before {
    inset: 10% -0.14em 8% -0.08em;
    rotate: -1.2deg;
    animation: zug 0.34s cubic-bezier(0.3, 0.9, 0.4, 1) 0.35s backwards;
  }

  h1 .mark::after {
    inset: 30% -0.02em -2% 0.1em;
    rotate: 0.9deg;
    animation: zug 0.3s cubic-bezier(0.3, 0.9, 0.4, 1) 0.66s backwards;
  }

  /* --- 5 Beim Scrollen ---------------------------------------------------
     Nur wo der Browser Scroll-Zeitleisten kann. Sonst passiert nichts —
     und es fehlt auch nichts, weil alles ohnehin sichtbar ist.          */

  @supports (animation-timeline: view()) {

    /* Meldungszeilen laufen ein, wenn ihr Register in Sicht kommt. */
    .stories .story {
      animation: satz 0.4s linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 32%;
    }

    /* Kacheln und Kästen genauso, aber ruhiger. */
    .grid > .box,
    .grid > .person,
    .tiles > * {
      animation: satz 0.45s linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 30%;
    }

    /* Kennzahlenreihe: die Trennlinien wachsen mit. */
    .facts .fact {
      animation: satz 0.4s linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 28%;
    }

    /* Das Wahrzeichenband druckt erst, wenn es wirklich zu sehen ist. */
    .draw-strip .draw__plate {
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }

    /* Bilder ziehen sich sacht auf ihre Endgröße. */
    @keyframes einzug {
      from { opacity: 0; scale: 1.012; }
      to   { opacity: 1; scale: 1; }
    }

    .plate-photo img,
    .person__pic img {
      animation: einzug 0.5s linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 30%;
    }
  }

  /* --- 6 Der Aufruf pocht einmal ----------------------------------------
     Ein einziger, kurzer Impuls auf dem Cyan-Feld, wenn es in Sicht kommt.
     Keine Dauerschleife — Dauerbewegung ist im Satz ein Fehler.        */

  @supports (animation-timeline: view()) {
    @keyframes anschlag {
      0%   { box-shadow: 0 0 0 0 var(--ink); }
      60%  { box-shadow: 10px 10px 0 0 var(--ink); }
      100% { box-shadow: 6px 6px 0 0 var(--ink); }
    }

    .appeal {
      animation: anschlag 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }

  /* --- 7 Stempel drücken -------------------------------------------------
     Beim Überfahren hebt sich die Schaltfläche von ihrem Tintenschatten ab,
     beim Klick wird sie aufs Papier gedrückt.                            */

  .stamp,
  .icon-stamp {
    transition: background-color 0.12s linear, transform 0.12s linear, box-shadow 0.12s linear;
  }

  @media (hover: hover) {
    .stamp:hover,
    .icon-stamp:hover {
      transform: translate(-2px, -2px);
      box-shadow: 4px 4px 0 var(--ink);
    }
  }

  .stamp:active,
  .icon-stamp:active {
    transform: translate(1px, 1px);
    box-shadow: 0 0 0 var(--ink);
  }

  /* --- 8 Passer-Wackler ---------------------------------------------------
     Unter der Maus rutschen die beiden Platten auseinander und federn in
     ihren Versatz zurück — wie ein schlecht eingespannter Bogen.          */

  @media (hover: hover) {
    .draw__plate {
      transition: translate 0.45s cubic-bezier(0.3, 1.7, 0.5, 1);
    }

    .draw:not(.draw-strip .draw):hover .draw__plate--cyan { translate: -18px -14px; }
    .draw:not(.draw-strip .draw):hover .draw__plate--ink { translate: 8px 6px; }
  }

  /* --- 9 Wahrzeichen mit Macken -------------------------------------------
     Im Band über der Fußzeile hat jede Zeichnung ihre eigene Reaktion.    */

  @keyframes verbeugen {
    0%   { transform: none; }
    45%  { transform: skewX(-7deg) scaleY(0.86); }
    100% { transform: none; }
  }

  @keyframes kuchen-dreht {
    from { transform: rotate(0); }
    to   { transform: rotate(1turn); }
  }

  @keyframes land-pocht {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.07); }
    60%  { transform: scale(0.97); }
    100% { transform: scale(1); }
  }

  @keyframes dom-laeutet {
    0%   { transform: rotate(0); }
    20%  { transform: rotate(4deg); }
    45%  { transform: rotate(-3deg); }
    70%  { transform: rotate(1.5deg); }
    100% { transform: rotate(0); }
  }

  @keyframes baer-huepft {
    0%   { transform: none; }
    35%  { transform: translateY(-22px) rotate(-6deg); }
    70%  { transform: translateY(0) scale(1.05, 0.9); }
    100% { transform: none; }
  }

  .draw-strip .draw--theater,
  .draw-strip .draw--dom { transform-origin: 50% 100%; }

  @media (hover: hover) {
    .draw-strip .draw--theater:hover    { animation: verbeugen 0.6s ease-in-out; }
    .draw-strip .draw--baumkuchen:hover { animation: kuchen-dreht 0.6s cubic-bezier(0.4, 1.4, 0.5, 1); }
    .draw-strip .draw--land:hover       { animation: land-pocht 0.5s ease-out; }
    .draw-strip .draw--dom:hover        { animation: dom-laeutet 0.6s ease-in-out; }
    .draw-strip .draw--baer:hover       { animation: baer-huepft 0.5s cubic-bezier(0.3, 0.8, 0.4, 1); }
  }

  /* --- 10 Tintenbalken läuft mit ------------------------------------------
     Der Balken unter dem aktiven Ressort gleitet zum Menüpunkt unter der
     Maus. Nur mit Anker-Positionierung; sonst bleibt der Balken fest.     */

  @supports (anchor-name: --a) {
    /* Ab 78rem stehen die Ressorts in einer Zeile; darunter sind sie ein Klappmenü. */
    @media (hover: hover) and (min-width: 78rem) {
      .sections__inner { position: relative; }

      .sections__link[aria-current="page"] {
        anchor-name: --ressortbalken;
        border-bottom-color: transparent;
      }

      /* :not(:hover) — liegt die Maus auf dem aktiven Ressort selbst, bleibt er der Anker. */
      .sections__inner:has(.sections__link:hover) .sections__link[aria-current="page"]:not(:hover) {
        anchor-name: none;
      }

      .sections__link:hover { anchor-name: --ressortbalken; }

      .sections__inner::after {
        content: "";
        position: absolute;
        position-anchor: --ressortbalken;
        left: anchor(left);
        right: anchor(right);
        bottom: anchor(bottom);
        height: var(--bar);
        background: var(--ink);
        pointer-events: none;
        transition: left 0.28s cubic-bezier(0.3, 1.45, 0.5, 1),
                    right 0.28s cubic-bezier(0.3, 1.45, 0.5, 1);
      }
    }
  }

  /* Klebt die Leiste oben, legt sich das Logo von links hinein. */
  @keyframes marke-ein {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: none; }
  }

  .sections--klebt .sections__marke {
    animation: marke-ein 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  /* --- 11 Druckbogen-Anzeige ----------------------------------------------
     Auf Beitragsseiten zieht sich unter der Ressortleiste ein Cyan-Streifen
     mit dem Lesen mit. Reines CSS über die Scroll-Zeitleiste der Seite.   */

  @supports (animation-timeline: scroll()) {
    @keyframes bogen-laeuft {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }

    body:has(.article) .sections::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      height: 4px;
      margin-top: var(--line);
      background: var(--cyan);
      transform-origin: left;
      animation: bogen-laeuft linear both;
      animation-timeline: scroll(root);
    }
  }

  /* --- 12 Kopierer-Einzug -------------------------------------------------
     Beim Seitenwechsel legt sich der neue Bogen von oben aufs Papier und
     richtet sich aus. Nur Browser mit seitenübergreifenden View Transitions;
     alle anderen wechseln die Seite wie bisher.                           */

  @view-transition { navigation: auto; }

  @keyframes bogen-rein {
    from { opacity: 0; transform: translateY(-1.6rem) rotate(-0.5deg); }
    to   { opacity: 1; transform: none; }
  }

  @keyframes bogen-raus {
    to { opacity: 0; }
  }

  ::view-transition-old(root) { animation: bogen-raus 0.2s linear both; }
  ::view-transition-new(root) {
    animation: bogen-rein 0.45s cubic-bezier(0.2, 0.9, 0.3, 1) both;
    transform-origin: 50% 0;
  }

  /* --- 13 Nummerierwerk ---------------------------------------------------
     zahlen.js setzt jede Ziffer auf ein Rad; die Räder drehen nacheinander
     ein und rasten mit einem kleinen Überschlag.                          */

  /* Eine Zelle ist etwas höher als 1 em, damit die Ziffern darüber und
     darunter nicht mit ihren Kanten ins Fenster ragen. Der negative Rand
     hält die Zeilenhöhe der Kennzahl trotzdem bei 1.                    */
  .zaehlwerk { display: inline-flex; --zelle: 1.2em; }

  @keyframes rad-dreht {
    from { transform: translateY(0); }
    to   { transform: translateY(calc(var(--zelle) * -10)); }
  }

  .zaehlwerk__rad {
    display: inline-block;
    height: var(--zelle);
    margin-block: -0.1em;
    overflow: hidden;
  }

  .zaehlwerk__band {
    display: flex;
    flex-direction: column;
    animation: rad-dreht 0.6s cubic-bezier(0.25, 1.35, 0.45, 1) var(--verzug, 0s) both;
  }

  .zaehlwerk__band > span { height: var(--zelle); line-height: var(--zelle); }

  /* --- 14 Stempel (Titelseite, „Angekommen“) -------------------------------- */

  @keyframes stempeln {
    0%   { opacity: 0; scale: 2.3; rotate: -2deg; }
    55%  { opacity: 1; scale: 0.93; rotate: -10deg; }
    100% { opacity: 1; scale: 1; rotate: -9deg; }
  }

  .stempel {
    animation: stempeln 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) 0.9s both;
  }

  .angekommen__stempel { animation-delay: 0.35s; }

  /* --- 15 Papierstau --------------------------------------------------------
     Der Bogen ruckelt aus dem Einzug, rutscht zweimal zurück und bleibt schief
     hängen; die Cyan-Platte verrutscht dabei immer weiter.                */

  @keyframes stau {
    0%   { transform: translateY(-100%); rotate: 0deg; }
    28%  { transform: translateY(-52%);  rotate: 0.6deg; }
    34%  { transform: translateY(-56%);  rotate: 0.4deg; }
    62%  { transform: translateY(-14%);  rotate: 2.6deg; }
    68%  { transform: translateY(-17%);  rotate: 2.3deg; }
    100% { transform: none;              rotate: 3.2deg; }
  }

  @keyframes fehlpasser {
    from { translate: -5px -4px; }
  }

  .papierstau__bogen {
    animation: stau 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.15s backwards;
  }

  .papierstau .draw__plate--cyan {
    animation: fehlpasser 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s backwards;
  }

  /* --- 16 Hitzefrei (verstecktes Osterei) -----------------------------------
     Fünfmal schnell aufs Logo der Titelseite: die Schlagzeile schmilzt,
     osterei.js stempelt „Hitzefrei!“ darüber und räumt danach wieder auf. */

  @keyframes schmelzen {
    0%       { transform: none; }
    35%, 70% { transform: translateY(var(--fall, 12px)) skewX(-10deg) scaleY(1.28); }
    85%      { transform: translateY(-6px); }
    100%     { transform: none; }
  }

  .hitze__wort { white-space: nowrap; }

  .hitze__zeichen {
    display: inline-block;
    animation: schmelzen 1.8s cubic-bezier(0.5, 0, 0.3, 1) var(--verzug, 0s) both;
  }

  .hitze__stempel {
    position: absolute;
    right: 0;
    bottom: -0.4em;
    margin: 0;
    padding: 0.3rem 0.8rem;
    border: 3px solid var(--ink);
    background: var(--cyan);
    font-family: var(--font-head);
    font-size: var(--step-2);
    font-weight: 800;
    font-variation-settings: "wdth" 80;
    line-height: 1;
    text-transform: uppercase;
    rotate: -9deg;
    animation: stempeln 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) 0.7s both;
  }
}