/* GLAD-O-POLIS 2.0 — Geld fliegt.
   Gehört zu js/ui/geldflug.js. Farben nur über var() aus css/tokens.css.

   Jeder Schein bekommt seine Wegpunkte als eigene Werte mit:
   --gf-x0 --gf-y0   Mitte am Start
   --gf-x1 --gf-y1   Mitte am Ziel
   --gf-drehung0 --gf-drehung1
   --gf-verzug --gf-dauer

   Die Breite der Scheine lässt sich von außen setzen: --geldflug-breite. */

/* Liegt über Brett und Seitenleiste, unter jedem Dialog. Nimmt keinen Klick an. */
.geldflug-ebene {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 60;
  overflow: hidden;
  pointer-events: none;
}

.geldflug-schein {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--geldflug-breite, 72px);
  height: auto;
  /* Hält den Platz, solange das Bild noch lädt. Ist es da, gilt sein
     eigenes Seitenverhältnis; verzerrt wird nichts. */
  aspect-ratio: auto 2 / 1;
  object-fit: contain;
  margin: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  opacity: 1;
  transform:
    translate(calc(var(--gf-x0, 0px) - 50%), calc(var(--gf-y0, 0px) - 50%))
    rotate(var(--gf-drehung0, 0deg))
    scale(1);
  transition:
    transform var(--gf-dauer, 400ms) cubic-bezier(.35, .05, .3, 1) var(--gf-verzug, 0ms),
    opacity calc(var(--gf-dauer, 400ms) * .3) ease-in
      calc(var(--gf-verzug, 0ms) + var(--gf-dauer, 400ms) * .7);
  will-change: transform, opacity;
  filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--kontur) 40%, transparent));
}

.geldflug-schein--unterwegs {
  opacity: 0;
  transform:
    translate(calc(var(--gf-x1, 0px) - 50%), calc(var(--gf-y1, 0px) - 50%))
    rotate(var(--gf-drehung1, 0deg))
    scale(.6);
}

@media (prefers-reduced-motion: reduce) {
  .geldflug-schein { display: none; transition: none; }
}
.bewegung-aus .geldflug-schein { display: none; transition: none; }