/* Faden und Einblenden auf Unterseiten (src/scripts/page-thread.js) – dieselbe Bildsprache wie der
   Faden der Startseite (Lime-Linie, Knoten, Spitze, Punktraster), aber ohne Endlos-Animation.
   Nur auf Seiten mit motion: true (site-config.mjs). Ohne JS: kein Faden, Inhalt unverändert. */
:root { --page-raster: color-mix(in srgb, var(--line) 60%, transparent); }

/* Punktraster wie auf der Startseite; die abgesetzte Fläche behält ihren Grundton. */
.page-thread { position: relative; background-image: radial-gradient(circle, var(--page-raster) 1px, transparent 1.5px); background-size: 28px 28px; }
.page-thread .wrap { position: relative; z-index: 1; }
.page-thread .section-alt { background-color: color-mix(in srgb, var(--bg-2) 92%, transparent); }

.page-thread-svg { position: absolute; top: 0; left: 0; z-index: 2; overflow: visible; pointer-events: none; }
.page-thread-path, .page-thread-branch { fill: none; stroke: var(--lime); stroke-width: var(--thread-w); stroke-linecap: round; stroke-dasharray: 1; }
.page-thread-path { stroke-dashoffset: 1; transition: stroke-dashoffset 0.25s linear; }
.page-thread-branch { stroke-dashoffset: 1; transition: stroke-dashoffset 0.36s cubic-bezier(0.33, 1, 0.68, 1); }
.page-thread-branch.is-on { stroke-dashoffset: 0; }
.page-thread-node { fill: var(--bg); stroke: var(--line-2); stroke-width: 1.5px; transform-box: fill-box; transform-origin: center; transition: fill 0.3s ease, stroke 0.3s ease; }
.page-thread-node.is-on { fill: var(--lime); stroke: var(--lime); animation: page-node-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes page-node-pop { 50% { transform: scale(1.6); } }

/* Spitze: leuchtender Punkt an der Lesezeile; am Ziel blendet sie aus, der Knopf übernimmt. */
.page-thread-tip { position: absolute; top: 0; left: 0; z-index: 2; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--lime-2); box-shadow: 0 0 14px 4px color-mix(in srgb, var(--lime) 55%, transparent); pointer-events: none; transition: transform 0.25s linear, opacity 0.3s ease; }
.page-thread-tip.is-done { opacity: 0; }

/* Signal am Ziel: einmal ein Ring um den Knopf, wenn der Faden ankommt. */
.page-thread [data-thread-end] { position: relative; }
.page-thread [data-thread-end].is-signal::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 0 color-mix(in srgb, var(--lime) 70%, transparent); animation: page-signal 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; pointer-events: none; }
@keyframes page-signal { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lime) 70%, transparent); } to { box-shadow: 0 0 0 14px transparent; } }

/* Einblenden beim Hereinscrollen (nur mit JS und Bewegung: html.page-reveal-armed). */
.page-reveal-armed [data-reveal] { opacity: 0; translate: 0 16px; transition: opacity 0.6s cubic-bezier(0.33, 1, 0.68, 1), translate 0.6s cubic-bezier(0.33, 1, 0.68, 1); }
.page-reveal-armed [data-reveal].is-in { opacity: 1; translate: 0 0; }

/* Ruhige Fassung (reduzierte Bewegung, statisch gezeichnet): keine Übergänge. */
.page-thread.no-anim :is(.page-thread-path, .page-thread-branch, .page-thread-node, .page-thread-tip) { transition: none; animation: none; }
.page-thread.no-anim [data-thread-end].is-signal::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .page-thread-node.is-on, .page-thread [data-thread-end].is-signal::after { animation: none; }
  .page-reveal-armed [data-reveal] { opacity: 1; translate: none; transition: none; }
}