/* ==========================================================================
   motif.css — „Der Bruch in der Schleife".

   Die Striche stehen für die immer gleiche Handarbeit: gleichmässig, endlos,
   ohne Fortschritt. An einer Stelle bricht die Reihe ab und wird zu einer
   durchgehenden Linie. Das ist das Versprechen des Angebots als Bild.

   Der Ablauf ist bewusst einmalig und kurz — Dauerbewegung wirkt unruhig und
   ist genau die Art von Effekt, an der man automatisch erzeugte Seiten erkennt.
   ========================================================================== */

.motif {
  width: 100%;
  height: auto;
  overflow: visible;
  color: var(--ink-soft);
}

.motif-hero {
  max-width: 40rem;
}

.motif-divider {
  max-width: 20rem;
  margin-inline: auto;
  opacity: 0.7;
}

/* Auf der Bühne treten die Striche zurück, damit die Lime-Linie trägt. */
.stage .motif {
  color: var(--stage-ink-soft);
}

/* --------------------------------------------------------------------------
   Die Striche
   -------------------------------------------------------------------------- */

.motif-tick {
  opacity: 0.45;
  transform-box: fill-box;
  transform-origin: center;
}

/* --------------------------------------------------------------------------
   Die durchgehende Linie — der Bruch. Einzige Stelle im hellen Auftritt,
   an der Lime als Strich auf hellem Grund steht. Das ist zulässig, weil es
   kein Text ist: die Kontrastanforderung von 4,5:1 gilt für Schrift,
   Grafikelemente brauchen 3:1 und werden hier durch die Strichstärke von
   6 px getragen.
   -------------------------------------------------------------------------- */

.motif-line {
  stroke: var(--accent);
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent) 45%, transparent));
}

/* --------------------------------------------------------------------------
   Ablauf: Striche erscheinen von links nach rechts, dann zieht sich die
   Linie durch. Läuft genau einmal beim Laden.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .motif-tick {
    opacity: 0;
    animation: motif-tick-in 260ms var(--ease) forwards;
    animation-delay: calc(var(--i) * 34ms);
  }

  .motif-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: motif-line-draw 620ms var(--ease) forwards;
    /* Startet, sobald der letzte Strich gesetzt ist. */
    animation-delay: calc(var(--n) * 34ms + 160ms);
  }
}

@keyframes motif-tick-in {
  from {
    opacity: 0;
    transform: scaleY(0.35);
  }
  to {
    opacity: 0.45;
    transform: scaleY(1);
  }
}

@keyframes motif-line-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* --------------------------------------------------------------------------
   Das Zeichen der Wortmarke — dieselbe Idee auf kleinstem Raum.
   -------------------------------------------------------------------------- */

.brand-mark .mark-ticks {
  stroke: currentColor;
  opacity: 0.4;
}

.brand-mark .mark-line {
  stroke: var(--accent);
}