/* The idle slideshow (assets/js/idle-slideshow.js): the paintings, full
   screen, one fading into the next with a slow drift, on the site's own dark
   ground. Built by the script the first time it starts. */

.idle-show {
  position: fixed;
  inset: 0;
  z-index: 10000;
  /* The site's dark-mode blue (global.css, --color-1), named outright rather
     than through the variable, which turns cream in light mode. */
  background: #0B151E;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.6s ease, visibility 0s linear 1.6s;
  cursor: none;
}
.idle-show.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.6s ease, visibility 0s;
}
html.idle-show-open { overflow: hidden; }

/* Two layers, crossfaded: one coming in while the other goes. */
.idle-show__slide {
  position: absolute;
  /* Clear of the bottom band, so the label in the corner never sits on the
     painting, even once it has drifted larger. */
  inset: 6vh 6vw max(11vh, 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.idle-show__slide.is-on { opacity: 1; }
/* As large as the space allows, whatever size the file is, and never cropped.
   The shadow is a drop-shadow, which follows the painting itself rather than
   the box it is fitted into. */
.idle-show__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6));
  transform: scale(1) translate(0, 0);
}
/* The drift: a little closer, a little to one side, over the time it is up. */
/* On its own class rather than is-on, so a painting fading out goes on
   drifting until it has gone (idle-slideshow.js). Long enough to cover the
   whole time it is up and its fade out, so it never comes to a stop on screen;
   linear, so the hand-over from one to the next is the same speed throughout. */
.idle-show__slide.is-moving img {
  animation: idle-show-drift 14s linear forwards;
}
@keyframes idle-show-drift {
  to { transform: scale(1.05) translate(var(--drift-x, 1%), var(--drift-y, 0.5%)); }
}
.idle-show.is-still .idle-show__slide.is-moving img { animation: none; }

/* The name and year, on one line in the bottom corner, as a label beside a
   painting on the wall. */
.idle-show__caption {
  position: absolute;
  left: 3vw;
  bottom: 3vh;
  margin: 0;
  font-family: var(--font-family-1, 'EB Garamond'), serif;
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.2;
  color: var(--color-6, #ffd479);
  opacity: 0;
  transition: opacity 1.2s ease;
}
.idle-show__caption.is-on { opacity: 0.9; }

/* A quiet word on how to leave, shown for the first few seconds only. */
.idle-show__hint {
  position: absolute;
  top: 3vh;
  right: 3vw;
  margin: 0;
  font-family: var(--font-family-2, sans-serif);
  font-size: 13px;
  color: var(--color-2, #e8e4da);
  opacity: 0;
}
.idle-show.is-open .idle-show__hint {
  /* In over a second, there for about twelve, out over two. */
  animation: idle-show-hint 15s ease 1.5s forwards;
}
@keyframes idle-show-hint {
  0%   { opacity: 0; }
  7%   { opacity: 0.9; }
  87%  { opacity: 0.9; }
  100% { opacity: 0; }
}