/* ==========================================================================
   LCI Development – Bewegung
   Animationen laufen über transform und opacity. Inhalte sind ohne JavaScript
   vollständig sichtbar (Animationen greifen nur unter .js).
   Bei prefers-reduced-motion werden Bewegungen deaktiviert.
   ========================================================================== */

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse-ring {
  0% { opacity: 0.75; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.9); }
}

@keyframes soft-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes live-dot {
  0% { box-shadow: 0 0 0 0 rgba(226, 59, 70, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(226, 59, 70, 0); }
  100% { box-shadow: 0 0 0 0 rgba(226, 59, 70, 0); }
}

@keyframes scroll-line {
  0% { transform: translateY(-100%); }
  55% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

@keyframes ticker {
  0%, 18% { transform: translateY(0); }
  25%, 43% { transform: translateY(-1.5rem); }
  50%, 68% { transform: translateY(-3rem); }
  75%, 93% { transform: translateY(-4.5rem); }
  100% { transform: translateY(-6rem); }
}

@keyframes tunnel {
  0% { opacity: 0; transform: scale(0.2); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.55); }
}

@keyframes chip-flow {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

@keyframes tick-in {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes packet-drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(6px, -4px); }
}

/* Statusanzeigen ------------------------------------------------------- */
.status-dot--live {
  animation: live-dot 2.4s ease-out infinite;
}

.hero__ticker-list li {
  animation: ticker 12s var(--ease-in-out) infinite;
}

/* Hero-Animationen anhalten (Schalter im Hero) */
.hero.is-paused *,
.hero.is-paused *::before,
.hero.is-paused *::after {
  animation-play-state: paused !important;
}

/* Kamera: Bewegung nur während einer laufenden Aufnahme */
.cam.is-recording .cam__rings ellipse {
  animation: tunnel 3.6s linear infinite;
}

.cam.is-recording .cam__rings ellipse:nth-child(2) { animation-delay: -0.72s; }
.cam.is-recording .cam__rings ellipse:nth-child(3) { animation-delay: -1.44s; }
.cam.is-recording .cam__rings ellipse:nth-child(4) { animation-delay: -2.16s; }
.cam.is-recording .cam__rings ellipse:nth-child(5) { animation-delay: -2.88s; }

/* Einsatzfelder: Ablauf-Schritte leuchten nacheinander auf */
.js .field.is-open .field__flow li {
  background-image: linear-gradient(90deg, transparent 0 50%, rgba(18, 62, 114, 0.1) 50% 100%);
  background-size: 200% 100%;
  animation: chip-flow 0.6s var(--ease-out) both;
}

.js .field.is-open .field__flow li:nth-child(2) { animation-delay: 0.15s; }
.js .field.is-open .field__flow li:nth-child(3) { animation-delay: 0.3s; }
.js .field.is-open .field__flow li:nth-child(4) { animation-delay: 0.45s; }

.js .roadmap__panel:not([hidden]) {
  animation: panel-in 0.55s var(--ease-out) both;
}

.status-panel__ticks i.is-new {
  animation: tick-in 0.5s var(--ease-out) both;
}

.lost-packet__packet {
  animation: packet-drift 4s ease-in-out infinite;
}

/* Scroll-Reveal --------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 1.25rem, 0);
  transition: opacity 0.6s var(--ease-out), transform 0.75s var(--ease-out);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Zeilen „Ausgangslage → Lösung“: Lösung erscheint nach der Ausgangslage */
.js [data-reveal="row"] {
  opacity: 1;
  transform: none;
}

.js [data-reveal="row"] .shift__before {
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}

.js [data-reveal="row"] .shift__connector {
  opacity: 0;
  transform: translateX(-0.75rem);
  transition: opacity 0.5s var(--ease-out) 0.15s, transform 0.6s var(--ease-out) 0.15s;
}

.js [data-reveal="row"] .shift__after {
  opacity: 0;
  transform: translateX(-1rem);
  transition: opacity 0.6s var(--ease-out) 0.3s, transform 0.75s var(--ease-out) 0.3s;
}

.js [data-reveal="row"].is-visible .shift__before,
.js [data-reveal="row"].is-visible .shift__connector,
.js [data-reveal="row"].is-visible .shift__after {
  opacity: 1;
  transform: none;
}

/* Überschriften wortweise einblenden */
.js [data-split] .split-w {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  vertical-align: top;
  padding: 0.1em 0.02em 0.12em;
  margin: -0.1em -0.02em -0.12em;
}

.js [data-split] .split-w > span {
  display: inline-block;
  max-width: 100%;
  transform: translate3d(0, 112%, 0);
  transition: transform 0.8s var(--ease-out);
  transition-delay: var(--d, 0s);
}

.js [data-split].is-visible .split-w > span {
  transform: none;
}

/* Über-uns-Motiv: Modul verlässt die Box */
.js .motto-card:not(.is-visible) .motto-card__module {
  transform: translate(-48px, 20px);
}

.js .motto-card__trail {
  opacity: 0;
  transition: opacity 0.6s ease 0.7s;
}

.js .motto-card.is-visible .motto-card__trail {
  opacity: 1;
}

/* Scroll-gesteuerter Übergang dunkel → hell (progressive Verbesserung) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section--curtain {
      animation: curtain linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }

    @keyframes curtain {
      from { clip-path: inset(0 2.5% 0 2.5% round 2rem 2rem 0 0); }
      to { clip-path: inset(0 0 0 0 round 0); }
    }
  }
}

/* Reduzierte Bewegung -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }

  .js [data-reveal],
  .js [data-reveal="row"] .shift__before,
  .js [data-reveal="row"] .shift__connector,
  .js [data-reveal="row"] .shift__after,
  .js [data-split] .split-w > span {
    opacity: 1;
    transform: none;
  }

  .js .motto-card__module {
    transform: none !important;
  }

  .hero__ticker-list li {
    animation: none;
  }

  .hero__ticker-list li:not(:first-child) {
    display: none;
  }

  .cursor {
    display: none !important;
  }
}