/* ---------- Ablauf-Animation: Zustände und Bewegung --------------------- *
 * data-step am <figure> bestimmt den Zustand der Szene (1 Anfrage,
 * 2 Lieferung, 3 Anschluss, 4 Betrieb, 5 Abholung; Kreisprozess 1–5).
 * Jeder Zustand ist auch ohne Bewegung vollständig: Ohne Skript zeigt die
 * Szene den Betrieb, bei „Bewegung reduzieren“ springen die Abläufe auf ihr
 * Ende (Grundregel in css/tailwind.css). Dauerbewegungen im Betrieb laufen
 * nur, nachdem jemand den Ablauf gestartet oder einen Schritt gewählt hat
 * (.is-touched), und enden nach wenigen Sekunden. */

.journey {
  --jr-step: 5.2s;
  --jr-drive: 4.2s;
  --jr-wait: 0.9s;
  --jr-ease: cubic-bezier(0.45, 0, 0.3, 1);
}

.journey--lichtmast { --jr-wait: 1.7s; }
.journey--fx-fill { --jr-wait: 1.8s; }

.journey.is-instant,
.journey.is-instant * {
  transition: none !important;
}

.journey.is-paused *,
.journey.is-paused *::after {
  animation-play-state: paused !important;
}

/* ---------- Schritt 1: Anfrage ------------------------------------------ */
.journey__order { opacity: 0; transition: opacity 0.3s ease-out; }
.journey__doc,
.journey__seal { transform-box: fill-box; transform-origin: center; }
.journey__pin { transform-box: fill-box; transform-origin: 50% 100%; }

.journey[data-step="1"] .journey__order { opacity: 1; }
.journey[data-step="1"] .journey__doc { animation: jr-pop 0.55s var(--ease-spring) 0.1s both; }
.journey[data-step="1"] .journey__trace { animation: jr-draw 0.7s ease-out 0.8s both; }
.journey[data-step="1"] .journey__pin { animation: jr-drop 0.6s var(--ease-spring) 1.3s both; }
.journey[data-step="1"] .journey__seal { animation: jr-pop 0.5s var(--ease-spring) 2.1s both; }
.journey[data-step="1"] .journey__check { animation: jr-draw 0.45s ease-out 2.45s both; }

/* ---------- Fahrzeug und Gerät ------------------------------------------ */
.journey__vehicle,
.journey__unit { translate: -720px 0; }
.journey:is([data-step="2"], [data-step="3"], [data-step="4"]) .journey__unit { translate: 0 0; }
.journey__wheel { transform-box: fill-box; transform-origin: center; }
.journey--truck .journey__bed { transform-box: view-box; transform-origin: 444px 234px; }
/* Drehpunkt am Brückenende, solange das Gerät 26 px höher auf der Brücke steht. */
.journey--truck .journey__unit { transform-box: view-box; transform-origin: 444px 260px; }

.journey--truck[data-step="2"] .journey__vehicle { animation: jr-truck-drop-vehicle var(--jr-drive) var(--jr-ease) both; }
.journey--truck[data-step="2"] .journey__bed { animation: jr-truck-drop-bed var(--jr-drive) var(--jr-ease) both; }
.journey--truck[data-step="2"] .journey__unit { animation: jr-truck-drop-unit var(--jr-drive) var(--jr-ease) both; }
.journey--truck[data-step="2"] .journey__vehicle .journey__wheel { animation: jr-truck-drop-wheel var(--jr-drive) var(--jr-ease) both; }

.journey--truck[data-step="5"] .journey__vehicle { animation: jr-truck-lift-vehicle var(--jr-drive) var(--jr-ease) var(--jr-wait) both; }
.journey--truck[data-step="5"] .journey__bed { animation: jr-truck-lift-bed var(--jr-drive) var(--jr-ease) var(--jr-wait) both; }
.journey--truck[data-step="5"] .journey__unit { animation: jr-truck-lift-unit var(--jr-drive) var(--jr-ease) var(--jr-wait) both; }
.journey--truck[data-step="5"] .journey__vehicle .journey__wheel { animation: jr-truck-lift-wheel var(--jr-drive) var(--jr-ease) var(--jr-wait) both; }

.journey--tow[data-step="2"] .journey__vehicle { animation: jr-tow-drop-vehicle var(--jr-drive) var(--jr-ease) both; }
.journey--tow[data-step="2"] .journey__unit { animation: jr-tow-drop-unit var(--jr-drive) var(--jr-ease) both; }
.journey--tow[data-step="2"] .journey__vehicle .journey__wheel { animation: jr-tow-drop-wheel var(--jr-drive) var(--jr-ease) both; }
.journey--tow[data-step="2"] .journey__unit .journey__wheel { animation: jr-tow-drop-trailer-wheel var(--jr-drive) var(--jr-ease) both; }

.journey--tow[data-step="5"] .journey__vehicle { animation: jr-tow-lift-vehicle var(--jr-drive) var(--jr-ease) var(--jr-wait) both; }
.journey--tow[data-step="5"] .journey__unit { animation: jr-tow-lift-unit var(--jr-drive) var(--jr-ease) var(--jr-wait) both; }
.journey--tow[data-step="5"] .journey__vehicle .journey__wheel { animation: jr-tow-lift-wheel var(--jr-drive) var(--jr-ease) var(--jr-wait) both; }
.journey--tow[data-step="5"] .journey__unit .journey__wheel { animation: jr-tow-lift-trailer-wheel var(--jr-drive) var(--jr-ease) var(--jr-wait) both; }

/* ---------- Schritt 3: Anschluss ---------------------------------------- */
.journey__link {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset 0.5s ease-in, opacity 0.15s linear 0.5s;
}

.journey--rental:is([data-step="3"], [data-step="4"]) .journey__link {
  stroke-dashoffset: 0;
  opacity: 1;
  transition: stroke-dashoffset 1s ease-in-out 0.3s, opacity 0.1s linear 0.3s;
}

.journey--rental[data-step="3"] .journey__link:nth-child(2) { transition-delay: 0.65s; }
.journey--rental[data-step="3"] .journey__link:nth-child(3) { transition-delay: 1s; }
.journey--rental[data-step="3"] .journey__link:nth-child(4) { transition-delay: 1.35s; }

.journey__ready { opacity: 0; transform-box: fill-box; transform-origin: center; }
.journey--rental[data-step="3"] .journey__ready { animation: jr-pop 0.5s var(--ease-spring) 2.4s both; }
.journey--rental[data-step="3"] .journey__ready path { animation: jr-draw 0.4s ease-out 2.75s both; }

/* Lichtmast: Stützen ab, Mast hoch, Strahler oben. */
.journey__legs { translate: 0 -10px; transition: translate 0.5s ease-in-out 1.1s; }
.journey__mast--2,
.journey__mast--3,
.journey__head { transition: translate 1.1s var(--jr-ease); }
.journey--rental:is([data-step="3"], [data-step="4"]) .journey__legs { translate: 0 0; transition-delay: 0.2s; }
.journey--rental:is([data-step="3"], [data-step="4"]) .journey__mast--2 { translate: 0 -36px; transition-delay: 0.8s; }
.journey--rental:is([data-step="3"], [data-step="4"]) .journey__mast--3 { translate: 0 -72px; transition-delay: 0.8s; }
.journey--rental:is([data-step="3"], [data-step="4"]) .journey__head { translate: 0 -67px; transition-delay: 0.8s; }

/* ---------- Schritt 4: Betrieb ------------------------------------------ */
.journey__run,
.journey__flow { transition: opacity 0.4s ease-out; }
.journey__run { opacity: 0; }
.journey--rental[data-step="4"] .journey__run,
.journey--rental[data-step="4"] .journey__flow { opacity: 1; transition-delay: 0.3s; }

.journey__rad,
.journey__pane,
.journey__led,
.journey__level-bulb { transition: fill 0.8s ease-out 0.6s, stroke 0.8s ease-out 0.6s; }
.journey--rental[data-step="4"] .journey__rad { fill: var(--jr-hot-soft); stroke: var(--jr-hot); }
.journey--rental[data-step="4"] .journey__led { fill: var(--color-accent-600); }
.journey--fx-light[data-step="4"] .journey__building .journey__pane { fill: var(--jr-light); }
.journey--fx-cool[data-step="4"] .journey__building .journey__pane { fill: var(--jr-cold-soft); }
.journey--fx-data[data-step="4"] .journey__building .journey__pane { fill: var(--jr-cold-soft); }
.journey--rental[data-step="4"] .journey__level-bulb { fill: var(--jr-cold); }

.journey__level { transform-box: fill-box; transform-origin: 50% 100%; transition: scale 2.6s ease-in-out 0.6s, fill 0.8s ease-out 1.6s; }
.journey--rental[data-step="4"] .journey__level { scale: 1 0.3; fill: var(--jr-cold); }

.journey__liquid { transform-box: fill-box; transform-origin: 50% 100%; scale: 1 0; transition: scale 1.4s ease-in-out; }
.journey--rental[data-step="4"] .journey__liquid { scale: 1 0.78; transition: scale 3.2s ease-in-out 0.5s; }

.journey__needle--load { transform-box: view-box; transform-origin: 392px 214px; transition: rotate 1.6s var(--jr-ease) 0.6s; }
.journey--rental[data-step="4"] .journey__needle--load { rotate: 130deg; }
.journey--fx-steam .journey__needle { transform-box: view-box; transform-origin: 304px 214px; rotate: -110deg; transition: rotate 1.6s var(--jr-ease) 0.6s; }
.journey--fx-steam[data-step="4"] .journey__needle { rotate: 0deg; }

.journey__dusk { transition: opacity 1s ease-in-out; }
.journey--rental[data-step="4"] .journey__dusk { opacity: 0.45; }

.journey__flame { transform-box: fill-box; transform-origin: 50% 100%; }
.journey__fan { transform-box: fill-box; transform-origin: center; }
.journey__rise { transform-box: fill-box; transform-origin: center; }
.journey__chill { transform-box: fill-box; transform-origin: center; }

.journey--rental.is-touched[data-step="4"] .journey__flow { animation: jr-flow 1s linear 0.3s 6; }
.journey--rental.is-touched[data-step="4"] .journey__flow--reverse { animation-name: jr-flow-back; }
.journey--rental.is-touched[data-step="4"] .journey__flame { animation: jr-flicker 0.5s ease-in-out 0.3s 12 alternate; }
.journey--rental.is-touched[data-step="4"] .journey__rise { animation: jr-rise 1.5s ease-in-out 0.5s 4; }
.journey--rental.is-touched[data-step="4"] .journey__heat { animation: jr-rise 1.5s ease-in-out 1s 4; }
.journey--rental.is-touched[data-step="4"] .journey__fan { animation: jr-spin 0.9s linear 0.4s 7; }
.journey--rental.is-touched[data-step="4"] .journey__chill { animation: jr-twinkle 1.6s ease-in-out 0.8s 3; }
.journey--rental.is-touched[data-step="4"] .journey__rack .journey__led { animation: jr-blink 0.9s steps(2, jump-none) 0.6s 6; }
.journey__rack .journey__led:nth-child(3n + 2) { animation-delay: 0.9s; }
.journey__rack .journey__led:nth-child(3n) { animation-delay: 1.2s; }

/* ---------- Schritt 5: Abholung ----------------------------------------- */
.journey--rental[data-step="5"] .journey__liquid { scale: 1 0; }

/* ---------- Kreisprozess der Großwärmepumpe ----------------------------- */
.journey__source { fill: var(--color-primary-50); stroke: var(--color-primary-300); stroke-width: 1.6; }
.journey__source-waves { fill: none; stroke: var(--color-primary-400); stroke-width: 2; }
.journey__inflow { fill: none; stroke: var(--jr-hot); stroke-width: 3; }
.journey__hx { fill: #fff; stroke: var(--color-ink-600); stroke-width: 2; transition: stroke 0.4s ease-out; }
.journey__coil { fill: none; stroke-width: 2.6; }
.journey__coil--evap { stroke: var(--jr-cold); }
.journey__coil--cond { stroke: var(--jr-hot); }
.journey__comp { fill: #fff; stroke: var(--color-ink-700); stroke-width: 2; }
.journey__power-in { fill: none; stroke: var(--jr-power); stroke-width: 4; }
.journey__bolt { fill: var(--jr-power); stroke: var(--color-ink-700); stroke-width: 1; }
.journey__valve { fill: #fff; stroke: var(--color-ink-700); stroke-width: 2; }
.journey__ref { fill: none; stroke-width: 7; transition: opacity 0.4s ease-out; }
.journey__ref--a { stroke: var(--jr-cool); }
.journey__ref--b { stroke: var(--jr-cold); }
.journey__ref--c { stroke: var(--jr-hot); }
.journey__ref--d { stroke: oklch(0.74 0.13 62); }
.journey__water { fill: none; stroke-width: 6; }
.journey__water--hot { stroke: var(--jr-hot); }
.journey__water--back { stroke: var(--jr-back); }
.journey__marker-disc { fill: var(--color-primary-600); transition: fill 0.3s ease-out; }
.journey__marker-num { fill: #fff; font: 700 12px var(--font-display); text-anchor: middle; dominant-baseline: central; }
.journey__label { fill: var(--color-primary-900); font: 650 15px var(--font-display); }
.journey__label--center { text-anchor: middle; }
.journey__energy { opacity: 0; transform-box: fill-box; transform-origin: center; }
.journey__energy rect { fill: #fff; stroke: var(--color-accent-700); stroke-width: 2; }
.journey__energy text { fill: var(--color-primary-900); font: 700 13px var(--font-display); text-anchor: middle; }

/* Schmale Displays: Beschriftung entfällt (die Schrittkarte nennt die Station),
   die Nummernmarken wachsen, damit sie lesbar bleiben. */
@media (max-width: 599px) {
  .journey__label { display: none; }
  .journey__marker { transform-box: fill-box; transform-origin: center; scale: 1.8; }
}

.journey--cycle .journey__flow { stroke-width: 2; }
.journey--cycle .journey__fan,
.journey--cycle .journey__bolt { transform-box: fill-box; transform-origin: center; }

/* Aktive Station hervorheben, übrige Kreisabschnitte zurücknehmen. */
.journey--cycle:not([data-step="5"]) .journey__ref { opacity: 0.35; }
.journey--cycle[data-step="1"] :is(.journey__ref--a, .journey__ref--b),
.journey--cycle[data-step="2"] :is(.journey__ref--b, .journey__ref--c),
.journey--cycle[data-step="3"] :is(.journey__ref--c, .journey__ref--d),
.journey--cycle[data-step="4"] :is(.journey__ref--d, .journey__ref--a) { opacity: 1; }
/* Beschriftung bleibt voll lesbar; die aktive Station trägt eine gefüllte Marke. */
.journey--cycle:not([data-step="5"]) .journey__marker-disc { fill: #fff; stroke: var(--color-primary-600); stroke-width: 2; }
.journey--cycle:not([data-step="5"]) .journey__marker-num { fill: var(--color-primary-800); }
.journey--cycle[data-step="1"] .journey__marker--1 .journey__marker-disc,
.journey--cycle[data-step="2"] .journey__marker--2 .journey__marker-disc,
.journey--cycle[data-step="3"] .journey__marker--3 .journey__marker-disc,
.journey--cycle[data-step="4"] .journey__marker--4 .journey__marker-disc { fill: var(--color-primary-600); transition: fill 0.3s ease-out; }
.journey--cycle[data-step="1"] .journey__marker--1 .journey__marker-num,
.journey--cycle[data-step="2"] .journey__marker--2 .journey__marker-num,
.journey--cycle[data-step="3"] .journey__marker--3 .journey__marker-num,
.journey--cycle[data-step="4"] .journey__marker--4 .journey__marker-num { fill: #fff; }
.journey--cycle[data-step="1"] .journey__hx--evap,
.journey--cycle[data-step="3"] .journey__hx--cond { stroke: var(--color-accent-700); stroke-width: 3.2; }

.journey--cycle .journey__inflow,
.journey--cycle .journey__water,
.journey--cycle .journey__power-in,
.journey--cycle .journey__bolt { transition: opacity 0.4s ease-out; }
.journey--cycle:is([data-step="2"], [data-step="3"], [data-step="4"]) .journey__inflow,
.journey--cycle:is([data-step="1"], [data-step="3"], [data-step="4"]) :is(.journey__power-in, .journey__bolt),
.journey--cycle:is([data-step="1"], [data-step="2"], [data-step="4"]) .journey__water { opacity: 0.3; }
.journey--cycle:is([data-step="3"], [data-step="5"]) .journey__rad { fill: var(--jr-hot-soft); stroke: var(--jr-hot); }
.journey--cycle[data-step="5"] .journey__energy { opacity: 1; }

.journey--cycle .journey__flow { opacity: 0; }
.journey--cycle[data-step="1"] :is(.journey__flow--a, .journey__flow--b),
.journey--cycle[data-step="2"] :is(.journey__flow--b, .journey__flow--c),
.journey--cycle[data-step="3"] :is(.journey__flow--c, .journey__flow--d, .journey__flow--hot, .journey__flow--back),
.journey--cycle[data-step="4"] :is(.journey__flow--d, .journey__flow--a),
.journey--cycle[data-step="5"] .journey__flow { opacity: 1; }

.journey--cycle.is-touched .journey__flow { animation: jr-flow 1s linear 0.2s 6; }
.journey--cycle.is-touched .journey__flow--back { animation-name: jr-flow-back; }
.journey--cycle.is-touched:is([data-step="1"], [data-step="5"]) .journey__inflow { animation: jr-push 1s ease-in-out 0.2s 5; }
.journey--cycle.is-touched:is([data-step="2"], [data-step="5"]) .journey__fan { animation: jr-spin 0.8s linear 0.2s 7; }
.journey--cycle.is-touched:is([data-step="2"], [data-step="5"]) .journey__bolt { animation: jr-pulse 0.8s ease-in-out 0.2s 6 alternate; }
.journey--cycle.is-touched[data-step="3"] .journey__heat { animation: jr-rise 1.5s ease-in-out 0.5s 4; }
.journey--cycle.is-touched[data-step="5"] .journey__energy { animation: jr-pop 0.5s var(--ease-spring) both; }
.journey--cycle.is-touched[data-step="5"] .journey__energy--power { animation-delay: 0.3s; }
.journey--cycle.is-touched[data-step="5"] .journey__energy--heat { animation-delay: 0.6s; }
.journey--cycle .journey__heat { opacity: 0; transition: opacity 0.4s ease-out; }
.journey--cycle:is([data-step="3"], [data-step="5"]) .journey__heat { opacity: 1; }

/* ---------- Fortschrittsbalken der Schritt-Knöpfe ----------------------- */
.journey.is-auto .journey__pick[aria-pressed="true"]::after { animation: jr-timer var(--jr-step) linear both; }

/* ---------- Keyframes --------------------------------------------------- */
@keyframes jr-pop { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }
@keyframes jr-drop { from { opacity: 0; translate: 0 -18px; } to { opacity: 1; translate: 0 0; } }
@keyframes jr-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes jr-timer { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes jr-flow { to { stroke-dashoffset: -0.48; } }
@keyframes jr-flow-back { from { stroke-dashoffset: -0.48; } to { stroke-dashoffset: 0; } }
@keyframes jr-flicker { from { scale: 1 1; } to { scale: 0.86 1.12; } }
@keyframes jr-rise { 0%, 100% { translate: 0 0; opacity: 1; } 50% { translate: 0 -5px; opacity: 0.55; } }
@keyframes jr-spin { to { rotate: 360deg; } }
@keyframes jr-twinkle { 0%, 100% { scale: 1; } 50% { scale: 1.18; } }
@keyframes jr-blink { 0% { fill: var(--color-accent-600); } 100% { fill: var(--color-ink-400); } }
@keyframes jr-push { 0%, 100% { translate: 0 0; } 50% { translate: 6px 0; } }
@keyframes jr-pulse { from { scale: 1; } to { scale: 1.15; } }

/* Lkw: rückwärts heran, Brücke kippen, vorziehen, Gerät gleitet ab. */
@keyframes jr-truck-drop-vehicle {
  0% { translate: -640px 0; }
  40%, 56% { translate: 0 0; }
  80% { translate: -150px 0; }
  100% { translate: -720px 0; }
}
@keyframes jr-truck-drop-bed {
  0%, 42% { rotate: 0deg; }
  54%, 82% { rotate: 7deg; }
  100% { rotate: 0deg; }
}
@keyframes jr-truck-drop-unit {
  0% { translate: -640px -26px; rotate: 0deg; }
  42% { translate: 0 -26px; rotate: 0deg; }
  54%, 56% { translate: 0 -26px; rotate: 7deg; }
  80%, 100% { translate: 0 0; rotate: 0deg; }
}
@keyframes jr-truck-drop-wheel {
  0% { rotate: -2816deg; }
  40%, 56% { rotate: 0deg; }
  80% { rotate: -660deg; }
  100% { rotate: -3168deg; }
}
@keyframes jr-truck-lift-vehicle {
  0% { translate: -720px 0; }
  30% { translate: -150px 0; }
  52%, 62% { translate: 0 0; }
  100% { translate: -720px 0; }
}
@keyframes jr-truck-lift-bed {
  0%, 22% { rotate: 0deg; }
  30%, 52% { rotate: 7deg; }
  60%, 100% { rotate: 0deg; }
}
@keyframes jr-truck-lift-unit {
  0%, 30% { translate: 0 0; rotate: 0deg; }
  52% { translate: 0 -26px; rotate: 7deg; }
  60%, 62% { translate: 0 -26px; rotate: 0deg; }
  100% { translate: -720px -26px; rotate: 0deg; }
}
@keyframes jr-truck-lift-wheel {
  0% { rotate: -3168deg; }
  30% { rotate: -660deg; }
  52%, 62% { rotate: 0deg; }
  100% { rotate: -3168deg; }
}

/* Zugfahrzeug: rückwärts mit Anhänger heran, abkuppeln, vorwärts weg. */
@keyframes jr-tow-drop-vehicle {
  0% { translate: -640px 0; }
  45%, 60% { translate: 0 0; }
  100% { translate: -720px 0; }
}
@keyframes jr-tow-drop-unit {
  0% { translate: -640px 0; }
  45%, 100% { translate: 0 0; }
}
@keyframes jr-tow-drop-wheel {
  0% { rotate: -3328deg; }
  45%, 60% { rotate: 0deg; }
  100% { rotate: -3744deg; }
}
@keyframes jr-tow-drop-trailer-wheel {
  0% { rotate: -3667deg; }
  45%, 100% { rotate: 0deg; }
}
@keyframes jr-tow-lift-vehicle {
  0% { translate: -720px 0; }
  40%, 52% { translate: 0 0; }
  100% { translate: -720px 0; }
}
@keyframes jr-tow-lift-unit {
  0%, 52% { translate: 0 0; }
  100% { translate: -720px 0; }
}
@keyframes jr-tow-lift-wheel {
  0% { rotate: -3744deg; }
  40%, 52% { rotate: 0deg; }
  100% { rotate: -3744deg; }
}
@keyframes jr-tow-lift-trailer-wheel {
  0%, 52% { rotate: 0deg; }
  100% { rotate: -4126deg; }
}