/* A pointer-lit edge, never a tint over the artwork itself. */
.mn-immersive-artwork { position: relative; transform-origin: center; }
.mn-immersive-artwork::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px #a4e8f065;
  opacity: 0;
}
.mn-immersive-artwork[data-art-pressed="true"]::before { opacity: .7; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .mn-immersive-artwork { transition: transform 180ms ease-out; }
  .mn-immersive-artwork::before { transition: opacity 180ms ease-out; }
  .mn-immersive-artwork[data-art-engaged="true"] {
    transform: perspective(1100px) rotateX(var(--art-rotate-x, 0deg)) rotateY(var(--art-rotate-y, 0deg));
    will-change: transform;
  }
  .mn-immersive-artwork[data-art-engaged="true"]::before { opacity: .85; }
  @supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
    .mn-immersive-artwork::before {
      padding: 1px;
      background: radial-gradient(350px circle at var(--art-light-x, 50%) var(--art-light-y, 50%), #c9f7ffcf, #85d8e838 50%, transparent 80%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      box-shadow: none;
    }
  }
}
.mn-immersive-artwork[data-art-suspended="true"],
.mn-immersive-artwork[data-art-suspended="true"]::before { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .mn-immersive-artwork { transform: none !important; transition: none !important; will-change: auto !important; }
  .mn-immersive-artwork::before { opacity: 0 !important; transition: none !important; }
}