/* ==========================================================================
   Vinyl-Karussell
   ========================================================================== */
.g-records {
	--disc: 56vmin;
	--g-info-top: calc(var(--g-header-h) + var(--wp--preset--spacing--30));
	--tilt: 54deg;
	position: relative;
	min-height: 100svh;
	overflow: hidden;
	isolation: isolate;
	color: var(--wp--preset--color--contrast);
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;
}

/* ---------- Ambient: weichgezeichnetes Cover als Farblicht ---------- */
/* Ein Layer pro Platte, von view.js vorab weichgezeichnet (160 px Canvas, nur skaliert).
   Kein filter: blur() mehr auf riesiger Fläche, kein Bildwechsel während der Bewegung.
   --w (0–1) und die Verschiebung kommen pro Frame aus der Karussell-Position –
   das Licht fährt exakt mit den Platten mit und rastet mit ihnen ein. */
.g-records__glow { --glow-o: .45; position: absolute; inset: -20%; z-index: -1; pointer-events: none; }
.g-records__glow canvas {
	position: absolute; left: 50%; top: 50%;
	width: 100%; height: auto; aspect-ratio: 1;
	opacity: calc(var(--w, 0) * var(--glow-o));
	transform: translate(-50%, -50%);
	will-change: opacity, transform;
}

/* ---------- Info oben links ---------- */
.g-records__info {
	position: absolute; z-index: 5;
	top: var(--g-info-top); left: var(--g-gutter);
	width: min(34rem, calc(100% - 2 * var(--g-gutter)));
}
.g-records__title {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.02; text-transform: uppercase; font-weight: 400; letter-spacing: -.015em;
	/* Immer genau eine Zeile: feste Höhe, kein Umbruch. view.js verkleinert die Schrift,
	   wenn ein Titel breiter ist als die Info-Spalte – so liegen Titel und Box auf jeder Seite gleich. */
	height: calc(var(--wp--preset--font-size--display) * 1.02); white-space: nowrap;
	display: flex; align-items: center;
}
.g-records__title a { color: inherit; text-decoration: none; }
.g-records__title a[href]:hover { color: var(--song-accent); }
.g-records__rows dd { font-size: var(--wp--preset--font-size--m); }
.g-records__open { margin-top: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--s); padding: .7em 1.2em; }
.g-records__open[hidden] { display: none; }

/* ---------- Bühne ---------- */
.g-records__stage { position: absolute; inset: 0; perspective: 1700px; perspective-origin: 50% 40%; }
.g-records__track { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; transform-style: preserve-3d; }
.g-records__item {
	position: absolute; left: 50%; top: 50%;
	width: var(--disc); aspect-ratio: 1;
	transform-style: preserve-3d;
	will-change: transform, opacity;
	transform: translate(-50%, -50%);
}
.g-records__link { display: block; width: 100%; height: 100%; transform-style: preserve-3d; border-radius: 50%; color: inherit; outline: none; cursor: pointer; }
.g-records__link:focus-visible :is(.g-vinyl, .g-card) { box-shadow: 0 0 0 3px var(--wp--preset--color--accent); }
/* Karten ohne Detailseite sind <button>; Karten-Variante hat keinen runden Klickbereich */
button.g-records__link { padding: 0; border: 0; background: none; font: inherit; text-align: inherit; }
.g-records--cards .g-records__link { border-radius: 0; }
.g-records.is-dragging .g-records__link { cursor: grabbing; }
/* Nachbarn abdunkeln per Overlay statt filter: ein filter auf .g-vinyl macht die
   Platte flach (kein preserve-3d) und muss bei jedem Wechsel neu gerastert werden.
   --dim kommt pro Frame aus view.js (0 = aktiv, steigt mit dem Abstand) – dadurch
   hellt die Platte genau im Takt der Bewegung auf, ohne eigene Transition. */
.g-records .g-vinyl::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	/* fast schwarz, leicht kühl – nimmt den Covern Leuchtkraft, ohne grau zu wirken */
	background: #05060a; opacity: var(--dim, 0); pointer-events: none;
	transform: translateZ(.5px);
	-webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 2.1%, #000 2.25%);
	mask: radial-gradient(circle at 50% 50%, transparent 0 2.1%, #000 2.25%);
}
/* Karte: dieselbe Abdunklung, quadratisch und ohne Mittelloch */
.g-records .g-card::after {
	content: ""; position: absolute; inset: 0;
	background: #05060a; opacity: var(--dim, 0); pointer-events: none;
	transform: translateZ(.5px);
}

/* Handgezeichneter Kreis um die aktive Platte
   – liegt in der 3D-Ebene der Platte (folgt Neigung & Perspektive exakt)
   – zeichnet sich ein, wischt beim Weiterblättern weg
   – „Line Boil“: drei Zeichnungen wechseln im Stop-Motion-Takt (~8 fps) */
.g-records__scribble {
	position: absolute; left: -15%; top: -15%; width: 130%; height: 130%;
	overflow: visible; pointer-events: none;
	transform: translateZ(9px);
}
/* Micro-Industrial: 1px-Haarlinien, exakte Geometrie, mechanische Bewegung */
.g-records__scribble circle,
.g-records__scribble path,
.g-records__scribble rect.g-ring__line {
	fill: none; stroke: var(--song-accent);
	stroke-width: 1; vector-effect: non-scaling-stroke;
	stroke-linecap: butt; shape-rendering: geometricPrecision;
}
.g-records__scribble .g-ring__index { fill: var(--song-accent); }
/* Hauptring: zieht sich gleichmäßig auf wie eine Messnadel */
.g-records__scribble .g-ring__line {
	/* ohne non-scaling-stroke, sonst rechnet das Dash-Muster in Pixeln statt in pathLength */
	vector-effect: none; stroke-width: .34;
	stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: .9;
	transition: stroke-dashoffset 1.1s cubic-bezier(.65, 0, .35, 1), stroke .6s var(--g-ease);
}
.g-records__scribble .g-ring__ticks { opacity: .5; }
/* Skala, Fadenkreuze und Zeiger rasten nach dem Ring gestaffelt ein */
.g-records__scribble .g-ring__scale,
.g-records__scribble .g-ring__cross,
.g-records__scribble .g-ring__orbit { opacity: 0; transition: opacity .2s steps(2, end); }
/* Skala dreht sehr langsam, der Index-Punkt läuft wie ein Zeiger um – beides linear */
.g-records__scribble .g-ring__scale,
.g-records__scribble .g-ring__orbit { transform-box: view-box; transform-origin: 50% 50%; }
.g-records__scribble .g-ring__scale { animation: g-ring-turn 90s linear infinite; }
.g-records__scribble .g-ring__orbit { animation: g-ring-turn 12s linear infinite; }
@keyframes g-ring-turn { to { transform: rotate(360deg); } }

.g-records__scribble.is-drawn .g-ring__line { stroke-dashoffset: 0; }
.g-records__scribble.is-drawn .g-ring__scale { opacity: 1; transition-delay: .55s; }
.g-records__scribble.is-drawn .g-ring__cross { opacity: .7; transition-delay: .75s; }
.g-records__scribble.is-drawn .g-ring__orbit { opacity: 1; transition-delay: .95s; }
.g-records__scribble.is-erasing .g-ring__line { stroke-dashoffset: -1; transition-duration: .4s; transition-timing-function: cubic-bezier(.55, 0, 1, .45); }
.g-records__scribble.is-erasing .g-ring__scale,
.g-records__scribble.is-erasing .g-ring__cross,
.g-records__scribble.is-erasing .g-ring__orbit { opacity: 0; transition-duration: .1s; transition-delay: 0s; }
.g-records__scribble.no-tr * { transition: none !important; }
/* Hover über der aktiven Platte: Zeiger läuft schneller */
.g-records__item.is-active .g-records__link:hover .g-records__scribble .g-ring__orbit { animation-duration: 3s; }
/* Rahmen-Variante (Karten): Skala steht, der Index-Punkt läuft wie ein Zeiger die Kante entlang */
.g-records__scribble--frame .g-ring__scale { animation: none; }
.g-records__scribble--frame .g-ring__orbit { animation: g-ring-run 12s linear infinite; }
@keyframes g-ring-run {
	0% { transform: translate(0, 0); }
	25% { transform: translate(186px, 0); }
	50% { transform: translate(186px, 186px); }
	75% { transform: translate(0, 186px); }
	100% { transform: translate(0, 0); }
}
.g-records__item.is-active .g-records__link:hover .g-records__scribble--frame .g-ring__orbit { animation-duration: 3s; }
/* Performance (iOS): Der Scribble ist nur auf der aktiven Platte sichtbar. Die Endlos-Drehungen der übrigen
   Platten (2 pro Platte, auch bei versteckten) hielten alle 3D-Ebenen dauerhaft im Compositing. Pausiert
   behalten sie ihre Phase und laufen beim Aktivieren sichtbar identisch weiter. */
.g-records__item:not(.is-active) .g-records__scribble :is(.g-ring__scale, .g-ring__orbit) { animation-play-state: paused; }
/* will-change nur dort, wo die Scheibe wirklich animiert (aktiv bzw. rotierend) – sonst 18 dauerhafte Ebenen mit Maske */
.g-records__item:not(.is-active) .g-vinyl__disc { will-change: auto; }
@media (prefers-reduced-motion: reduce) {
	.g-records__scribble .g-ring__scale,
	.g-records__scribble .g-ring__orbit { animation: none; }
}

/* ---------- Highlights unten ---------- */
.g-records__highlights {
	/* Zentriert ohne transform – sonst überschreibt die Wechsel-Animation das translateX
	   und die Box springt beim Plattenwechsel um die halbe Breite nach rechts. */
	position: absolute; z-index: 5; left: 0; right: 0; margin-inline: auto; bottom: clamp(4.5rem, 9vh, 6.5rem);
	display: flex; gap: clamp(2rem, 8vw, 9rem); justify-content: center;
	width: max-content; max-width: calc(100% - 2 * var(--g-gutter));
	text-align: center; pointer-events: none;
}
.g-records__hl { display: grid; gap: var(--wp--preset--spacing--10); justify-items: center; }
.g-records__hl strong {
	font-family: var(--wp--preset--font-family--display); font-weight: 400;
	font-size: var(--wp--preset--font-size--m); line-height: 1.1; text-transform: uppercase;
	max-width: 16ch;
}
.g-records__hl strong::before { content: "“"; color: var(--song-accent); transition: color .6s var(--g-ease); }
.g-records__hl strong::after { content: "”"; color: var(--song-accent); transition: color .6s var(--g-ease); }

/* ---------- HUD ---------- */
.g-records__hud {
	position: absolute; z-index: 6; left: var(--g-gutter); right: var(--g-gutter); bottom: 1.25rem;
	display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--s);
	letter-spacing: .12em; text-transform: uppercase;
}
.g-records__count { display: flex; gap: .4em; font-variant-numeric: tabular-nums; }
.g-records__now { color: var(--song-accent); transition: color .6s var(--g-ease); }
.g-records__sep { opacity: .4; }
.g-records__progress { height: 1px; background: color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent); position: relative; overflow: hidden; }
.g-records__progress span { position: absolute; inset: 0; background: var(--song-accent); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform .8s var(--g-ease), background-color .6s var(--g-ease); }
.g-records__nav { display: flex; gap: var(--wp--preset--spacing--10); }
.g-records__btn {
	width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent);
	background: transparent; color: inherit; cursor: pointer; font-size: var(--wp--preset--font-size--m);
	transition: border-color var(--g-fast), color var(--g-fast), background-color var(--g-fast);
}
.g-records__btn:hover { border-color: var(--song-accent); color: var(--song-accent); }
.g-records__hint { grid-column: 1 / -1; margin: 0; text-align: center; opacity: .55; font-size: var(--wp--preset--font-size--s); }

/* ---------- Rand-Sperre: „Weiter scrollen“ ----------
   Erscheint, sobald am letzten Eintrag weitergescrollt wird. Die Linie füllt sich über die Sperrzeit
   (--edge-ms, von view.js gesetzt); ist sie voll, läuft das nächste Scrollen zum Footer. */
.g-records__more {
	position: absolute; z-index: 6; left: 50%; bottom: 1.25rem; transform: translateX(-50%);
	display: grid; justify-items: center; gap: .6rem; width: max-content; max-width: calc(100% - 2 * var(--g-gutter));
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--s);
	letter-spacing: .14em; text-transform: uppercase; text-align: center;
	opacity: 0; pointer-events: none; transition: opacity .35s var(--g-ease);
}
.g-records__more-label { transition: color .4s var(--g-ease); }
.g-records__more-bar { position: relative; overflow: hidden; width: 9rem; height: 1px; background: color-mix(in srgb, var(--wp--preset--color--contrast) 22%, transparent); }
.g-records__more-bar i { position: absolute; inset: 0; background: var(--song-accent); transform-origin: 0 50%; transform: scaleX(0); }
.g-records.is-edge .g-records__more { opacity: 1; }
.g-records.is-edge .g-records__hint { opacity: 0; }
.g-records.is-edge .g-records__more-bar i { animation: g-more-fill var(--edge-ms, 3s) linear forwards; }
.g-records.is-edge-ready .g-records__more-label { color: var(--song-accent); }
.g-records.is-edge-ready .g-records__more .g-arrow { animation: g-more-nudge 1.1s var(--g-ease-io) infinite; }
@keyframes g-more-fill { to { transform: scaleX(1); } }
@keyframes g-more-nudge { 50% { transform: translateY(4px) rotate(90deg); } }
.g-records__hint { transition: opacity .35s var(--g-ease); }
.g-records.is-leaving .g-records__more { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) {
	.g-records.is-edge .g-records__more-bar i { animation: none; transform: scaleX(1); }
	.g-records.is-edge-ready .g-records__more .g-arrow { animation: none; }
}
html:not(.js) .g-records__more { display: none; }

/* ---------- Ohne JS: horizontale Liste ---------- */
html:not(.js) .g-records__stage { position: relative; inset: auto; padding: 18rem var(--g-gutter) 10rem; }
html:not(.js) .g-records__track { position: relative; display: flex; gap: 2rem; overflow-x: auto; scroll-snap-type: x mandatory; }
html:not(.js) .g-records__item { position: relative; left: auto; top: auto; transform: none; flex: 0 0 min(70vw, 420px); scroll-snap-align: center; }
html:not(.js) .g-records__scribble, html:not(.js) .g-records__hud { display: none; }

/* ---------- Einstieg nach dem Loader ---------- */
.js .g-records:not(.is-live) .g-records__info,
.js .g-records:not(.is-live) .g-records__highlights,
.js .g-records:not(.is-live) .g-records__hud { opacity: 0; filter: blur(10px); }
.g-records__info, .g-records__highlights, .g-records__hud { transition: opacity 1s var(--g-ease), filter 1s var(--g-ease); }
.g-records__hud { transition-delay: .35s; }
.g-records__highlights { transition-delay: .2s; }

/* Wechsel-Animation für Texte */
.g-records .is-swapping { opacity: 0; filter: blur(8px); transform: translateY(6px); }
.g-records__title a, .g-records__rows, .g-records__buy, .g-records__hl { transition: opacity .45s var(--g-ease), filter .45s var(--g-ease), transform .6s var(--g-ease); }
.g-records .g-records__open {
	transition: opacity .45s var(--g-ease), filter .45s var(--g-ease), transform .45s var(--g-ease),
		background-color var(--g-fast) var(--g-ease), color var(--g-fast) var(--g-ease);
}
.g-records .g-records__open.is-swapping { transition-duration: .23s; }
/* Highlights wechseln einzeln und am Platz (nur Blur + Opacity).
   Ausblenden gleichzeitig, Einblenden leicht versetzt. */
.g-records__hl.is-swapping { transform: none; }
.g-records__hl:not(.is-swapping):nth-child(2) { transition-delay: .07s; }
.g-records__hl:not(.is-swapping):nth-child(3) { transition-delay: .14s; }

/* ---------- Mobil ---------- */
@media (max-width: 781px) {
	.g-records { --disc: 74vw !important; }
	.g-records__info { top: calc(var(--g-header-h) + var(--wp--preset--spacing--10)); width: calc(100% - 2 * var(--g-gutter)); }
	.g-records__title { min-height: 0; margin-bottom: var(--wp--preset--spacing--10); }
	.g-records__rows > div:nth-child(n+3) { display: none; }
	.g-records__open { display: none; }
	.g-records__highlights { bottom: 5.25rem; gap: 2rem; }
	.g-records__hint { display: none; }
	.g-records__more { bottom: 4.6rem; }
}
/* Beim Vinyl-Block wachsen Metadaten und Steuerung mit ihrem Inhalt. */
.wp-block-grvty-vinyl-carousel.g-records {
	overflow-anchor: none;
	display: flex;
	flex-direction: column;
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	gap: clamp(1rem, 2.5vh, 1.75rem);
	padding-block: var(--g-header-h) 1.25rem;
}
.wp-block-grvty-vinyl-carousel .g-records__stage {
	position: relative;
	inset: auto;
	flex: 1 0 auto;
	min-height: calc(1.2 * var(--disc) + 1rem);
	/* Die äußere Karussellfläche begrenzt die Bühne samt Platten und Schatten. */
}
.wp-block-grvty-vinyl-carousel .g-records__highlights {
	position: relative;
	inset: auto;
	flex-wrap: wrap;
	gap: 1rem clamp(1rem, 6vw, 6rem);
}
.wp-block-grvty-vinyl-carousel .g-records__hl {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
}
.wp-block-grvty-vinyl-carousel .g-records__hl strong { line-height: 1.25; }
.wp-block-grvty-vinyl-carousel .g-records__hud {
	position: relative;
	inset: auto;
	margin-inline: var(--g-gutter);
	grid-template-columns: auto minmax(0, 1fr) auto;
	column-gap: clamp(.5rem, 2vw, 1.5rem);
}
.wp-block-grvty-vinyl-carousel .g-records__hint { overflow-wrap: anywhere; }
.wp-block-grvty-vinyl-carousel .g-records__info {
	position: relative;
	inset: auto;
	margin-inline: var(--g-gutter);
	/* Oberkante identisch zum Shop-Deck (gleicher Abstand unter dem Header) */
	padding-top: var(--wp--preset--spacing--30);
}
.wp-block-grvty-vinyl-carousel .g-records__title { min-height: 0; line-height: 1.15; }
.wp-block-grvty-vinyl-carousel .g-records__rows dt { overflow-wrap: anywhere; }
html:not(.js) .wp-block-grvty-vinyl-carousel .g-records__stage { padding-block: 0; min-height: 0; }

@media (min-width: 1100px) {
	.js .wp-block-grvty-vinyl-carousel.g-records {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(auto, 1fr) auto auto;
	}
	.js .wp-block-grvty-vinyl-carousel :is(.g-records__info, .g-records__stage) { grid-area: 1 / 1; }
	.js .wp-block-grvty-vinyl-carousel .g-records__info { align-self: start; }
	.js .wp-block-grvty-vinyl-carousel .g-records__stage {
		min-height: 0;
		container-type: size;
	}
	.js .wp-block-grvty-vinyl-carousel .g-records__item { width: min(var(--disc), 80cqh); }
}

/* ---------- Ausstieg zur Song-Seite (A24-Choreografie) ----------
   Zeilen wischen nach rechts weg, Titel löst sich auf, Highlights & HUD blenden aus. */
.g-records.is-leaving .g-records__title a { opacity: 0; filter: blur(10px); transform: translateY(-.25em); transition-duration: .4s; }
.g-records.is-leaving .g-records__rows > div {
	clip-path: inset(0 0 0 100%);
	transition: clip-path .5s cubic-bezier(.7, 0, .3, 1);
}
.g-records__rows > div { clip-path: inset(0 0 0 0); }
.g-records.is-leaving .g-records__rows > div:nth-child(2) { transition-delay: .05s; }
.g-records.is-leaving .g-records__rows > div:nth-child(3) { transition-delay: .1s; }
.g-records.is-leaving .g-records__rows > div:nth-child(4) { transition-delay: .15s; }
.g-records.is-leaving .g-records__open,
.g-records.is-leaving .g-records__buy,
.g-records.is-leaving .g-records__notices,
.g-records.is-leaving .g-records__highlights,
.g-records.is-leaving .g-records__hud { opacity: 0 !important; filter: blur(8px) !important; transition: opacity .35s var(--g-ease), filter .35s var(--g-ease) !important; transition-delay: 0s !important; }
.g-records.is-leaving .g-records__glow { opacity: 0; transition: opacity .6s var(--g-ease); }
.g-records.is-leaving { pointer-events: none; }

/* View Transitions: Choreografie zentral in assets/css/base.css („Seitenübergänge“) */