/* ==========================================================================
   DEPTH DIGITAL — WATER REFRACTION (work page plates)
   The filter is fixed: applied on hover, never animated, so it rasterises once
   and then costs nothing. Only the sheen moves, and it moves by transform
   alone. Measurement drove this split — an animated displacement filter cost
   about a third of the frame rate on every hovered plate.
   ========================================================================== */

.water-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.plate__open {
  position: relative;
  overflow: hidden;
  transition: transform .55s cubic-bezier(.2, .65, .3, 1);
}

.plate__open img {
  transition: filter .4s cubic-bezier(.2, .65, .3, 1);
}

/* The refraction itself. Static — no attribute of the filter ever changes. */
.plate.is-refracting .plate__open img {
  filter: url('#dd-water');
}

.plate.is-refracting .plate__open {
  transform: translate3d(0, -3px, 0);
}

/* Caustic sheen. Centred on its own origin so translate3d positions it by
   cursor coordinates directly. Compositor-only: no paint, no layout. */
.plate__sheen {
  position: absolute;
  top: 0;
  left: 0;
  width: 46%;
  aspect-ratio: 1;
  margin: -23% 0 0 -23%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(210, 255, 250, .3) 0%,
    rgba(165, 255, 244, .14) 38%,
    transparent 72%);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: opacity .45s cubic-bezier(.2, .65, .3, 1);
  will-change: transform;
}

.plate.is-refracting .plate__sheen { opacity: 1; }

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .plate.is-refracting .plate__open img { filter: none; }
  .plate.is-refracting .plate__open,
  .plate__open { transform: none; transition: none; }
  .plate__sheen { display: none; }
}