/**
 * Scroll-Linien-System (Briefing §5.4).
 *
 * Blöcke deklarieren ihre Linien-Segmente via data-line-Attribut:
 *   <section class="block" data-line="top,left">
 *
 * Vokabular (Start-Set, wird bei Bedarf erweitert):
 *   top              Horizontale Linie oben, volle Blockbreite
 *   top-indent-start Horizontale Linie oben, beginnt erst bei --line-start
 *   top-indent-end   Horizontale Linie oben, endet bei --line-end
 *   bottom           Horizontale Linie unten
 *   left             Vertikale Linie links, volle Blockhöhe
 *   right            Vertikale Linie rechts
 *   L-top-left       L-Form oben-links (Hero-Rahmen)
 *   L-bottom-right   L-Form unten-rechts (Hero-Rahmen)
 *
 * Animation: sichtbarkeits-getriggert via IntersectionObserver →
 *            .is-drawn auf dem Block-Wrapper.
 * Reduced-Motion: Linien erscheinen sofort final.
 */

[data-line] {
    position: relative;
}

[data-line] > .block__line {
    position: absolute;
    background-color: var(--color-line);
    pointer-events: none;
    transition:
        transform var(--duration-line) var(--ease-out),
        opacity var(--duration-line) var(--ease-out);
    will-change: transform;
}

/* ── Horizontale Linien ────────────────────────── */

[data-line~="top"] > .block__line--top,
[data-line~="top-indent-start"] > .block__line--top,
[data-line~="top-indent-end"] > .block__line--top {
    top: 0;
    height: var(--line-stroke);
    left: var(--line-start, 0%);
    right: calc(100% - var(--line-end, 100%));
    transform-origin: left center;
    transform: scaleX(0);
}

[data-line~="bottom"] > .block__line--bottom {
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--line-stroke);
    transform-origin: left center;
    transform: scaleX(0);
}

/* ── Vertikale Linien ──────────────────────────── */

[data-line~="left"] > .block__line--left {
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--line-stroke);
    transform-origin: center top;
    transform: scaleY(0);
}

[data-line~="right"] > .block__line--right {
    right: 0;
    top: 0;
    bottom: 0;
    width: var(--line-stroke);
    transform-origin: center top;
    transform: scaleY(0);
}

/* ── L-Form: oben-links (Hero-Rahmen) ──────────────
 *  Breite der horizontalen Linie: --line-tl-w (default 100%)
 *  Höhe der vertikalen Linie:     --line-tl-h (default 100%)
 *  Optional über --line-tl-top / --line-tl-left verschiebbar. */

[data-line~="L-top-left"] > .block__line--l-top {
    top: var(--line-tl-top, 0);
    left: var(--line-tl-left, 0);
    width: var(--line-tl-w, 100%);
    height: var(--line-stroke);
    transform-origin: left center;
    transform: scaleX(0);
}

[data-line~="L-top-left"] > .block__line--l-left {
    top: var(--line-tl-top, 0);
    left: var(--line-tl-left, 0);
    width: var(--line-stroke);
    height: var(--line-tl-h, 100%);
    transform-origin: center top;
    transform: scaleY(0);
    transition-delay: var(--duration-line);
}

/* ── L-Form: unten-rechts ──────────────────────────
 *  Breite der horizontalen Linie: --line-br-w (default 100%)
 *  Höhe der vertikalen Linie:     --line-br-h (default 100%)
 *  Optional über --line-br-bottom / --line-br-right verschiebbar. */

[data-line~="L-bottom-right"] > .block__line--l-bottom {
    bottom: var(--line-br-bottom, 0);
    right: var(--line-br-right, 0);
    width: var(--line-br-w, 100%);
    height: var(--line-stroke);
    transform-origin: right center;
    transform: scaleX(0);
}

[data-line~="L-bottom-right"] > .block__line--l-right {
    bottom: var(--line-br-bottom, 0);
    right: var(--line-br-right, 0);
    width: var(--line-stroke);
    height: var(--line-br-h, 100%);
    transform-origin: center bottom;
    transform: scaleY(0);
    transition-delay: var(--duration-line);
}

/* ── Getriggerter Endzustand ───────────────────── */

[data-line].is-drawn > .block__line {
    transform: scaleX(1) scaleY(1);
    opacity: 1;
}

/* Ohne Animation (initialer Viewport-Reset, s. scroll-line.js) */
[data-line].no-animation > .block__line {
    transition: none !important;
}

/* ── Reduced-Motion: sofort final zeichnen ─────── */

@media (prefers-reduced-motion: reduce) {
    [data-line] > .block__line {
        transition: none !important;
        transform: scaleX(1) scaleY(1) !important;
    }
}

/* ── Linien-Farb-Varianten (Kontext-spezifisch) ─ */

[data-line-color="press"] > .block__line {
    background-color: var(--color-line-press);
}

[data-line-color="events"] > .block__line {
    background-color: var(--color-line-events);
}

/* ──────────────────────────────────────────────────
 * Polyline-Variante (für komplexe Linien-Formen)
 *
 * Block markiert sich mit data-line="polyline" und rendert ein inline-SVG
 * mit Klasse .block__line-svg > polyline.block__line-path[pathLength="1"].
 * Die Polyline nimmt Koordinaten in 0–100 (ViewBox) und wird über das ganze
 * Block-Rechteck gestreckt. `vector-effect: non-scaling-stroke` hält die
 * Strichstärke konstant. Animation via stroke-dashoffset 1 → 0.
 * ────────────────────────────────────────────────── */

[data-line~="polyline"] {
    position: relative;
}

.block__line-svg {
    position: absolute;
    top: var(--line-start-y-px, 0);
    left: 0;
    width: 100%;
    height: calc(100% - var(--line-start-y-px, 0px));
    color: var(--color-line);
    pointer-events: none;
    overflow: visible;

    /* Über dem Block-Content (Bild, Teaser), aber klar unter Header (--z-header: 500). */
    z-index: 2;
}

[data-line-color="press"] .block__line-svg  { color: var(--color-line-press); }
[data-line-color="events"] .block__line-svg { color: var(--color-line-events); }

/* Modifier: Linie horizontal spiegeln — Zeichen-Richtung läuft von
 * rechts nach links, die Geometrie wird an der vertikalen Achse
 * gespiegelt. Pfad-Koordinaten im Feld-Editor bleiben intuitiv
 * (links → rechts) und werden visuell gedreht. */
.block--line-mirror .block__line-svg {
    transform: scaleX(-1);
    transform-origin: center center;
}

.block__line-path {
    fill: none;
    stroke: currentColor;
    stroke-width: var(--line-stroke);
    stroke-linecap: square;
    stroke-linejoin: miter;
    vector-effect: non-scaling-stroke;

    /* --path-length wird von scroll-line.js als Screen-Pixel-Wert gesetzt
     * (Fallback 2000px deckt übliche Block-Größen ab, falls JS noch nicht lief). */
    stroke-dasharray: var(--path-length, 2000px);
    stroke-dashoffset: var(--path-length, 2000px);
    transition: stroke-dashoffset var(--duration-line) var(--ease-out);
}

[data-line~="polyline"].is-drawn .block__line-path {
    stroke-dashoffset: 0;
}

/* Scroll-linked Modus: dashoffset wird direkt vom JS via --scroll-progress
 * (0–1) gesteuert. Keine Transition — Linie folgt dem Scroll 1:1.
 *
 * --scroll-progress-min (0–1, default 0): Initialer Sichtbarkeitsanteil
 * der Linie bevor gescrollt wird. Beispiel: 0.5 = Linie ist beim Page-Load
 * bereits zur Hälfte gezeichnet, der Rest baut sich beim Scrollen auf. */
[data-line-scroll] .block__line-path {
    --scroll-progress: 0;
    --scroll-progress-min: 0;
    stroke-dashoffset: calc(
        var(--path-length, 2000px)
        * (1 - var(--scroll-progress-min))
        * (1 - var(--scroll-progress))
    );
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .block__line-path {
        transition: none !important;
        stroke-dashoffset: 0 !important;
    }
}