/* ==========================================================================
   motion.css — jede Bewegung der Seite steht hier.
   Regel: Bewegung trägt Bedeutung. Nichts bewegt sich zur Zierde.
   ========================================================================== */

/* Muss die erste Regel bleiben. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Hintergrund — Ken Burns, 45s. Bewusst unterhalb der Wahrnehmungsschwelle.
   Der Parallaxe-Versatz liegt in der translate3d-Komponente derselben
   Transform, damit sich beides nicht gegenseitig überschreibt.
   -------------------------------------------------------------------------- */
@keyframes ken-burns {
  0%   { transform: translate3d(var(--par-bg-x), var(--par-bg-y), 0) scale(1); }
  50%  { transform: translate3d(var(--par-bg-x), var(--par-bg-y), 0) scale(1.06); }
  100% { transform: translate3d(var(--par-bg-x), var(--par-bg-y), 0) scale(1); }
}

.bg__img.is-visible {
  animation: ken-burns 45s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .bg__img.is-visible { animation: none; transform: none; }
}

/* --------------------------------------------------------------------------
   Sterne — drei Ebenen, versetzte Takte. Erzeugt Tiefe hinter dem Glas.
   -------------------------------------------------------------------------- */
@keyframes twinkle {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 0.85; }
}

.bg__stars--1 span { animation: twinkle 2.4s ease-in-out infinite; }
.bg__stars--2 span { animation: twinkle 3s   ease-in-out infinite; }
.bg__stars--3 span { animation: twinkle 4.5s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   Karten beim Laden — von unten einblenden, 60ms gestaffelt.
   Die Verzögerung setzt app.js als --enter-delay.
   -------------------------------------------------------------------------- */
@keyframes card-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.card {
  animation: card-enter var(--dur-slow) var(--ease-out) both;
  animation-delay: var(--enter-delay, 0ms);
}

/* --------------------------------------------------------------------------
   Uhr — der Doppelpunkt pulst im Sekundentakt. Nur er, nicht die Ziffern.
   -------------------------------------------------------------------------- */
@keyframes colon-beat {
  0%, 45%   { opacity: 1; }
  55%, 100% { opacity: 0.22; }
}

.clock__colon { animation: colon-beat 1s steps(1, end) infinite; }

/* --------------------------------------------------------------------------
   Kritischer Termin — pulst nur unter 7 Tagen Restzeit.
   Genau ein Element auf der Seite darf pulsen, sonst wird es zu Rauschen.
   -------------------------------------------------------------------------- */
@keyframes urgent-beat {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.88); }
}

.event__glyph.is-urgent { animation: urgent-beat 1.8s var(--ease-soft) infinite; }

/* --------------------------------------------------------------------------
   Flagge — Wellenbewegung, 4s, Ursprung links mittig.
   -------------------------------------------------------------------------- */
@keyframes flag-wave {
  0%, 100% { transform: skewY(0deg); }
  50%      { transform: skewY(-1.2deg); }
}

.flag__svg {
  transform-origin: left center;
  animation: flag-wave 4s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Depot — die Verlaufslinie zeichnet sich selbst. Lenkt den Blick auf die Zahl.
   Pfadlänge setzt depot.js als --path-len.
   -------------------------------------------------------------------------- */
@keyframes draw-line {
  from { stroke-dashoffset: var(--path-len, 1000); }
  to   { stroke-dashoffset: 0; }
}

.depot__path {
  stroke-dasharray: var(--path-len, 1000);
  animation: draw-line 1.6s var(--ease-out) both;
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.depot__area { animation: fade-in 1.6s var(--ease-out) both; }

/* --------------------------------------------------------------------------
   Faktenwechsel — seitliches Gleiten. Die Richtung sagt, wohin geblättert wird.
   -------------------------------------------------------------------------- */
@keyframes fact-out-left {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateX(-12px); }
}
@keyframes fact-in-right {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fact-out-right {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateX(12px); }
}
@keyframes fact-in-left {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}

.fact__body.is-out-next { animation: fact-out-left  220ms var(--ease-out) both; }
.fact__body.is-in-next  { animation: fact-in-right  220ms var(--ease-out) both; }
.fact__body.is-out-prev { animation: fact-out-right 220ms var(--ease-out) both; }
.fact__body.is-in-prev  { animation: fact-in-left   220ms var(--ease-out) both; }

/* --------------------------------------------------------------------------
   Favoritenstern — kurzer Sprung als Bestätigung.
   -------------------------------------------------------------------------- */
@keyframes star-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.is-popping { animation: star-pop 320ms var(--ease-out); }

/* --------------------------------------------------------------------------
   Einblendungen — Overlay über der Karte.
   -------------------------------------------------------------------------- */
@keyframes overlay-in {
  from { opacity: 0; transform: translateY(6px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.overlay { animation: overlay-in var(--dur-mid) var(--ease-out) both; }

/* --------------------------------------------------------------------------
   Weicher Inhaltstausch nach einem Netzabruf.
   -------------------------------------------------------------------------- */
@keyframes swap-in {
  from { opacity: 0.35; }
  to   { opacity: 1; }
}
.is-swapping { animation: swap-in var(--dur-slow) var(--ease-soft) both; }

/* --------------------------------------------------------------------------
   Touchgeräte: keine Parallaxe, kein Ken Burns.
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .bg__img.is-visible { animation: none; }
  .shell { transform: none; }
}