/* Portrait motion is a paint-only layer. It must never resize, translate, or crop a card host. */
html body:not(.maintenance-mode) .portrait-motion-host {
  isolation: isolate;
}

html body:not(.maintenance-mode) .portrait-motion-canvas {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: inherit;
  pointer-events: none !important;
  opacity: 0;
  transition: opacity 180ms ease-out;
  transform: none !important;
  translate: none !important;
  object-fit: fill;
}

html body:not(.maintenance-mode) .portrait-motion-canvas.is-rendered {
  opacity: 1;
}

html body:not(.maintenance-mode) .portrait-motion-host > :not(.portrait-motion-canvas),
html body:not(.maintenance-mode) .portrait-motion-host::before,
html body:not(.maintenance-mode) .portrait-motion-host::after {
  --portrait-motion-overlay-layer: 1;
}

html body:not(.maintenance-mode) :is(.avatar, .team-art).portrait-motion-host > :not(.portrait-motion-canvas),
html body:not(.maintenance-mode) :is(#previewArt, #battlePreviewArt).portrait-motion-host > :not(.portrait-motion-canvas),
html body:not(.maintenance-mode) .mode-dialog-art.portrait-motion-host > :not(.portrait-motion-canvas),
html body:not(.maintenance-mode) .character-codex-art.portrait-motion-host > :not(.portrait-motion-canvas) {
  z-index: 4;
}

html body:not(.maintenance-mode) .portrait-motion-host[data-portrait-motion-active="true"] {
  --portrait-material-opacity: 1;
}

html body:not(.maintenance-mode)[data-vfx-quality="low"] .portrait-motion-canvas {
  transition-duration: 100ms;
}

@media (prefers-reduced-motion: reduce) {
  html body:not(.maintenance-mode) .portrait-motion-canvas {
    transition: none;
  }
}