/**
 * GamerDNA Onboarding Journey
 * ---------------------------------------------------------------------------
 * Visuals for the "Profil entsteht"-Erlebnis das parallel zum Voxel
 * create-post-Formular läuft. Alle Klassen sind mit `gdna-jrn-` präfixiert,
 * der Voxel-Restyling-Block ist hart auf `body.gdna-journey-page` gescoped,
 * damit er nirgendwo sonst greifen kann.
 */

body.gdna-journey-page {
	--gdna-jrn-accent: #6B35E9;
	--gdna-jrn-accent-light: #8E64F0;
	--gdna-jrn-accent-bg: #F0EBFE;
	--gdna-jrn-accent-deep: #4F1FB5;
	--gdna-jrn-dark: #1C1139;
	--gdna-jrn-bg: #f8f8f9;
	--gdna-jrn-white: #FFFFFF;
	--gdna-jrn-border: #E1E0E6;
	--gdna-jrn-border-light: #F0EEF5;
	--gdna-jrn-text: #1C1139;
	--gdna-jrn-text-secondary: #5A5775;
	--gdna-jrn-text-muted: #8E8BA3;
	--gdna-jrn-cat-kf: #6B35E9;
	--gdna-jrn-cat-bf: #06B6D4;
	--gdna-jrn-cat-mf: #F59E0B;
	--gdna-jrn-cat-ef: #EC4899;
}

/* ============================================================
 * DNA PREVIEW PANE
 * ============================================================ */
.gdna-jrn-pane {
	background: linear-gradient(180deg, #1C1139 0%, #2D1F5C 100%);
	color: var(--gdna-jrn-white);
	padding: 48px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;
	min-height: 100%;
	border-radius: 16px;
	font-family: 'Figtree', sans-serif;
}
.gdna-jrn-pane::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(107, 53, 233, 0.3) 0%, transparent 70%);
	pointer-events: none;
}
.gdna-jrn-preview-label {
	font-size: 11px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 24px;
	position: relative;
	z-index: 1;
}

/* ── DNA Frame & Helix ──────────────────────────────────────── */
.gdna-jrn-frame {
	width: 100%;
	max-width: 280px;
	aspect-ratio: 0.435;
	position: relative;
	margin-bottom: 28px;
	z-index: 1;
}
.gdna-jrn-svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}
.gdna-jrn-rung {
	stroke: rgba(255, 255, 255, 0.12);
	stroke-width: 1.2;
	stroke-linecap: round;
	transition: stroke 0.5s ease, stroke-width 0.5s ease;
}
.gdna-jrn-rung.is-filled {
	stroke-width: 1.8;
	filter: drop-shadow(0 0 4px currentColor);
}
.gdna-jrn-node {
	fill: rgba(255, 255, 255, 0.18);
	transition: fill 0.5s ease, filter 0.5s ease;
	transform-origin: center;
	transform-box: fill-box;
}
.gdna-jrn-node.is-filled {
	fill: currentColor;
	filter: drop-shadow(0 0 6px currentColor);
}
.gdna-jrn-node.is-pulse {
	animation: gdnaJrnNodePulse 0.5s cubic-bezier(0.34, 1.6, 0.64, 1);
}
@keyframes gdnaJrnNodePulse {
	0%   { transform: scale(0.2); opacity: 0.3; }
	60%  { transform: scale(1.5); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

/* Helix container — slow ambient float */
.gdna-jrn-helix-group {
	animation: gdnaJrnFloat 8s ease-in-out infinite;
	transform-origin: center;
	transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes gdnaJrnFloat {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}

/* Processing state (active während step 5 läuft) */
.gdna-jrn-frame.is-processing .gdna-jrn-helix-group {
	animation: gdnaJrnProcessing 2s ease-in-out infinite;
}
@keyframes gdnaJrnProcessing {
	0%, 100% { transform: translateY(0) scale(1); }
	50%      { transform: translateY(-4px) scale(1.03); }
}
.gdna-jrn-frame.is-processing .gdna-jrn-node.is-filled {
	animation: gdnaJrnBreathing 1.6s ease-in-out infinite;
}
.gdna-jrn-frame.is-processing .gdna-jrn-rung.is-filled {
	animation: gdnaJrnRungShimmer 1.6s ease-in-out infinite;
}

/* Rotating state — fertige DNA dreht sich als Showcase */
.gdna-jrn-frame.is-rotating { perspective: 800px; }
.gdna-jrn-frame.is-rotating .gdna-jrn-svg {
	animation: gdnaJrnRotate 6s linear infinite;
	transform-style: preserve-3d;
}
@keyframes gdnaJrnRotate {
	0%   { transform: rotateY(0deg); }
	100% { transform: rotateY(360deg); }
}
.gdna-jrn-frame.is-rotating .gdna-jrn-node.is-filled {
	animation: gdnaJrnBreathing 2s ease-in-out infinite;
}
.gdna-jrn-frame.is-rotating .gdna-jrn-rung.is-filled {
	animation: gdnaJrnRungShimmer 2s ease-in-out infinite;
}
@keyframes gdnaJrnBreathing {
	0%, 100% { filter: drop-shadow(0 0 6px currentColor); }
	50%      { filter: drop-shadow(0 0 14px currentColor) brightness(1.3); }
}
@keyframes gdnaJrnRungShimmer {
	0%, 100% { stroke-width: 1.8; filter: drop-shadow(0 0 4px currentColor); }
	50%      { stroke-width: 2.6; filter: drop-shadow(0 0 12px currentColor); }
}

/* Scan beam (während processing) */
.gdna-jrn-scan-beam {
	position: absolute;
	left: 0;
	right: 0;
	height: 80px;
	background: linear-gradient(180deg,
		transparent 0%,
		rgba(142, 100, 240, 0.15) 40%,
		rgba(142, 100, 240, 0.35) 50%,
		rgba(142, 100, 240, 0.15) 60%,
		transparent 100%);
	pointer-events: none;
	opacity: 0;
	z-index: 3;
	mix-blend-mode: screen;
}
.gdna-jrn-frame.is-processing .gdna-jrn-scan-beam {
	animation: gdnaJrnScanBeam 2.5s linear infinite;
}
@keyframes gdnaJrnScanBeam {
	0%   { top: -80px; opacity: 0; }
	10%  { opacity: 1; }
	90%  { opacity: 1; }
	100% { top: 100%; opacity: 0; }
}

/* Reveal sequence — DNA spinnt schneller und kollabiert */
.gdna-jrn-frame.is-revealing .gdna-jrn-helix-group {
	animation: gdnaJrnSpin 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes gdnaJrnSpin {
	0%   { transform: scale(1) rotate(0deg); opacity: 1; }
	60%  { transform: scale(1.15) rotate(180deg); opacity: 1; }
	100% { transform: scale(0.4) rotate(360deg); opacity: 0; filter: blur(20px); }
}
.gdna-jrn-burst {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 4px;
	height: 4px;
	background: var(--gdna-jrn-white);
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(0);
	pointer-events: none;
	box-shadow: 0 0 0 0 rgba(255, 255, 255, 1), 0 0 0 0 rgba(142, 100, 240, 0.8);
	z-index: 4;
}
.gdna-jrn-frame.is-revealing .gdna-jrn-burst {
	animation: gdnaJrnBurst 1.6s cubic-bezier(0.16, 0.84, 0.44, 1) 0.6s forwards;
}
@keyframes gdnaJrnBurst {
	0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
	20%  {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
		box-shadow: 0 0 80px 20px rgba(255, 255, 255, 0.9), 0 0 160px 40px rgba(142, 100, 240, 0.6);
	}
	100% {
		transform: translate(-50%, -50%) scale(80);
		opacity: 0;
		box-shadow: 0 0 0 0 transparent;
	}
}

/* Floating Particles */
.gdna-jrn-particle {
	fill: var(--gdna-jrn-accent-light);
	opacity: 0;
}
.gdna-jrn-particle.is-active {
	animation: gdnaJrnParticle 3s ease-in-out infinite;
}
@keyframes gdnaJrnParticle {
	0%   { opacity: 0; transform: translate(0, 0); }
	20%  { opacity: 0.6; }
	80%  { opacity: 0.4; }
	100% { opacity: 0; transform: translate(var(--drift, 30px), -100px); }
}

/* ── Build status text + tags ───────────────────────────────── */
.gdna-jrn-build-status {
	text-align: center;
	position: relative;
	z-index: 1;
	min-height: 60px;
}
.gdna-jrn-build-status-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--gdna-jrn-white);
	margin-bottom: 4px;
}
.gdna-jrn-build-status-sub {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.6);
}
.gdna-jrn-build-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin-top: 16px;
	max-width: 320px;
}
.gdna-jrn-build-tag {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: var(--gdna-jrn-white);
	padding: 5px 12px;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 600;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}
.gdna-jrn-build-tag.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.gdna-jrn-build-tag .material-symbols-outlined {
	font-size: 14px;
	vertical-align: -2px;
	margin-right: 2px;
	color: var(--gdna-jrn-accent-light);
}

/* "Berechnung läuft" badge */
.gdna-jrn-calc-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.7);
	padding: 6px 12px;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 600;
}
.gdna-jrn-dot-pulse {
	width: 6px;
	height: 6px;
	background: var(--gdna-jrn-accent-light);
	border-radius: 50%;
	animation: gdnaJrnDotPulse 1.4s ease-in-out infinite;
}
@keyframes gdnaJrnDotPulse {
	0%, 100% { opacity: 0.3; transform: scale(0.8); }
	50%      { opacity: 1;   transform: scale(1.2); }
}

/* ============================================================
 * RESPONSIVE — DNA-Pane
 * Voxel-Form-Styling bleibt komplett unberührt.
 * ============================================================ */

/* Spacer ist standardmäßig unsichtbar. Höhe wird via JS gesetzt,
 * sobald die Pane in den Sticky-Mode wechselt, damit kein
 * Content-Sprung passiert. */
.gdna-jrn-pane-spacer {
	display: none;
}

@media (max-width: 1000px) {
	.gdna-jrn-pane {
		padding: 32px 24px;
		min-height: 360px;
	}
	.gdna-jrn-frame { max-width: 200px; }
}

/* ============================================================
 * MOBILE STICKY MINI-BAR
 * Wenn die Pane oben aus dem Viewport scrollt, klettert sie als
 * schmale Mini-Bar mit am Top des Viewports mit. JS toggled die
 * `.is-sticky-mobile`-Klasse und setzt die Höhe des Spacers,
 * damit das Layout darunter nicht springt.
 * ============================================================ */
@media (max-width: 900px) {
	/* Default-Mobile: Pane bereits etwas kompakter */
	.gdna-jrn-pane {
		padding: 28px 20px;
		min-height: 0;
	}
	.gdna-jrn-frame {
		max-width: 180px;
		margin-bottom: 20px;
	}

	/* Sticky-Mini-Bar Mode */
	.gdna-jrn-pane.is-sticky-mobile {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
		border-radius: 0;
		padding: 10px 14px;
		min-height: 0;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		gap: 12px;
		box-shadow: 0 6px 24px rgba(28, 17, 57, 0.35);
		animation: gdnaJrnStickyIn 0.25s cubic-bezier(0.34, 1.2, 0.64, 1);
	}
	@keyframes gdnaJrnStickyIn {
		from { transform: translateY(-100%); }
		to   { transform: translateY(0); }
	}

	/* Background-Glow ausblenden — wirkt sonst seltsam in der Bar */
	.gdna-jrn-pane.is-sticky-mobile::before {
		display: none;
	}

	/* Label oben weg, ist redundant in der Bar */
	.gdna-jrn-pane.is-sticky-mobile .gdna-jrn-preview-label {
		display: none;
	}

	/* Mini-DNA: quadratisch, 48px */
	.gdna-jrn-pane.is-sticky-mobile .gdna-jrn-frame {
		width: 48px;
		height: 48px;
		max-width: 48px;
		aspect-ratio: 1 / 1;
		margin: 0;
		flex-shrink: 0;
		overflow: hidden;
	}
	/* SVG so skalieren, dass die Helix bildfüllend, aber zentriert wirkt */
	.gdna-jrn-pane.is-sticky-mobile .gdna-jrn-svg {
		width: 100%;
		height: 100%;
	}

	/* Build-Status horizontal & kompakt */
	.gdna-jrn-pane.is-sticky-mobile .gdna-jrn-build-status {
		text-align: left;
		flex: 1;
		min-width: 0;
		min-height: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 2px;
	}
	.gdna-jrn-pane.is-sticky-mobile .gdna-jrn-build-status-title {
		font-size: 12px;
		font-weight: 700;
		margin: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.gdna-jrn-pane.is-sticky-mobile .gdna-jrn-build-status-sub {
		display: none;
	}
	.gdna-jrn-pane.is-sticky-mobile .gdna-jrn-build-tags {
		margin-top: 0;
		gap: 4px;
		max-width: 100%;
		justify-content: flex-start;
		overflow: hidden;
		flex-wrap: nowrap;
	}
	.gdna-jrn-pane.is-sticky-mobile .gdna-jrn-build-tag {
		font-size: 10px;
		padding: 2px 8px;
		flex-shrink: 0;
	}
	.gdna-jrn-pane.is-sticky-mobile .gdna-jrn-build-tag .material-symbols-outlined {
		font-size: 11px;
		margin-right: 1px;
	}

	/* Calc-Badge ebenfalls kompakt */
	.gdna-jrn-pane.is-sticky-mobile .gdna-jrn-calc-badge {
		padding: 3px 8px;
		font-size: 10px;
	}

	/* Spacer wird sichtbar — Höhe kommt vom JS, sodass die Pane,
	 * die jetzt position:fixed ist, keine Layout-Lücke hinterlässt. */
	.gdna-jrn-pane.is-sticky-mobile + .gdna-jrn-pane-spacer {
		display: block;
	}
}

/* Desktop: nie sticky, falls die Klasse versehentlich übrig bleibt
 * (z. B. nach Resize von Mobile zu Desktop bevor JS sie entfernt). */
@media (min-width: 901px) {
	.gdna-jrn-pane.is-sticky-mobile {
		position: static;
		box-shadow: none;
	}
	.gdna-jrn-pane-spacer { display: none !important; }
}