/* ═══════════════════════════════════════════════════════════════════
   FLYING CARDS — Fliegende Karten-Silhouetten im Closer (VP4)
   Drift-Animation mit CSS-Variablen (Randomisierung via JS)
   ═══════════════════════════════════════════════════════════════════ */

.flying-cards {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0.5;
  pointer-events: none;
}

.flying-card {
  position: absolute;
  width: 70px;
  height: 105px;
  border-radius: 6px;
  border: 1px solid currentColor;
  opacity: 0;
  pointer-events: none;
  /* CSS-Variablen werden von flying-cards.js befüllt */
  --drift-duration: 20s;
  --drift-delay: 0s;
  --drift-x-offset: 0;
  --drift-y-offset: 0;
  --drift-rotate-offset: 0deg;
}

.flying-card::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 0.5px solid currentColor;
  border-radius: 4px;
  opacity: 0.4;
}

.flying-card::after {
  content: attr(data-rank);
  position: absolute;
  top: 8px;
  left: 9px;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 18px;
}

/* Stationsfarben: 40-50% border/text, 8-10% background */
.flying-card.fc-blue {
  color: rgba(59, 130, 246, 0.45);
  background: rgba(59, 130, 246, 0.09);
  animation: drift1 var(--drift-duration) ease-in-out infinite;
  animation-delay: var(--drift-delay);
}
.flying-card.fc-purple {
  color: rgba(139, 92, 246, 0.45);
  background: rgba(139, 92, 246, 0.09);
  animation: drift2 var(--drift-duration) ease-in-out infinite;
  animation-delay: var(--drift-delay);
}
.flying-card.fc-steel {
  color: rgba(110, 145, 180, 0.44);
  background: rgba(110, 145, 180, 0.08);
  animation: drift3 var(--drift-duration) ease-in-out infinite;
  animation-delay: var(--drift-delay);
}
.flying-card.fc-green {
  color: rgba(110, 180, 140, 0.45);
  background: rgba(110, 180, 140, 0.09);
  animation: drift4 var(--drift-duration) ease-in-out infinite;
  animation-delay: var(--drift-delay);
}
.flying-card.fc-copper {
  color: rgba(170, 125, 85, 0.44);
  background: rgba(170, 125, 85, 0.08);
  animation: drift5 var(--drift-duration) ease-in-out infinite;
  animation-delay: var(--drift-delay);
}
.flying-card.fc-coral {
  color: rgba(160, 85, 95, 0.48);
  background: rgba(160, 85, 95, 0.10);
  animation: drift6 var(--drift-duration) ease-in-out infinite;
  animation-delay: var(--drift-delay);
}

/* Flugbahnen (Referenz: flying-cards-preview.html) */
@keyframes drift1 {
  0%   { transform: translate(calc(-120vw + var(--drift-x-offset)), calc(10vh + var(--drift-y-offset))) rotate(calc(-25deg + var(--drift-rotate-offset))); opacity: 0; }
  8%   { opacity: 0.7; }
  50%  { transform: translate(calc(20vw + var(--drift-x-offset)), calc(-15vh + var(--drift-y-offset))) rotate(calc(15deg + var(--drift-rotate-offset))); opacity: 0.5; }
  92%  { opacity: 0.7; }
  100% { transform: translate(calc(120vw + var(--drift-x-offset)), calc(30vh + var(--drift-y-offset))) rotate(calc(45deg + var(--drift-rotate-offset))); opacity: 0; }
}

@keyframes drift2 {
  0%   { transform: translate(calc(120vw + var(--drift-x-offset)), calc(-20vh + var(--drift-y-offset))) rotate(calc(30deg + var(--drift-rotate-offset))); opacity: 0; }
  8%   { opacity: 0.6; }
  50%  { transform: translate(calc(-10vw + var(--drift-x-offset)), calc(25vh + var(--drift-y-offset))) rotate(calc(-20deg + var(--drift-rotate-offset))); opacity: 0.4; }
  92%  { opacity: 0.6; }
  100% { transform: translate(calc(-120vw + var(--drift-x-offset)), calc(-10vh + var(--drift-y-offset))) rotate(calc(-50deg + var(--drift-rotate-offset))); opacity: 0; }
}

@keyframes drift3 {
  0%   { transform: translate(calc(-80vw + var(--drift-x-offset)), calc(50vh + var(--drift-y-offset))) rotate(calc(10deg + var(--drift-rotate-offset))); opacity: 0; }
  8%   { opacity: 0.5; }
  50%  { transform: translate(calc(30vw + var(--drift-x-offset)), calc(-30vh + var(--drift-y-offset))) rotate(calc(-35deg + var(--drift-rotate-offset))); opacity: 0.35; }
  92%  { opacity: 0.5; }
  100% { transform: translate(calc(100vw + var(--drift-x-offset)), calc(-50vh + var(--drift-y-offset))) rotate(calc(-60deg + var(--drift-rotate-offset))); opacity: 0; }
}

@keyframes drift4 {
  0%   { transform: translate(calc(80vw + var(--drift-x-offset)), calc(60vh + var(--drift-y-offset))) rotate(calc(-15deg + var(--drift-rotate-offset))); opacity: 0; }
  8%   { opacity: 0.6; }
  50%  { transform: translate(calc(-25vw + var(--drift-x-offset)), calc(-10vh + var(--drift-y-offset))) rotate(calc(25deg + var(--drift-rotate-offset))); opacity: 0.4; }
  92%  { opacity: 0.6; }
  100% { transform: translate(calc(-110vw + var(--drift-x-offset)), calc(50vh + var(--drift-y-offset))) rotate(calc(55deg + var(--drift-rotate-offset))); opacity: 0; }
}

@keyframes drift5 {
  0%   { transform: translate(calc(-50vw + var(--drift-x-offset)), calc(-40vh + var(--drift-y-offset))) rotate(calc(40deg + var(--drift-rotate-offset))); opacity: 0; }
  8%   { opacity: 0.5; }
  50%  { transform: translate(calc(40vw + var(--drift-x-offset)), calc(20vh + var(--drift-y-offset))) rotate(calc(-10deg + var(--drift-rotate-offset))); opacity: 0.35; }
  92%  { opacity: 0.5; }
  100% { transform: translate(calc(80vw + var(--drift-x-offset)), calc(60vh + var(--drift-y-offset))) rotate(calc(-40deg + var(--drift-rotate-offset))); opacity: 0; }
}

@keyframes drift6 {
  0%   { transform: translate(calc(100vw + var(--drift-x-offset)), calc(40vh + var(--drift-y-offset))) rotate(calc(-35deg + var(--drift-rotate-offset))); opacity: 0; }
  8%   { opacity: 0.7; }
  50%  { transform: translate(calc(-35vw + var(--drift-x-offset)), calc(-20vh + var(--drift-y-offset))) rotate(calc(20deg + var(--drift-rotate-offset))); opacity: 0.5; }
  92%  { opacity: 0.7; }
  100% { transform: translate(calc(-100vw + var(--drift-x-offset)), calc(-40vh + var(--drift-y-offset))) rotate(calc(50deg + var(--drift-rotate-offset))); opacity: 0; }
}