/* =================================================================
   SYNTHESE — Bewegungsschicht über css/minimal.css (zu js/synthese/*)

   Fünf Ideen aus fünf Entwürfen, zu einer ruhigen Sprache gefasst:
   Tonspur am Rand, Auftritt durch die Rosette, Messklammern an den
   Kanten, 1-Bit-Raster unter dem Zeiger, Federn in Name und Formen,
   und ein Seitenwechsel, bei dem die Form des Ziels zur nächsten Seite
   trägt. In Ruhe steht alles still; Bewegung antwortet dem Besucher.

   Zeitmasse (wie SX.T in js/synthese/kern.js):
     Antworten auf den Zeiger 150–300 ms · Auftritte ≤ 900 ms ·
     Wechsel: 220 ms auf der alten, 600 ms auf der neuen Seite.
   Kurve: var(--ease) der Grundfassung (abbremsend).

   Klassen auf <html> (js/synthese/vorlauf.js):
     .sx  .sx-ruhig  .sx-leicht  .sx-ankunft  .sx-landung  .sx-abgang
   ================================================================= */

/* ---------------------------------------------------------------
   Die drei ausgeschnittenen Formen — von Hand geschnitten: wenige
   gerade Schnitte, kleine Knicke, der Kreis aus Facetten. Derselbe
   Schnitt für den Punkt hinter dem Titel, die Form im Seitenwechsel,
   die Formen der Startseite und die Komposition im Kontakt
   (js/synthese/kern.js liest sie von hier).
   --------------------------------------------------------------- */
:root {
    --sx-p-quadrat: polygon(1.1% 0.4%, 28.0% 0.1%, 72.3% 0.4%, 99.3% 1.6%, 98.4% 43.8%, 98.6% 99.5%, 61.9% 98.8%, 36.7% 99.5%, 0.9% 98.8%, 0.7% 50.6%);
    --sx-p-kreis: polygon(48.4% 1.4%, 64.1% 2.7%, 72.8% 6.3%, 81.2% 11.7%, 90.4% 20.9%, 96.5% 30.9%, 100.0% 44.3%, 99.9% 55.5%, 97.6% 65.5%, 90.5% 78.7%, 84.4% 85.8%, 74.4% 92.4%, 62.0% 97.9%, 50.3% 99.4%, 38.5% 97.9%, 25.3% 93.0%, 18.1% 87.5%, 9.2% 79.1%, 3.8% 67.8%, 0.3% 56.6%, 0.9% 42.5%, 3.5% 32.7%, 10.1% 20.8%, 16.1% 14.6%, 27.3% 6.3%, 39.1% 2.3%);
    --sx-p-dreieck: polygon(51.4% 0.6%, 65.1% 30.5%, 80.8% 61.8%, 99.6% 98.7%, 40.9% 98.4%, 0.9% 99.2%, 15.5% 70.9%, 34.4% 32.6%);
    /* Grösse der Form im Seitenwechsel: unter einem Viertel des
       10°-Sehfelds (WCAG 2.3.1) — ihr Kommen und Gehen zählt nie als Blitz */
    --sx-gross: clamp(52px, min(10vh, 16vw), 88px);
}

/* ---------------------------------------------------------------
   Ruhe: was in der Grundfassung von selbst lief, steht still.
   --------------------------------------------------------------- */
/* Der farbige Schein hinter den Unterseiten atmet nicht mehr */
html.sx body:not([data-page="home"])::before { animation: none; opacity: 0.9; }
/* Die Komposition im Kontakt treibt nicht mehr — sie antwortet dem Zeiger */
html.sx .visual-composition > * { animation: none !important; filter: none !important; }
/* Bilder: das Raster ersetzt das Heranzoomen unter dem Zeiger */
html.sx .work-item:hover .work-image,
html.sx .vjing-item:hover img { transform: none; }

/* ---------------------------------------------------------------
   Der Punkt hinter dem Titel — die Form des Bereichs, ausgeschnitten.
   Portfolio und Projekte ■ rot, «Über mich» ● blau, Kontakt ▲ gelb,
   Impressum und Fehlerseite ■ in Tinte.
   --------------------------------------------------------------- */
.section-title::after { content: none; }
.sx-punkt {
    display: inline-block; vertical-align: baseline;
    width: 0.145em; height: 0.145em; margin-left: 0.14em;
    background: var(--accent-fill);
    clip-path: var(--sx-p-quadrat);
}
.project-title .sx-punkt { background: var(--red); }
body[data-page="about"] .sx-punkt {
    width: 0.165em; height: 0.165em;
    clip-path: var(--sx-p-kreis);
}
body[data-page="contact"] .sx-punkt {
    width: 0.19em; height: 0.17em;
    clip-path: var(--sx-p-dreieck);
}

/* ---------------------------------------------------------------
   SEITENWECHSEL (js/synthese/wechsel.js)
   Die Form in der Mitte: auf der alten Seite das Element .sx-flieger,
   auf der neuen im ersten Bild html.sx-ankunft::after an genau
   derselben Stelle — dann übernimmt das Skript.
   --------------------------------------------------------------- */
.sx-flieger,
html.sx-ankunft::after {
    position: fixed; z-index: 1200;
    left: calc(50vw - var(--sx-gross) / 2);
    top: calc(45vh - var(--sx-gross) / 2);
    width: var(--sx-gross); height: var(--sx-gross);
    pointer-events: none;
    background: var(--red);
    clip-path: var(--sx-p-quadrat);
    transform: rotate(-6deg);
    will-change: transform;
}
html.sx-ankunft::after { content: ""; }
.sx-flieger[data-sx-form="kreis"],
html.sx-ankunft[data-sx-form="kreis"]::after { clip-path: var(--sx-p-kreis); }
.sx-flieger[data-sx-form="dreieck"],
html.sx-ankunft[data-sx-form="dreieck"]::after { clip-path: var(--sx-p-dreieck); }
.sx-flieger[data-sx-farbe="blau"],
html.sx-ankunft[data-sx-farbe="blau"]::after { background: var(--blue); }
.sx-flieger[data-sx-farbe="gelb"],
html.sx-ankunft[data-sx-farbe="gelb"]::after { background: var(--yellow); }
.sx-flieger[data-sx-farbe="tinte"],
html.sx-ankunft[data-sx-farbe="tinte"]::after { background: var(--ink); }

/* Abgang: der Inhalt tritt zurück, die Navigation bleibt stehen */
html.sx-abgang :is(main, .footer, .sx-spur, .sx-tonkopf) {
    animation: sxAus 180ms cubic-bezier(0.4, 0, 1, 1) forwards !important;
    pointer-events: none;
}
@keyframes sxAus { to { opacity: 0; } }
html.sx-abgang .sx-klammern { opacity: 0 !important; }
/* … und zeigt schon die Farbe des Ziels (Quadrat im Logo, Unterstrich) */
.main-nav[data-sx-ziel]                     { --accent: var(--ink); --accent-fill: var(--ink); }
.main-nav:is([data-sx-ziel="work"], [data-sx-ziel="project"]) { --accent: var(--red); --accent-fill: var(--red); }
.main-nav[data-sx-ziel="about"]             { --accent: var(--blue); --accent-fill: var(--blue); }
.main-nav[data-sx-ziel="contact"]           { --accent: var(--accent-yellow); --accent-fill: var(--yellow); }

/* Ankunft: der Inhalt wartet einen Augenblick, dann kommt er herein,
   während die Form zum Titel gleitet */
html.sx-ankunft :is(main, .footer, .sx-spur, .sx-tonkopf) { opacity: 0; }
html.sx-landung :is(main, .footer) { animation: sxInhalt 460ms var(--ease) 60ms both; }
html.sx-landung :is(.sx-spur, .sx-tonkopf) { animation: sxInhalt 460ms var(--ease) 200ms both; }
html:is(.sx-landung, .sx-da) :is(.hero-kicker, .hero-title .title-line, .hero-subtitle, .hero-chord, .hero-cta, .sx-buehne) { animation: none; }
/* Nach der Landung: kein zweiter Auftritt (sonst begänne contentIn neu) */
html.sx-da :is(main, .footer, .sx-spur, .sx-tonkopf) { animation: none; }
@keyframes sxInhalt { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
/* Sicherung: kommt das Skript nicht, steht die Seite nach 1,2 s da */
html.sx-ankunft main { animation: sxSicher 1ms linear 1.2s forwards; }
html.sx-ankunft::after { animation: sxWeg 1ms linear 1.2s forwards; }
@keyframes sxSicher { to { opacity: 1; } }
@keyframes sxWeg { to { opacity: 0; } }

/* ---------------------------------------------------------------
   MESSKLAMMERN (js/synthese/zeiger.js)
   Vier Winkel an den Kanten des Ziels; Farbe des Bereichs.
   --------------------------------------------------------------- */
.sx-klammern {
    position: fixed; inset: 0; z-index: 1100;
    pointer-events: none; opacity: 0;
    --sx-arm: 9px; --sx-strich: 1.5px;
}
.sx-ecke {
    position: absolute; left: 0; top: 0;
    width: var(--sx-arm); height: var(--sx-arm);
    border: 0 solid var(--accent);
    will-change: transform;
}
.sx-ecke-lo { border-left-width: var(--sx-strich); border-top-width: var(--sx-strich); }
.sx-ecke-ro { border-right-width: var(--sx-strich); border-top-width: var(--sx-strich); margin-left: calc(-1 * var(--sx-arm)); }
.sx-ecke-ru { border-right-width: var(--sx-strich); border-bottom-width: var(--sx-strich); margin-left: calc(-1 * var(--sx-arm)); margin-top: calc(-1 * var(--sx-arm)); }
.sx-ecke-lu { border-left-width: var(--sx-strich); border-bottom-width: var(--sx-strich); margin-top: calc(-1 * var(--sx-arm)); }
/* Der Tastaturfokus trägt dieselben Klammern statt des Rahmens */
html.sx-klammern-an :is(a[href], button):focus-visible { outline-color: transparent; }
html.sx-klammern-an .work-link:focus-visible::after { outline-color: transparent; }

/* ---------------------------------------------------------------
   1-BIT-RASTER (js/synthese/zeiger.js) — liegt über dem Bild, unter
   der Nummer der Karte
   --------------------------------------------------------------- */
.project-gallery figure, .project-hero-img { position: relative; overflow: hidden; }
.sx-raster {
    position: absolute; left: 0; top: 0; z-index: 2;
    pointer-events: none;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

/* ---------------------------------------------------------------
   AUFTRITT durch die Rosette (js/synthese/rosette.js)
   Bis zum Auftritt deckt eine ruhige Fläche das Bild. Ohne Skript gibt
   die Sicherung es nach 2,4 s frei; mit Skript entscheidet der Auftritt.
   --------------------------------------------------------------- */
.project-media { position: relative; }
html.sx:not(.sx-ruhig) :is(.work-visual, .project-gallery figure, .vjing-item, .project-hero-img):not(.sx-offen)::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: var(--paper-deep);
    animation: sxAuf 0.4s ease 2.4s both;
}
html.sx:not(.sx-ruhig) .project-media:has(> .embed:not(.embed-spotify)):not(.sx-offen)::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: var(--paper-deep);
    animation: sxAuf 0.4s ease 2.4s both;
}
html.sx-rosette-an :is(.work-visual, .project-gallery figure, .vjing-item, .project-hero-img, .project-media):not(.sx-offen)::after { animation: none; }
@keyframes sxAuf { to { opacity: 0; } }
.sx-rosette {
    position: absolute; inset: 0; width: 100%; height: 100%;
    z-index: 2; pointer-events: none;
}

/* ---------------------------------------------------------------
   TONSPUR (js/synthese/tonspur.js) — am linken Rand, liegt im Dokument
   und scrollt mit; der Tonkopf steht fest auf halber Fensterhöhe.
   --------------------------------------------------------------- */
.sx-spur {
    position: absolute; top: 0; left: 6px; z-index: 5;
    pointer-events: none; display: none;
}
.sx-spur canvas { position: absolute; left: 0; display: block; }
.sx-tonkopf {
    position: fixed; top: 50vh; left: 2px; width: 22px; height: 0;
    z-index: 6; pointer-events: none; display: none;
}
body.sx-spur-an :is(.sx-spur, .sx-tonkopf) { display: block; }
.sx-tonkopf i {
    position: absolute; left: 0; right: 0; top: -0.5px; height: 1px;
    background: var(--ink); opacity: 0.5;
}
.sx-tonkopf i::before, .sx-tonkopf i::after {
    content: ""; position: absolute; top: -3px; width: 1px; height: 7px; background: var(--ink);
}
.sx-tonkopf i::before { left: 0; }
.sx-tonkopf i::after { right: 0; }

/* ---------------------------------------------------------------
   STARTSEITE — der Akkord aus Papier (js/synthese/federn.js)
   Die Platzhalter legen Lage und Grösse fest (auch ohne Skript als
   ausgeschnittene Formen sichtbar); mit Skript zeichnet ein SVG
   dieselben Schnitte als weiche Körper.
   --------------------------------------------------------------- */
.sx-buehne {
    position: absolute; inset: 0; z-index: 1;
    pointer-events: none;
    --g: min(20vw, 32vh);
}
.sx-form { position: absolute; display: block; }
.sx-kreis {
    width: var(--g); height: var(--g);
    left: calc(74% - var(--g) / 2); top: calc(38% - var(--g) / 2);
    background: var(--blue); clip-path: var(--sx-p-kreis);
}
.sx-quadrat {
    width: calc(var(--g) * 0.6); height: calc(var(--g) * 0.6);
    left: calc(85% - var(--g) * 0.3); top: calc(67% - var(--g) * 0.3);
    background: var(--red); clip-path: var(--sx-p-quadrat);
    transform: rotate(3deg);
}
.sx-dreieck {
    width: calc(var(--g) * 0.62); height: calc(var(--g) * 0.56);
    left: calc(67% - var(--g) * 0.31); top: calc(72% - var(--g) * 0.28);
    background: var(--yellow); clip-path: var(--sx-p-dreieck);
    transform: rotate(-4deg);
}
@media (max-width: 1000px) {
    .sx-buehne { --g: min(19vw, 22vh); }
    .sx-kreis { left: calc(84% - var(--g) / 2); top: calc(17% - var(--g) / 2); }
    .sx-quadrat { left: calc(90% - var(--g) * 0.3); top: calc(31% - var(--g) * 0.3); }
    .sx-dreieck { left: calc(77% - var(--g) * 0.31); top: calc(33% - var(--g) * 0.28); }
}
@media (max-width: 600px) {
    .sx-buehne { --g: min(22vw, 13vh); }
    .sx-kreis { left: calc(80% - var(--g) / 2); top: calc(11% - var(--g) / 2); }
    .sx-quadrat { left: calc(91% - var(--g) * 0.3); top: calc(19% - var(--g) * 0.3); }
    .sx-dreieck { left: calc(70% - var(--g) * 0.31); top: calc(20% - var(--g) * 0.28); }
}
.sx-buehne-an > .sx-form,
.sx-komp-an > :not(svg) { visibility: hidden; }
.sx-papier { position: absolute; left: 0; top: 0; overflow: visible; display: block; }
.sx-f-blau { fill: var(--blue); }
.sx-f-rot { fill: var(--red); }
.sx-f-gelb { fill: var(--yellow); }
.sx-f-akzent { fill: var(--accent-fill); }
.sx-f-kontur { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.sx-f-linie, .sx-f-linie-akzent { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: butt; }
.sx-f-linie-akzent { stroke: var(--accent-fill); }
.visual-composition .sx-papier { z-index: 1; }

/* Der Name: Buchstaben an Federn (nur mit Maus) */
.sx-zeichen { display: inline; }
.sx-b { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
    html.sx:not(.sx-landung):not(.sx-da) .sx-buehne { animation: sxBuehne 1.1s var(--ease) 0.35s both; }
}
@keyframes sxBuehne { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------
   Rücksicht
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .sx-flieger, html.sx-ankunft::after { display: none; }
}
@media print {
    .sx-spur, .sx-tonkopf, .sx-klammern, .sx-flieger, .sx-raster, .sx-rosette { display: none !important; }
}