/* ==========================================================================
   Octopus Service – Bewegung & Micro-UX
   „Less is more“: wenige, ruhige Bewegungen, nur transform/opacity
   (GPU) und kurze Linienzeichnungen. Endzustände = Layout aus Iteration V01.
   ========================================================================== */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* sanftes Auslaufen */
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);  /* ruhiges Zeichnen */
  --dur-s: 200ms;
  --dur-m: 600ms;
  --dur-l: 1600ms;
}

/* ---------------------------------------------------------------------
   1 · Hero – Tentakel baut sich vom Ansatz bis zur Spitze auf
   Linien zeichnen sich (stroke-dashoffset, leicht gestaffelt), die
   Saugnäpfe erscheinen in dem Moment, in dem die Linien sie erreichen.
   Danach Parallax (JS, nur Desktop mit Maus).
   --------------------------------------------------------------------- */
.tentacle-stage, .tentacle-parallax { position: absolute; inset: 0; }
.tentacle-parallax { will-change: transform; }
.tentacle-parallax svg { width: 100%; height: 100%; }

.tentacle-stage .tentacle-path { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
.tentacle-stage.is-in .tentacle-path {
  stroke-dashoffset: 0; opacity: 1;
  transition: stroke-dashoffset 2100ms cubic-bezier(0.33, 0, 0.2, 1) calc(200ms + var(--j, var(--k, 0)) * 14ms),
              opacity 160ms linear calc(200ms + var(--j, var(--k, 0)) * 14ms);
}
.tentacle-stage .sucker { opacity: 0; transform: scale(.2); transform-box: fill-box; transform-origin: center; }
.tentacle-stage.is-in .sucker {
  opacity: 1; transform: none;
  transition: opacity 320ms ease, transform 560ms var(--ease-out);
  transition-delay: calc(480ms + var(--u, calc(var(--s, 0) * 0.043)) * 2000ms);
}

/* Logo im Header: die sechs Arme bewegen sich beim Hover einmal sanft wie Tentakel
   (Drehpunkt = Ansatz am Kopf, Paare links/rechts leicht versetzt) */
.site-header .brand .logo-arm { transform-box: view-box; }
.site-header .brand.is-wiggle .logo-arm--r { animation: arm-r 1500ms cubic-bezier(0.45, 0, 0.25, 1) both; animation-delay: calc(var(--a) * 60ms); }
.site-header .brand.is-wiggle .logo-arm--l { animation: arm-l 1500ms cubic-bezier(0.45, 0, 0.25, 1) both; animation-delay: calc(var(--a) * 60ms); }
@keyframes arm-r { 0% { transform: rotate(0); } 28% { transform: rotate(-7deg); } 58% { transform: rotate(3.5deg); } 82% { transform: rotate(-1deg); } 100% { transform: rotate(0); } }
@keyframes arm-l { 0% { transform: rotate(0); } 28% { transform: rotate(7deg); } 58% { transform: rotate(-3.5deg); } 82% { transform: rotate(1deg); } 100% { transform: rotate(0); } }

/* ---------------------------------------------------------------------
   2 · Wendepunkt – die unterbrochene Kette zeichnet sich
   Reihenfolge: Kasten → Linie → Bruchstelle, am Ende das offene „?“
   --------------------------------------------------------------------- */
.chain--draw .draw-mask { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.chain--draw .c-box,
.chain--draw .c-break,
.chain--draw .unknown-q { opacity: 0; transform-box: fill-box; transform-origin: center; }
.chain--draw .c-box   { transform: translateY(10px); }
.chain--draw .c-break { transform: scale(.4); }

.chain--draw.is-drawn .c-box {
  opacity: 1; transform: none;
  transition: opacity 500ms ease, transform 700ms var(--ease-out);
  transition-delay: calc(var(--i) * 260ms);
}
.chain--draw.is-drawn .draw-mask {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 640ms var(--ease-io) calc(220ms + var(--i) * 260ms);
}
.chain--draw.is-drawn .draw-mask--q { transition: stroke-dashoffset 900ms var(--ease-io) 1260ms; }
.chain--draw.is-drawn .c-break {
  opacity: 1; transform: none;
  transition: opacity 260ms ease, transform 420ms var(--ease-out);
  transition-delay: calc(560ms + var(--i) * 260ms);
}
.chain--draw.is-drawn .unknown-q { opacity: 1; transition: opacity 600ms ease 1900ms; }
/* Wendepunkt: die offene Frage „atmet“ ganz leise */
.chain--draw.is-drawn .c-float { animation: breathe 5.2s ease-in-out 2.6s infinite; }
@keyframes breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.chain-caption--draw { opacity: 0; transform: translateY(6px); }
.chain-caption--draw.is-drawn { opacity: 1; transform: none; transition: opacity 600ms ease 2100ms, transform 700ms var(--ease-out) 2100ms; }

/* ---------------------------------------------------------------------
   3 · Die Antwort – Fortschritt 01 → 04 synchron zum Scrollen
   Unverbunden = feine, gestrichelte Spur. Erreicht = Petrol-Linie füllt
   sich, Knoten rastet ein, Etappe darunter wird markiert.
   --------------------------------------------------------------------- */
.chain--progress .wire--track { stroke: var(--border-strong); stroke-opacity: .45; stroke-dasharray: 3 5; stroke-width: 1.2; }
.chain--progress .wire--fill {
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - var(--fill, 0));
  transition: stroke-dashoffset 160ms linear;
}
.chain--progress .c-knot,
.chain--progress .knot-dot { transform-box: fill-box; transform-origin: center; }
.chain--progress .knot { stroke: var(--border-strong); transition: stroke var(--dur-s) ease; }
.chain--progress .knot-dot { transform: scale(0); transition: transform 420ms var(--ease-out); }
.chain--progress .knot-label { fill: var(--text-muted); transition: fill var(--dur-s) ease; }
.chain--progress .c-knot { transition: transform 420ms var(--ease-out); }
.chain--progress .c-wire.is-active .knot { stroke: var(--primary); }
.chain--progress .c-wire.is-active .knot-dot { transform: scale(1); }
.chain--progress .c-wire.is-active .knot-label { fill: var(--primary); }
.chain--progress .c-wire.is-active .c-knot { animation: knot-pop 520ms var(--ease-out); }
.chain--progress .c-wire.is-hint .c-knot { transform: scale(1.18); }
@keyframes knot-pop { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }

.chain--progress .node { stroke: var(--border); transition: stroke 400ms ease; }
.chain--progress .node-icon { color: var(--text-muted); opacity: .55; transition: color 400ms ease, opacity 400ms ease; }
.chain--progress .c-box.is-active .node { stroke: var(--border-strong); }
.chain--progress .c-box.is-active .node-icon { color: var(--primary); opacity: 1; }

.chain--progress .end-track { fill: none; stroke: var(--border-strong); stroke-opacity: .45; stroke-width: 1.2; stroke-dasharray: 3 5; }
.chain--progress .done { transform-box: fill-box; transform-origin: center; transform: scale(.55); opacity: 0; transition: transform 700ms var(--ease-out), opacity 300ms ease; }
.chain--progress .done-check { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 500ms var(--ease-io); }
.chain--progress .c-end.is-done .done { transform: none; opacity: 1; }
.chain--progress .c-end.is-done .done-check { stroke-dashoffset: 0; transition-delay: 260ms; }

.stages--progress .stage { position: relative; padding-top: var(--space-5); }
.stages--progress .stage::before,
.stages--progress .stage::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--border); }
.stages--progress .stage::after { height: 2px; top: -.5px; background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--ease-out); }
.stages--progress .stage .text-counter { color: var(--text-muted); transition: color 300ms ease; }
.stages--progress .stage.is-active::after { transform: scaleX(1); }
.stages--progress .stage.is-active .text-counter { color: var(--primary); }
.stages--progress .stage.is-hint::after { transform: scaleX(1); }

/* Mobil: Fortschrittsleiste läuft beim Lesen der Etappen unter dem Header mit */
.progress-mini { display: none; }
@media (max-width: 767px) {
  .progress-mini {
    display: block; position: sticky; z-index: 5;
    margin: var(--space-6) calc(var(--page-pad) * -1) 0; padding: var(--space-3) var(--page-pad) var(--space-2);
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--border);
  }
  .progress-mini__row { position: relative; display: flex; justify-content: space-between; align-items: center; }
  .progress-mini__track { position: absolute; left: 14px; right: 14px; top: 50%; height: 0; border-top: 1.2px dashed var(--border-strong); }
  .progress-mini__fill { position: absolute; left: 0; right: 0; top: -1.6px; height: 2px; background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform 160ms linear; }
  .progress-mini__dot {
    position: relative; width: 28px; height: 28px; border-radius: var(--radius-full); display: grid; place-items: center;
    background: var(--bg); border: 1.4px solid var(--border-strong); color: var(--text-muted);
    font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .04em;
    transition: border-color 300ms ease, color 300ms ease, background-color 300ms ease, transform 400ms var(--ease-out);
  }
  .progress-mini__dot.is-active { border-color: var(--primary); color: var(--primary); }
  .progress-mini__dot.is-current { background: var(--primary); color: var(--bg); transform: scale(1.08); }
  .progress-mini__dot--end.is-active { background: var(--primary); color: var(--bg); }
  .progress-mini__title { display: block; margin-top: var(--space-2); color: var(--primary); font-size: 11px; min-height: 16px; }
  .stages--progress { margin-top: var(--space-5); }
  /* Startseite mobil: senkrechte Fortschrittskette ausblenden – die Leiste .progress-mini übernimmt */
  .chain--progress .chain__svg--v, .chain--progress { display: none; }
}

/* ---------------------------------------------------------------------
   4 · So starten wir – Kaskade + Verbindungslinie 1 → 3
   --------------------------------------------------------------------- */
.steps--motion::before { transform: scaleX(0); transform-origin: left center; }
.steps--motion.is-in::before { transform: none; transition: transform 1000ms var(--ease-io) 180ms; }
.steps--motion .step { opacity: 0; transform: translateY(14px); }
.steps--motion.is-in .step { opacity: 1; transform: none; transition: opacity 600ms ease, transform 800ms var(--ease-out); transition-delay: calc(var(--i) * 90ms); }
.steps--motion .step__num::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--primary);
  opacity: 0; transform: scale(1); pointer-events: none;
}
/* Wenn die Linie einen Schritt erreicht, pulsiert sein Knoten einmal */
.steps--motion.is-in .step__num::after { animation: step-ring 900ms var(--ease-out) both; animation-delay: calc(180ms + var(--i) * 480ms); }
.steps--motion.is-in .step__num { animation: step-reach 600ms var(--ease-out) both; animation-delay: calc(180ms + var(--i) * 480ms); }
@keyframes step-ring { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes step-reach { 0% { background: var(--bg); } 35% { background: var(--icon-tile); } 100% { background: var(--bg); } }
@media (max-width: 767px) {
  .steps--motion::before { transform: scaleY(0); transform-origin: center top; }
  .steps--motion.is-in::before { transform: none; }
}

/* ---------------------------------------------------------------------
   5 · Erstgespräch – Fokus, Live-Validierung, Submit
   --------------------------------------------------------------------- */
.field label { transition: color var(--dur-s) ease; }
.field.is-focus label { color: var(--primary); }
.field.is-focus.is-invalid label { color: var(--danger); }

.field__control { position: relative; }
.field__control .input, .field__control .select, .field__control .textarea { display: block; }
.field__control::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent-line); transform: scaleX(0); transform-origin: left center;
  transition: transform 450ms var(--ease-out); pointer-events: none;
}
.field.is-focus .field__control::after { transform: scaleX(1); }
.field.is-invalid .field__control::after { background: var(--danger); }

.input, .select, .textarea { transition: border-color var(--dur-s) ease, box-shadow 280ms ease, background-color var(--dur-s) ease; }
.field__control .input, .field__control .textarea { padding-right: 44px; }
.field__control .select { padding-right: 68px; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 4px rgba(21, 137, 154, .14);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-line) 16%, transparent);
}
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea { border-color: var(--danger); }
.field.is-invalid .input:focus, .field.is-invalid .select:focus, .field.is-invalid .textarea:focus {
  box-shadow: 0 0 0 4px rgba(180, 35, 24, .10);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 14%, transparent);
}

.field__state { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; pointer-events: none; }
.field__control--select .field__state { right: 40px; }
.field__control--area .field__state { top: 14px; margin-top: 0; }
.field__state svg { position: absolute; inset: 0; width: 18px; height: 18px; opacity: 0; transform: scale(.5); transition: opacity var(--dur-s) ease, transform 380ms var(--ease-out); }
.field.is-valid .state-ok { opacity: 1; transform: none; color: var(--success); }
.field.is-invalid .state-err { opacity: 1; transform: none; color: var(--danger); }

.field__error {
  color: var(--danger); font-size: var(--fs-caption); line-height: var(--lh-caption);
  max-height: 0; margin-top: 0; opacity: 0; transform: translateY(-4px); overflow: hidden;
  transition: opacity var(--dur-s) ease, transform 300ms var(--ease-out), max-height 300ms var(--ease-out), margin-top 300ms var(--ease-out);
}
.field.is-invalid .field__error { max-height: 40px; margin-top: var(--space-2); opacity: 1; transform: none; }

.consent input { transition: background-color var(--dur-s) ease, border-color var(--dur-s) ease, box-shadow 280ms ease; }
.consent input:focus-visible { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-line) 16%, transparent); }
.consent input::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--bg); border-bottom: 2px solid var(--bg); transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform 300ms var(--ease-out); }
.consent input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }

/* Buttons: sanfte Tiefe beim Hover (nur mit Maus) */
.btn { transition: background-color var(--dur-s) ease, border-color var(--dur-s) ease, color var(--dur-s) ease, transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(12, 23, 27, .55); }
  .btn--secondary:hover { transform: translateY(-2px); }
}
.btn:active { transform: translateY(0); box-shadow: none; transition-duration: 80ms; }

/* Submit: Label → Spinner → Haken */
.btn--submit { position: relative; }
.btn__label { display: inline-flex; align-items: center; gap: var(--space-3); transition: opacity 220ms ease, transform 350ms var(--ease-out); }
.btn__status { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity 220ms ease; pointer-events: none; }
.btn__status svg { width: 24px; height: 24px; overflow: visible; }
.spin-ring { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: .74; transform-origin: 12px 12px; transition: stroke-dashoffset 450ms var(--ease-out); }
.spin-check { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 420ms var(--ease-io) 260ms; }
.btn--submit.is-loading, .btn--submit.is-success { pointer-events: none; transform: none; box-shadow: none; }
.btn--submit.is-loading .btn__label, .btn--submit.is-success .btn__label { opacity: 0; transform: translateY(-6px); }
.btn--submit.is-loading .btn__status, .btn--submit.is-success .btn__status { opacity: 1; }
.btn--submit.is-loading .spin-ring { animation: spin 900ms linear infinite; }
.btn--submit.is-success .spin-ring { stroke-dashoffset: 0; }
.btn--submit.is-success .spin-check { stroke-dashoffset: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-card.is-sent .form-success { animation: fade-up 700ms var(--ease-out) both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------------
   6 · Vertrauensmerkmale (.oc-trustbar): Spalten erscheinen leicht versetzt
   --------------------------------------------------------------------- */
.js .oc-trustbar.reveal li { opacity: 0; transform: translateY(8px); }
.js .oc-trustbar.reveal.is-visible li { opacity: 1; transform: none; transition: opacity 500ms ease, transform 700ms var(--ease-out); }
.js .oc-trustbar.reveal.is-visible li:nth-child(2) { transition-delay: 90ms; }
.js .oc-trustbar.reveal.is-visible li:nth-child(3) { transition-delay: 180ms; }

/* ---------------------------------------------------------------------
   Barrierefreiheit: reduzierte Bewegung → sofort Endzustand
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tentacle-parallax { transform: none !important; }
  .tentacle-stage .tentacle-path { stroke-dashoffset: 0 !important; opacity: 1 !important; transition: none !important; }
  .tentacle-stage .sucker { opacity: 1 !important; transform: none !important; transition: none !important; }
  .site-header .brand .logo-arm { animation: none !important; }
  .chain--draw .draw-mask { stroke-dashoffset: 0 !important; transition: none !important; }
  .chain--draw .c-box, .chain--draw .c-break, .chain--draw .unknown-q,
  .chain-caption--draw, .steps--motion .step { opacity: 1 !important; transform: none !important; transition: none !important; }
  .chain--draw .c-float, .steps--motion .step__num, .steps--motion .step__num::after,
  .chain--progress .c-knot, .form-card.is-sent .form-success { animation: none !important; }
  .progress-mini__fill { transition: none !important; }
  .js .oc-trustbar.reveal li { opacity: 1 !important; transform: none !important; }
  .steps--motion::before { transform: none !important; transition: none !important; }
  .btn, .btn:hover { transform: none !important; }
  .btn--submit.is-loading .spin-ring { animation: none; stroke-dashoffset: .5; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}