/* ==========================================================================
   GRVTY Transit – Seitenübergänge (Micro-Industrial)
   Ablauf:  1. Ausgang  – die alte Seite spielt ihre eigene Choreografie (html.is-leaving[data-leave])
            2. Blende   – Overlay schließt sich, Form je nach ZIEL (html[data-transit="in"])
            3. Halten   – neue Seite startet verdeckt (html[data-transit="hold"], gesetzt im <head>)
            4. Öffnen   – Overlay gibt die Seite frei (html[data-transit="out"])
            5. Eingang  – die neue Seite baut sich auf (html.is-entering[data-arrive])
   Ziele mit Platte (→ Song) fliegen stattdessen mit der Platte (View Transition „Morph“).
   Logik: assets/js/transit.js · Kopf-Skript: inc/setup.php
   ========================================================================== */
:root {
	--tr-mech: cubic-bezier(.77, 0, .175, 1);
	--tr-out: cubic-bezier(.7, 0, .84, 0);
	--tr-in: cubic-bezier(.16, 1, .3, 1);
	--tr-line: color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent);
}

/* ---------- Overlay ---------- */
.g-transit { position: fixed; inset: 0; z-index: 9800; pointer-events: none; visibility: hidden; color: var(--wp--preset--color--contrast); }
html[data-transit] .g-transit { visibility: visible; pointer-events: auto; cursor: progress; }
.g-transit__panel,
.g-transit__slats i { background: var(--wp--preset--color--base); }
.g-transit__panel { position: absolute; inset: 0; clip-path: inset(0 0 100% 0); }
.g-transit__slats { position: absolute; inset: 0; display: flex; flex-direction: column; }
.g-transit__slats i { flex: 1; display: block; transform: scaleX(0); transform-origin: left center; margin: -.5px 0; }
/* Fadenkreuze in den Ecken */
.g-transit__x { position: absolute; width: 14px; height: 14px; opacity: 0; }
.g-transit__x::before, .g-transit__x::after { content: ""; position: absolute; background: var(--wp--preset--color--contrast); }
.g-transit__x::before { left: 0; right: 0; top: 50%; height: 1px; }
.g-transit__x::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.g-transit__x--tl { left: var(--g-gutter, 24px); top: calc(var(--g-header-h, 80px) + 8px); }
.g-transit__x--tr { right: var(--g-gutter, 24px); top: calc(var(--g-header-h, 80px) + 8px); }
.g-transit__x--bl { left: var(--g-gutter, 24px); bottom: 24px; }
.g-transit__x--br { right: var(--g-gutter, 24px); bottom: 24px; }

/* HUD: Ziel-Name groß, Messzeile darüber, Pfad + Ladebalken darunter */
.g-transit__hud { position: absolute; left: var(--g-gutter, 24px); right: var(--g-gutter, 24px); top: 50%; transform: translateY(-50%); display: grid; gap: clamp(.75rem, 2vh, 1.25rem); }
.g-transit__top, .g-transit__meta { display: flex; align-items: center; gap: 1rem; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--s); letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--contrast-2); }
.g-transit__num { color: var(--wp--preset--color--contrast); font-variant-numeric: tabular-nums; }
.g-transit__label { overflow: hidden; padding-bottom: .06em; }
.g-transit__word { display: block; font-family: var(--wp--preset--font-family--display); text-transform: uppercase; font-size: var(--wp--preset--font-size--display); line-height: .95; letter-spacing: -.02em; overflow-wrap: anywhere; transform: translateY(110%); }
.g-transit__bar { flex: 1; height: 1px; background: var(--tr-line); position: relative; overflow: hidden; }
.g-transit__bar i { position: absolute; inset: 0; background: var(--wp--preset--color--contrast); transform: scaleX(0); transform-origin: left; }
.g-transit__top > *, .g-transit__meta > * { opacity: 0; }

/* ---------- Zustand: Blende schließt (alte Seite) ---------- */
html[data-transit="in"] .g-transit__x { animation: tr-blink .3s steps(2, end) .5s both; }
html[data-transit="in"] .g-transit__word { animation: tr-word-in .55s var(--tr-in) .42s both; }
html[data-transit="in"] :is(.g-transit__top, .g-transit__meta) > * { animation: tr-blink .25s steps(2, end) calc(.48s + var(--k, 0) * 40ms) both; }
html[data-transit="in"] .g-transit__bar i { animation: tr-bar 1.6s cubic-bezier(.2, .7, .2, 1) .6s both; }

/* ---------- Zustand: gehalten (neue Seite, erster Frame identisch zum letzten der alten) ---------- */
html[data-transit="hold"] .g-transit__x,
html[data-transit="hold"] :is(.g-transit__top, .g-transit__meta) > * { opacity: 1; }
html[data-transit="hold"] .g-transit__word { transform: none; }
html[data-transit="hold"] .g-transit__bar i { transform: scaleX(.55); animation: tr-bar-hold 2s cubic-bezier(.2, .7, .2, 1) both; }
html[data-transit="hold"] .g-transit__panel { clip-path: inset(0 0 0 0); }
html[data-transit="hold"] .g-transit__slats i { transform: none; }

/* ---------- Zustand: Blende öffnet (neue Seite) ---------- */
html[data-transit="out"] .g-transit__bar i { transform: scaleX(1); transition: transform .2s var(--tr-in); }
html[data-transit="out"] .g-transit__word { animation: tr-word-out .38s var(--tr-out) .05s both; }
html[data-transit="out"] :is(.g-transit__top, .g-transit__meta) > *,
html[data-transit="out"] .g-transit__x { opacity: 1; animation: tr-blink-out .2s steps(2, end) .1s both; }

/* ==========================================================================
   Blenden-Formen je Ziel (data-transit-to)
   ========================================================================== */
/* Panel-Formen: Slats aus */
html:not([data-transit-to="index"]):not([data-transit-to="archive"]) .g-transit__slats { display: none; }
html:is([data-transit-to="index"], [data-transit-to="archive"]) .g-transit__panel { display: none; }

/* Records (Start): Iris wie ein Objektiv – schließt zur Mitte, öffnet sich wieder */
html[data-transit="in"][data-transit-to="home"] .g-transit__panel { animation: tr-iris-close .62s var(--tr-mech) .12s both; }
html[data-transit="out"][data-transit-to="home"] .g-transit__panel { animation: tr-iris-open .9s var(--tr-mech) .3s both; }
@keyframes tr-iris-close { from { clip-path: circle(0% at 50% 52%); } to { clip-path: circle(150% at 50% 52%); } }
@keyframes tr-iris-open { from { clip-path: circle(150% at 50% 52%); } to { clip-path: circle(0% at 50% 52%); } }

/* Index: horizontale Lamellen – fahren von links ein, nach rechts ab (wie Tabellenzeilen) */
html[data-transit-to="index"] .g-transit__slats i { transition: none; }
html[data-transit="in"][data-transit-to="index"] .g-transit__slats i { animation: tr-slat-x-in .5s var(--tr-mech) calc(.1s + var(--s) * 38ms) both; }
html[data-transit="out"][data-transit-to="index"] .g-transit__slats i { transform-origin: right center; animation: tr-slat-x-out .55s var(--tr-mech) calc(.3s + var(--s) * 38ms) both; }
@keyframes tr-slat-x-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tr-slat-x-out { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Archiv (Typ/Genre): vertikale Lamellen – fallen von oben, ziehen nach unten ab */
html[data-transit-to="archive"] .g-transit__slats { flex-direction: row; }
html[data-transit-to="archive"] .g-transit__slats i { margin: 0 -.5px; transform-origin: center top; transform: scaleY(0); }
html[data-transit="in"][data-transit-to="archive"] .g-transit__slats i { animation: tr-slat-y-in .5s var(--tr-mech) calc(.1s + var(--s) * 34ms) both; }
html[data-transit="hold"][data-transit-to="archive"] .g-transit__slats i { transform: none; }
html[data-transit="out"][data-transit-to="archive"] .g-transit__slats i { transform-origin: center bottom; animation: tr-slat-y-out .55s var(--tr-mech) calc(.3s + var(--s) * 34ms) both; }
@keyframes tr-slat-y-in { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes tr-slat-y-out { from { transform: scaleY(1); } to { transform: scaleY(0); } }

/* Song (ohne Platten-Flug): Kreis wächst aus dem Klickpunkt, öffnet sich zur Mitte (Platte) */
html[data-transit="in"][data-transit-to="song"] .g-transit__panel { animation: tr-dot-in .65s var(--tr-mech) .1s both; }
html[data-transit="out"][data-transit-to="song"] .g-transit__panel { animation: tr-iris-open .85s var(--tr-mech) .3s both; }
@keyframes tr-dot-in { from { clip-path: circle(0% at var(--tr-x, 50%) var(--tr-y, 50%)); } to { clip-path: circle(150% at var(--tr-x, 50%) var(--tr-y, 50%)); } }

/* About: Horizont steigt von unten auf (Planet), Seite wird nach oben freigegeben */
html[data-transit="in"][data-transit-to="about"] .g-transit__panel { animation: tr-horizon-in .75s var(--tr-mech) .1s both; }
html[data-transit="out"][data-transit-to="about"] .g-transit__panel { animation: tr-lift-out .85s var(--tr-mech) .3s both; }
@keyframes tr-horizon-in { from { clip-path: ellipse(0% 0% at 50% 130%); } to { clip-path: ellipse(160% 160% at 50% 130%); } }
@keyframes tr-lift-out { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }

/* Rechtliches: Papiereinzug – Blatt von unten, läuft nach oben durch */
html[data-transit="in"][data-transit-to="legal"] .g-transit__panel { animation: tr-feed-in .55s var(--tr-mech) .1s both; }
html[data-transit="out"][data-transit-to="legal"] .g-transit__panel { animation: tr-lift-out .6s var(--tr-mech) .3s both; }
@keyframes tr-feed-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Sonstige Seiten: schräger Schnitt von links nach rechts */
html[data-transit="in"][data-transit-to="page"] .g-transit__panel { animation: tr-slant-in .6s var(--tr-mech) .1s both; }
html[data-transit="out"][data-transit-to="page"] .g-transit__panel { animation: tr-slant-out .7s var(--tr-mech) .3s both; }
@keyframes tr-slant-in { from { clip-path: polygon(0 0, 0 0, -25% 100%, -25% 100%); } to { clip-path: polygon(0 0, 125% 0, 100% 100%, -25% 100%); } }
@keyframes tr-slant-out { from { clip-path: polygon(0 0, 125% 0, 100% 100%, -25% 100%); } to { clip-path: polygon(125% 0, 125% 0, 100% 100%, 100% 100%); } }

/* 404: Signal bricht ab */
html[data-transit="in"][data-transit-to="error"] .g-transit__panel { animation: tr-signal .4s steps(4, end) .1s both; }
html[data-transit="out"][data-transit-to="error"] .g-transit__panel { animation: tr-signal .4s steps(4, end) .3s reverse both; }
@keyframes tr-signal { 0% { clip-path: inset(48% 0 48% 0); } 50% { clip-path: inset(20% 0 70% 0); } 75% { clip-path: inset(0 0 30% 0); } 100% { clip-path: inset(0 0 0 0); } }

@keyframes tr-blink { 0% { opacity: 0; } 50% { opacity: .35; } 100% { opacity: 1; } }
@keyframes tr-blink-out { 0% { opacity: 1; } 50% { opacity: .35; } 100% { opacity: 0; } }
@keyframes tr-word-in { from { transform: translateY(110%); } to { transform: none; } }
@keyframes tr-word-out { from { transform: none; } to { transform: translateY(-110%); } }
@keyframes tr-bar { from { transform: scaleX(0); } to { transform: scaleX(.55); } }
@keyframes tr-bar-hold { from { transform: scaleX(.55); } to { transform: scaleX(.92); } }

/* ==========================================================================
   AUSGÄNGE – die alte Seite spielt ihre eigene Choreografie
   Elemente im Sichtbereich bekommen per JS .g-x + --o (Reihenfolge).
   ========================================================================== */
html.is-leaving { pointer-events: none; }
html.is-leaving .g-x { transition-property: opacity, transform, filter, clip-path, letter-spacing; transition-duration: .55s; transition-timing-function: var(--tr-out); transition-delay: calc(var(--o, 0) * 32ms); }
/* Geteilte Überschriften: Zeichen lösen sich nach oben auf (rückwärts) */
html.is-leaving .g-split.is-in .g-ch,
html.is-leaving .g-split .g-ch { opacity: 0; filter: blur(12px); transform: translateY(-.45em); transition-duration: .45s; transition-timing-function: var(--tr-out); transition-delay: calc(var(--i, 0) * 14ms); }
/* Footer (falls sichtbar): sinkt weg */
html.is-leaving .g-footer .g-x { opacity: 0; transform: translateY(1.5rem); filter: blur(6px); }

/* Records (Start): Infos wischen weg, das Karussell fällt in die Tiefe */
html.is-leaving[data-leave="home"] .g-records__stage { transition: transform .85s var(--tr-mech), filter .85s var(--tr-mech), opacity .7s var(--tr-out) .1s; transform: scale(.78) translateY(4vh); filter: blur(18px) saturate(.4); opacity: 0; }
html.is-leaving[data-leave="home"] .g-records__glow { transition: opacity .6s var(--tr-out); opacity: 0; }

/* Index / Archiv: Zeilen werden nacheinander nach rechts ausgestrichen */
html.is-leaving:is([data-leave="index"], [data-leave="archive"]) .g-index__row.g-x { clip-path: inset(0 0 0 100%); transform: translateX(2rem); transition-duration: .5s; transition-timing-function: var(--tr-mech); transition-delay: calc(var(--o, 0) * 28ms); }
html.is-leaving:is([data-leave="index"], [data-leave="archive"]) :is(.g-index__aside, .g-index__filter) { transition: opacity .3s var(--tr-out), filter .3s var(--tr-out); opacity: 0; filter: blur(8px); }
html.is-leaving:is([data-leave="index"], [data-leave="archive"]) .g-index__float { opacity: 0; transition: opacity .2s; }
/* … außer der Zeile, deren Platte gleich weiterfliegt */
html.is-leaving .g-index__row.is-picked { clip-path: none !important; transform: translateX(1rem) !important; color: var(--song-accent); }

/* Song: Titel löst sich auf, Zeilen wischen weg, Bühne sinkt, Platte dreht hoch */
html.is-leaving[data-leave="song"] .g-song-hero__rows > div { transition: clip-path .5s var(--tr-mech); clip-path: inset(0 0 0 100%); transition-delay: calc(var(--r, 0) * 50ms); }
html.is-leaving[data-leave="song"] :is(.g-song-hero__credit, .g-song-hero__back, .g-song-hero__cta, .g-song-hero__rule) { transition: opacity .35s var(--tr-out), filter .35s var(--tr-out); opacity: 0; filter: blur(8px); }
html.is-leaving[data-leave="song"] .g-song-hero__stage { transition: transform .8s var(--tr-mech), opacity .6s var(--tr-out) .15s, filter .8s var(--tr-mech); transform: translateY(10vh) scale(.94); opacity: 0; filter: blur(10px); }
html.is-leaving[data-leave="song"] .g-song-hero__disc { transition: transform .8s var(--tr-mech); transform: scale(.6) rotate(-140deg); }
html.is-leaving[data-leave="song"] .g-x:not(.g-song-hero *) { opacity: 0; transform: translateY(-1.5rem); filter: blur(8px); }

/* About: Bilder zoomen ins All, Überschriften dehnen sich auf, Text steigt weg */
html.is-leaving[data-leave="about"] .g-x--media { transition-duration: .9s; transition-timing-function: var(--tr-mech); transform: scale(1.18); filter: blur(22px) brightness(.35); opacity: 0; }
html.is-leaving[data-leave="about"] .g-x--head { letter-spacing: .35em; filter: blur(14px); opacity: 0; transition-duration: .7s; }
html.is-leaving[data-leave="about"] .g-x--text { transform: translateY(-2rem); filter: blur(6px); opacity: 0; }

/* Rechtliches: Zeilen werden wie Papier nach links ausgezogen */
html.is-leaving[data-leave="legal"] .g-x:not(.g-footer *) { clip-path: inset(0 100% 0 0); transform: translateX(-1rem); transition-duration: .42s; transition-timing-function: var(--tr-mech); transition-delay: calc(var(--o, 0) * 22ms); }

/* Sonstige Seiten / 404 */
html.is-leaving[data-leave="page"] .g-x:not(.g-footer *) { opacity: 0; transform: translateY(-1.25rem); filter: blur(8px); }
html.is-leaving[data-leave="error"] .g-x:not(.g-footer *) { opacity: 0; transition-timing-function: steps(3, end); }

/* ==========================================================================
   EINGÄNGE – die neue Seite baut sich auf, während die Blende öffnet
   ========================================================================== */
/* Index: Zeilen werden von links eingeschrieben */
html.is-entering[data-arrive="index"] .g-index__row.g-x { animation: tr-row-write .7s var(--tr-mech) calc(.25s + var(--o, 0) * 45ms) both; }
@keyframes tr-row-write { from { clip-path: inset(0 100% 0 0); transform: translateX(-1.5rem); } to { clip-path: inset(0 0 0 0); transform: none; } }
/* Archiv: Zeilen fallen von oben ein (wie die Lamellen) */
html.is-entering[data-arrive="archive"] .g-index__row.g-x { animation: tr-row-drop .65s var(--tr-in) calc(.3s + var(--o, 0) * 40ms) both; }
@keyframes tr-row-drop { from { opacity: 0; transform: translateY(-1.25rem); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }

/* About: aus dem All heranzoomen, Überschriften ziehen sich zusammen */
html.is-entering[data-arrive="about"] .g-x--media { animation: tr-zoom-land 1.6s var(--tr-in) .15s both; }
html.is-entering[data-arrive="about"] .g-x--head { animation: tr-tighten 1.2s var(--tr-in) calc(.35s + var(--o, 0) * 60ms) both; }
html.is-entering[data-arrive="about"] .g-x--text { animation: tr-rise .9s var(--tr-in) calc(.5s + var(--o, 0) * 50ms) both; }
@keyframes tr-zoom-land { from { transform: scale(1.22); filter: blur(24px) brightness(.4); } to { transform: none; filter: none; } }
@keyframes tr-tighten { from { letter-spacing: .4em; filter: blur(16px); opacity: 0; } }
@keyframes tr-rise { from { opacity: 0; transform: translateY(2.5rem); filter: blur(6px); } }

/* Rechtliches: Zeilen werden von unten eingezogen */
html.is-entering[data-arrive="legal"] .g-x { animation: tr-feed-line .6s var(--tr-mech) calc(.3s + var(--o, 0) * 30ms) both; }
@keyframes tr-feed-line { from { clip-path: inset(100% 0 0 0); transform: translateY(1rem); } to { clip-path: inset(0 0 0 0); transform: none; } }

/* Sonstige Seiten / 404 */
html.is-entering[data-arrive="page"] .g-x { animation: tr-rise .8s var(--tr-in) calc(.3s + var(--o, 0) * 45ms) both; }
html.is-entering[data-arrive="error"] .g-x { animation: tr-blink .4s steps(3, end) calc(.3s + var(--o, 0) * 40ms) both; }

/* Bewegung reduziert: kein Overlay, keine Choreografie */
@media (prefers-reduced-motion: reduce) {
	.g-transit { display: none !important; }
}