/* Photos behind the calendar's days. A veil in the page's own color (white by day, black
   at night) sits over the photo so dates and events stay easy to read. */

.photo-show {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.photo-show[hidden] { display: none; }

.photo-show .photo {
  position: absolute;
  inset: 0;
  background-size: cover; /* replaced by the exact size once the photo has loaded */
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
}

.photo-show .photo.on { opacity: 1; }

.photo-show .photo-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: color-mix(in srgb, var(--paper, var(--bg)) var(--veil, 64%), transparent);
  transition: background-color 0.7s ease;
}

@media (prefers-reduced-motion: reduce) {
  .photo-show .photo { transition: none; }
}