/* ==========================================================================
   Project card hover — W-02 · Fluid reveal (components/work-hover-lab.js),
   on every project card on the site (the grid carries .wh-gl). A WebGL
   canvas over the frame: the cursor's movement smears the image along its
   path, the second image dissolves in through a drifting noise front that
   starts around the cursor, and the colour splits red / blue along the
   push. Without WebGL it falls back to a plain crossfade. Cards keep the
   project-card look (components/project-card.css).
   ========================================================================== */

.wh-frame .wh-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wh-img--grey { filter: grayscale(1); }

/* the canvas covers the frame while the hover runs (and until it has
   settled); without WebGL the second image simply crossfades in. Opened
   from disk the images come from the embedded copies (work-hover-data.js),
   so the effect runs there too. */
.wh-gl .wh-img--b { z-index: 1; opacity: 0; transition: opacity 0.6s var(--ease); }
.wh-gl .wh-img--a { z-index: 2; }

.wh-gl .wh-canvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}

.wh-gl .has-wh-gl .wh-canvas { opacity: 1; }

/* fallback crossfade (no WebGL) */
.wh-gl .project-card--wh.no-wh-gl:hover .wh-img--b { opacity: 1; }

/* the canvas draws its own zoom — no CSS zoom under it */
.wh-gl .project-card--wh:hover .project-card__frame img { transform: none; }

/* "View project" pill (as the live cards) above everything */
.project-card--wh .project-card__cursor { z-index: 4; }