/* Vintage Express – drehende Karte (gehört zu karte.js). Farbe des Lichtscheins: --vx-schein, größte Breite: --vx-breite. */
.vx-karte {
  position: relative;
  width: 100%;
  max-width: var(--vx-breite, 720px);
  margin-inline: auto;
}
.vx-karte__schein {
  position: absolute;
  inset: 4% 3% 26% 3%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--vx-schein, rgba(255, 238, 208, .6)), rgba(255, 255, 255, 0));
  filter: blur(16px);
  pointer-events: none;
  will-change: transform;
}
.vx-karte__buehne {
  position: relative;
  aspect-ratio: 720 / 740;
  will-change: transform;
  pointer-events: none;
}
.vx-karte__still,
.vx-karte__bild {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.vx-karte__bild { opacity: 0; }
.vx-karte--laeuft .vx-karte__bild { opacity: 1; }
.vx-karte--laeuft .vx-karte__still { opacity: 0; }

/* Ohne WebGL steht die Karte nicht tot: das Standbild schwingt sanft, ein Lichtstreif wandert darüber (nur transform und opacity).
   Der Streif ist auf die Form der Karte beschnitten (karte.webp als Maske, liegt neben dieser Datei). */
.vx-karte__licht {
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
  -webkit-mask: url("karte.webp") center / 100% 100% no-repeat;
  mask: url("karte.webp") center / 100% 100% no-repeat;
}
.vx-karte__streif {
  position: absolute;
  top: 0;
  bottom: 26%;
  left: 0;
  width: 30%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .62) 50%, rgba(255, 255, 255, 0));
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .vx-karte:not(.vx-karte--laeuft) .vx-karte__still,
  .vx-karte:not(.vx-karte--laeuft) .vx-karte__licht { animation: vx-schwingen 9s ease-in-out infinite; }
  .vx-karte:not(.vx-karte--laeuft) .vx-karte__licht { display: block; }
  .vx-karte:not(.vx-karte--laeuft) .vx-karte__streif { animation: vx-streif 6s ease-in-out infinite; }
}
@keyframes vx-schwingen {
  0%, 100% { transform: perspective(1100px) rotateY(-8deg) translateY(0); }
  50% { transform: perspective(1100px) rotateY(8deg) translateY(-6px); }
}
@keyframes vx-streif {
  0% { transform: translateX(-110%); opacity: 0; }
  12% { opacity: 1; }
  52% { transform: translateX(340%); opacity: 1; }
  60%, 100% { transform: translateX(340%); opacity: 0; }
}