.arcana-controller {
  --pulse-duration: 6s;
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 16 / 11;
}
.arcana-controller img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: plus-lighter;
  pointer-events: none;
  user-select: none;
  animation-duration: var(--pulse-duration);
  animation-timing-function: cubic-bezier(.37, 0, .63, 1);
  animation-iteration-count: infinite;
}
.arcana-controller .arcana-rest { animation-name: arcana-rest; }
.arcana-controller .arcana-bright { animation-name: arcana-bright; }
@keyframes arcana-rest { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes arcana-bright { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.arcana-controller.is-paused img { animation-play-state: paused; }
@supports not (mix-blend-mode: plus-lighter) {
  .arcana-controller .arcana-rest { animation: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .arcana-controller img { animation: none; }
  .arcana-controller .arcana-rest { opacity: 0; }
  .arcana-controller .arcana-bright { opacity: 1; }
}