/* ===========================================================================
   match-intro — Aufmarsch der Figuren zum Partiebeginn (match-intro.js,
   match-intro-fx.js). Die Ebene liegt im #boardWrap genau ueber dem Brett,
   die Bewegung rechnet JS (Web Animations), hier stehen nur die Looks.
   =========================================================================== */

.mpIntro {
  position: absolute;
  z-index: 6;
  pointer-events: none;
}
.mpIntro > * {
  position: absolute;
  pointer-events: none;
}

.mpIntro-unit {
  will-change: transform;
}
.mpIntro-unit.is-waiting {
  visibility: hidden;
}

/* Kopie des echten Chips: fuellt die Einheit, Drehpunkt am Fuss. */
.mpIntro-piece.chip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  transform-origin: 50% 96%;
  will-change: transform, opacity;
}

/* Bodenschatten beim Herabsinken (Classic, Raiders): klein und dunkel, sobald
   die Figur steht, dann blendet er aus (die Figur hat ihren eigenen Schatten). */
.mpIntro-shadow {
  position: absolute;
  left: 12%;
  width: 76%;
  top: 86%;
  height: 21%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(0, 0, 0, .82), rgba(0, 0, 0, .38) 58%, transparent);
  opacity: 0;
}

/* Hollow: Grabriss in Seelengruen an der Standlinie. */
.mpIntro-grave {
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 230, 168, .85) 24%, #d9fff3 50%, rgba(0, 230, 168, .85) 76%, transparent);
  box-shadow: 0 0 6px rgba(0, 230, 168, .55);
  transform-origin: 50% 50%;
  opacity: 0;
}

/* Koenig setzt auf: flacher Goldring am Fuss (Geometrie wie der Landering). */
.mpIntro-kingRing {
  border-radius: 50%;
  border: 2px solid rgba(236, 200, 110, .95);
  border-top-color: rgba(236, 200, 110, .3);
  box-shadow: 0 2px 10px -2px rgba(236, 200, 110, .85);
  opacity: 0;
}

/* Gong-Welle: feine Goldlinie, die sich von der Brettmitte ausbreitet. */
.mpIntro-waveClip {
  inset: 4px;
  overflow: hidden;
  border-radius: 5px;
}
.mpIntro-wave {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(246, 224, 156, .95);
  box-shadow:
    0 0 10px rgba(236, 200, 110, .55),
    inset 0 0 10px rgba(236, 200, 110, .35);
  opacity: 0;
}

/* Die beiden Seitenleisten gleiten zum Aufmarsch sanft herein, statt
   mit dem Brett aufzuploppen. */
body.mp-introRun #effectBar,
body.mp-introRun #effectBarEnemy {
  animation: mpIntroSideIn .6s cubic-bezier(.2, .7, .3, 1) both;
}
body.mp-introRun #effectBar { --mp-intro-dx: -16px; }
body.mp-introRun #effectBarEnemy { --mp-intro-dx: 16px; animation-delay: .08s; }
@keyframes mpIntroSideIn {
  from { opacity: 0; translate: var(--mp-intro-dx, 0) 0; }
  to   { opacity: 1; translate: 0 0; }
}

/* Waehrend des Aufmarschs keine Hover-Vorschau auf noch leeren Feldern (der
   Zeiger steht nach dem Start-Klick oft schon ueber der Effektleiste). */
body.mp-introRun #board .sq.effectHover::after,
body.mp-introRun #board .sq.effectPotentialHover::after,
body.mp-introRun #board .sq.effectTargetHover::before,
body.mp-introRun #board .sq.effectCaptureHover::before,
body.mp-introRun #board .sq.effectSourceHover::before {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .mpIntro { display: none; }
  body.mp-introRun #effectBar,
  body.mp-introRun #effectBarEnemy { animation: none; }
}