/* Memorial Mode is opt-in only. This stylesheet is loaded after the base
   styles, but has no visual effect until JavaScript adds the root class. */
html.memorial-mode-active body > :not(.modal-overlay) {
  filter: grayscale(var(--memorial-grayscale, 70%)) saturate(var(--memorial-saturation, 100%)) brightness(var(--memorial-brightness, 100%));
  transition: filter 180ms ease-out;
}

/* Keep fixed overlays attached to the visual viewport. Applying the filter to
   body would make body their containing block and break their positioning. */
html.memorial-mode-active .modal-overlay .modal-container {
  filter: grayscale(var(--memorial-grayscale, 70%)) saturate(var(--memorial-saturation, 100%)) brightness(var(--memorial-brightness, 100%));
  transition: filter 180ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  html.memorial-mode-active body > :not(.modal-overlay),
  html.memorial-mode-active .modal-overlay .modal-container {
    transition-duration: 0.01ms;
  }
}

/* Memorial Corner Ribbon */
.memorial-corner-ribbon {
  position: fixed;
  width: 110px;
  height: 110px;
  z-index: 99999;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.3s ease;
}
.memorial-corner-ribbon.pos-top-left { top: 0; left: 0; }
.memorial-corner-ribbon.pos-top-right { top: 0; right: 0; }
.memorial-corner-ribbon.pos-bottom-left { bottom: 0; left: 0; }
.memorial-corner-ribbon.pos-bottom-right { bottom: 0; right: 0; }

@media (max-width: 600px) {
  .memorial-corner-ribbon {
    width: 75px;
    height: 75px;
  }
}