/* Bewegtes Portrait: das Standbild bleibt die Flaeche, das Video legt sich
   erst darueber, wenn es wirklich spielt. Dieselbe Klasse fuellt den Rahmen,
   den vorher das <img> oder das background-image belegt hat. */

.mp-portrait {
  display: block;
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
.mp-portrait.is-fill {
  position: absolute;
  inset: 0;
}
.mp-portrait > .mp-portrait-still,
.mp-portrait > .mp-portrait-video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: var(--mp-fit, cover);
  object-position: var(--mp-pos, center center);
  pointer-events: none;
}
video.mp-portrait-video {
  opacity: 0;
  pointer-events: none;
  background: transparent;
}
.mp-portrait > .mp-portrait-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  background: transparent;
}
.mp-portrait.is-live > .mp-portrait-video,
video.mp-portrait-video.is-shown {
  opacity: 1;
}
/* Poster weg, sobald das Video deckt. Sonst scheinen zwei Zuschnitte
   gegeneinander und das Portrait scheint zu rucken. */
.mp-portrait.is-live > .mp-portrait-still {
  visibility: hidden;
}

.mp-portrait-video::-webkit-media-controls,
.mp-portrait-video::-webkit-media-controls-enclosure,
.mp-portrait-video::-webkit-media-controls-start-playback-button,
.mp-portrait-video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .mp-portrait-video { display: none !important; }
}

/* Rahmen, deren Zuschnitt bisher am img hing. */
.xpdLeaderArt > .mp-portrait { width: 100%; height: 100%; }
.xpdLeader.is-chosen .xpdLeaderArt > .mp-portrait,
.xpdLeader:hover .xpdLeaderArt > .mp-portrait { transform: scale(1.05); }

.xpdChapterArt > .mp-portrait { display: block; width: 100%; height: 100%; }
.xpdChapter.is-locked .xpdChapterArt .mp-portrait-video {
  opacity: .4;
  filter: grayscale(.85) brightness(.7);
}

.xpdBossBackdrop > .mp-portrait {
  display: block;
  width: 100%;
  height: 100%;
  opacity: .82;
  filter: saturate(.82);
  animation: none;
  transform: none;
}
.xpdBossBackdrop .mp-portrait-video {
  animation: none !important;
  transform: none !important;
}

.ac-root .lesson-art.art-portrait > .mp-portrait { position: absolute; inset: 0; z-index: 1; }
.ac-root .lesson-card:hover .lesson-art.art-portrait > .mp-portrait { transform: scale(1.06); }

.factionPortraitImage > .mp-portrait,
.pk-face > .mp-portrait,
.lcx-art-img > .mp-portrait { width: 100%; height: 100%; animation: none; transform: none; }

.dk-lo-diamond > .mp-portrait {
  position: absolute;
  inset: 1.5px;
  width: calc(100% - 3px);
  height: calc(100% - 3px);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}