/* Macher-Video – Drahtgitter-Hand in KIRA-Orange #FFAE00, Menschen-Hand in KIRA-Blau #3B475A,
   auf dunklem Sternenhimmel */
.mv-player {
  --mv-bg: #201C1B;
  --mv-btn: 64px;
  --mv-gap: calc(var(--mv-btn) / 2 + 6px);
  --reach: 0;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: #0d1015;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06);
  isolation: isolate;
}
/* Doppelte Klasse = höhere Spezifität, damit allgemeine img/video/svg-Regeln der Gastseite
   (z. B. „.buehne .motiv img“ in der Präsentation) nichts verschieben. */
.mv-player.mv-player .mv-video {
  position: static;
  transform: none;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  background: #0d1015;
}

/* Abdunkelung + Hände liegen über dem Poster, bis Play gedrückt wird */
.mv-overlay {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1px 1px at 27% 72%, rgba(255, 255, 255, .35), transparent),
    radial-gradient(1px 1px at 41% 9%, rgba(255, 255, 255, .4), transparent),
    radial-gradient(1px 1px at 58% 83%, rgba(255, 255, 255, .3), transparent),
    radial-gradient(1px 1px at 66% 24%, rgba(255, 255, 255, .45), transparent),
    radial-gradient(1px 1px at 74% 61%, rgba(255, 255, 255, .3), transparent),
    radial-gradient(1px 1px at 86% 37%, rgba(255, 255, 255, .4), transparent),
    radial-gradient(1px 1px at 93% 88%, rgba(255, 255, 255, .3), transparent),
    radial-gradient(1px 1px at 8% 55%, rgba(255, 255, 255, .3), transparent),
    radial-gradient(1px 1px at 35% 44%, rgba(255, 255, 255, .25), transparent),
    radial-gradient(1px 1px at 52% 30%, rgba(255, 255, 255, .3), transparent),
    radial-gradient(1px 1px at 80% 12%, rgba(255, 255, 255, .35), transparent),
    var(--mv-bg);
  transition: opacity .6s ease .25s;
}
.mv-player.is-playing .mv-overlay { opacity: 0; pointer-events: none; }

.mv-player.mv-player .mv-hand {
  position: absolute;
  top: 50%;
  left: auto;
  right: auto;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  transition: transform .7s cubic-bezier(.5, 0, .75, 0), opacity .5s ease;
}
/* KI-Hand: Drahtgitter von links oben. Fingerspitze im Bild bei (100 %, 35.25 %) */
.mv-player.mv-player .mv-hand--ai {
  right: 50%;
  width: 58%;
  transform-origin: 100% 35.25%;
  transform: translate(calc(-1 * var(--mv-gap) - (1 - var(--reach)) * 50%), -35.25%) rotate(22deg);
}
/* Menschliche Hand: von rechts unten. Fingerspitze im Bild bei (0 %, 11.22 %) */
.mv-player.mv-player .mv-hand--human {
  left: 50%;
  width: 60%;
  transform-origin: 0 11.22%;
  transform: translate(calc(var(--mv-gap) + (1 - var(--reach)) * 50%), -11.22%) rotate(26deg);
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .6));
}
.mv-player.mv-player:not(.is-playing) .mv-hand { transition: none; }
.mv-player.mv-player.is-playing .mv-hand--ai { transform: translate(-140%, -35.25%) rotate(22deg); opacity: 0; }
.mv-player.mv-player.is-playing .mv-hand--human { transform: translate(140%, -11.22%) rotate(26deg); opacity: 0; }

/* Dezentes Leuchten zwischen den Fingerspitzen */
.mv-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--mv-btn) * 2.4);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 62%);
  opacity: calc((var(--reach) - .6) * 2.5);
  scale: calc(.6 + var(--reach) * .4);
  pointer-events: none;
}
.mv-player.is-near .mv-spark { animation: mv-pulse 1.4s ease-in-out infinite; }
@keyframes mv-pulse { 50% { scale: 1.12; } }

.mv-play {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: var(--mv-btn);
  height: var(--mv-btn);
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .17);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, .6);
  cursor: pointer;
  transition: background .3s, color .3s, scale .3s;
}
.mv-player.mv-player .mv-play svg {
  position: static;
  transform: none;
  width: 38%;
  height: 38%;
  max-width: none;
  margin-left: 6%;
  fill: currentColor;
}
.mv-player.is-near .mv-play,
.mv-play:hover,
.mv-play:focus-visible {
  background: rgba(255, 255, 255, .26);
  color: #fff;
  scale: 1.05;
  outline: none;
}
.mv-play:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }

.mv-label {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--mv-btn) / 2 + 22px);
  translate: -50% 0;
  white-space: nowrap;
  font: 400 13px/1.6 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  text-align: center;
  color: rgba(255, 255, 255, .28);
  pointer-events: none;
}

@media (max-width: 600px) {
  .mv-player { --mv-btn: 60px; border-radius: 10px; }
  .mv-label { font-size: 11px; }
}