/* ===== css/acts/media.css ===== */
/*
 * How a picture sits in the collection.
 *
 * A picture pasted onto a web page is a rectangle. A picture in a museum
 * is a thing behind glass: it has an edge that softens into the dark, a
 * surface that is not quite clean, and a haze of condensation that clears
 * when somebody touches the case.
 *
 * Three layers do that, and they are three separate elements rather than
 * one filter stack, because a filter cannot be touched:
 *
 *   1. THE EDGE DISSOLVE AND THE DEEP VIGNETTE
 *      A mask on the window feathers the case, the rim and the picture
 *      together, so nothing in here ever stops dead against the page. On
 *      top of it, a vignette painted in the room's own ink pulls the
 *      corners down into the deep and leaves only the centre lit.
 *
 *   2. THE FILM GRAIN AND THE SCAN OF THE GLASS
 *      An SVG turbulence, laid over the picture at seven percent, with the
 *      fine scan lines of an old plate on top of it. It is there to break
 *      the too-smooth shine of a digital image, and at seven percent it is
 *      felt rather than seen.
 *
 *   3. THE CONDENSATION, AND THE CLEARING OF IT
 *      A cold haze over the whole case - a little blur, a little less
 *      contrast, a little less saturation, the way a tank that nobody has
 *      cleaned looks. When the visitor hovers or touches the case, the
 *      haze lifts and the picture behind it comes up with it.
 *
 * Nothing here touches the aquarium. Every selector is anchored on the
 * exhibit's own classes.
 */

/* --------------------------------------------------- 1. the window */
.exhibit__window {
  position: relative;
  display: block;
  width: 100%;
  max-width: 26rem;
  aspect-ratio: var(--media-ratio, 3 / 4);
  /*
   * The dissolve.
   *
   * The gradient is an ellipse the size of the window itself, so the four
   * edges of the picture sit at half the radius and the corners at
   * seventy percent. The stops are tuned so that the corners are almost
   * gone and the edges are mostly still there - which is what a photograph
   * does when it is lit from the middle and the light falls off into a
   * dark room.
   */
  -webkit-mask-image: radial-gradient(
    ellipse 100% 100% at 50% 50%,
    #000 0 38%,
    rgba(0, 0, 0, 0.92) 48%,
    rgba(0, 0, 0, 0.55) 56%,
    rgba(0, 0, 0, 0.18) 64%,
    transparent 72%
  );
  mask-image: radial-gradient(
    ellipse 100% 100% at 50% 50%,
    #000 0 38%,
    rgba(0, 0, 0, 0.92) 48%,
    rgba(0, 0, 0, 0.55) 56%,
    rgba(0, 0, 0, 0.18) 64%,
    transparent 72%
  );
}

.exhibit__frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--sw-ink-deep);
  cursor: pointer;
  /* The grain and the haze blend with the picture and with nothing else. */
  isolation: isolate;
}

.exhibit__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The vignette: the room's own ink, pulled down over the edges. */
.exhibit__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 104% 100% at 50% 44%,
    rgba(3, 15, 17, 0) 24%,
    rgba(3, 15, 17, 0.18) 50%,
    rgba(3, 15, 17, 0.58) 74%,
    rgba(3, 15, 17, 0.95) 100%
  );
}

/* ------------------------------------------------ 2. the grain */
.exhibit__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* The scan of the glass, a little above the grain. */
.exhibit__grain::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background: repeating-linear-gradient(
    0deg,
    rgba(217, 210, 180, 0.16) 0 1px,
    transparent 1px 3px
  );
}

/* ------------------------------------------------- 3. the haze */
.exhibit__image {
  /*
   * The condensation lives ON THE PICTURE, not behind it.
   *
   * The obvious way to fog glass is `backdrop-filter`, and on this
   * machine it is broken: Chromium samples the backdrop wrongly and the
   * picture comes out mirrored and tiled (test/media-diag.js photographs
   * six copies of the same image with one layer each, and only the two
   * cells with a backdrop-filter in them are wrong). So the haze is a
   * plain filter on the picture itself - a little blur, a little less
   * saturation, a little less contrast - and the cold light of the room
   * is a soft-light layer over the top.
   *
   * When the visitor touches the case, the filter comes off and the
   * picture behind it comes up with it.
   */
  filter: blur(1.3px) saturate(0.88) contrast(0.96) brightness(1.04);
  transition: filter 620ms var(--sw-ease);
}

.exhibit__mist {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  background: linear-gradient(
    180deg,
    rgba(160, 205, 215, 0.11),
    rgba(95, 150, 170, 0.07)
  );
  mix-blend-mode: soft-light;
  transition: opacity 620ms var(--sw-ease);
}

/*
 * The visitor touches the glass. The haze lifts, the picture comes up
 * behind it, and the case is clean for a moment.
 */
.exhibit__window:hover .exhibit__mist,
.exhibit__window:focus-within .exhibit__mist,
.exhibit__window.is-wiped .exhibit__mist {
  opacity: 0;
}

.exhibit__window:hover .exhibit__image,
.exhibit__window:focus-within .exhibit__image,
.exhibit__window.is-wiped .exhibit__image {
  filter: saturate(0.98) contrast(1.02) brightness(1.09);
}

/* ------------------------------------------ the corridor's small plates */
.window__plate {
  -webkit-mask-image: radial-gradient(
    ellipse 100% 100% at 50% 50%,
    #000 0 44%,
    rgba(0, 0, 0, 0.72) 60%,
    transparent 78%
  );
  mask-image: radial-gradient(
    ellipse 100% 100% at 50% 50%,
    #000 0 44%,
    rgba(0, 0, 0, 0.72) 60%,
    transparent 78%
  );
}

/*
 * Down the corridor you are looking through two panes of glass, so the
 * haze is lighter and there is no grain: these are previews, not plates.
 */
.window__mist {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  background: linear-gradient(
    180deg,
    rgba(160, 205, 215, 0.09),
    rgba(95, 150, 170, 0.05)
  );
  mix-blend-mode: soft-light;
  transition: opacity 620ms var(--sw-ease);
}

.window:hover .window__mist,
.window:focus-visible .window__mist {
  opacity: 0;
}

/* --------------------------------------------- the two other pictures */
.ritual__figure {
  margin: clamp(1.6rem, 4vw, 2.6rem) auto 0;
  max-width: 26rem;
}

.ritual__figure .exhibit__window {
  max-width: 17rem;
  margin: 0 auto;
}

.ritual__figure .exhibit__caption {
  text-align: center;
}

.music__sleeve {
  margin: clamp(1.4rem, 3vw, 2.2rem) 0 0;
}

.music__sleeve .exhibit__window {
  max-width: 19rem;
  margin: 0 auto;
}

.music__sleeve .exhibit__caption {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  text-align: center;
}

.music__credit {
  font-size: .62rem;
  letter-spacing: .26em;
  color: var(--sw-brass);
}

/* ------------------------------------------------------ on a phone */
@media (max-width: 640px) {
  .exhibit__window {
    max-width: 100%;
  }

  .exhibit__image {
    filter: blur(1px) saturate(0.9) contrast(0.97) brightness(1.05);
  }

  .exhibit__grain {
    opacity: 0.06;
  }

  .ritual__figure .exhibit__window,
  .music__sleeve .exhibit__window {
    max-width: 14rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .exhibit__mist,
  .window__mist {
    transition: none;
  }
}