/* Featured Work presentation overlay — keeps the existing card grid look.
   WebGL planes sync to .cinematic-card-bg; native media is visually proxied. */

.fw-sync-layer {
  position: fixed;
  inset: 0;
  /* Above main page content (z-index 2) so planes cover card media;
     titles/labels show through transparent clear pixels. Below header (50). */
  z-index: 6;
  pointer-events: none !important;
  overflow: hidden;
}

.fw-sync-canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none !important;
}

/* Keep layout + clicks. Native media stays as fallback until WebGL paints;
   once ready, the sync canvas covers the same rects. Hide native only when
   the layer is active to avoid double-image flicker. */
.fw-ready.fw-gl-live .fw-media-proxy video,
.fw-ready.fw-gl-live .fw-media-proxy img {
  opacity: 0 !important;
}

/* Liquid ripple is rendered inside the sync shader; hide any leftover
   per-card liquid canvases so they cannot fight the overlay. */
.fw-ready .fw-media-proxy .liquid-distortion-canvas {
  display: none !important;
}

.fw-ready .fw-media-proxy {
  background: #1a1511;
}

/* While the GL plane is bending, hide the rigid DOM rect so only the
   curved WebGL frame is visible. */
.fw-ready.fw-gl-live .fw-media-proxy {
  background: transparent;
}

/* Project detail overlay sits above the sync canvas. */
#projects.is-project-active .fw-sync-layer {
  visibility: hidden !important;
}

@media (prefers-reduced-motion: reduce) {
  .fw-sync-layer {
    display: none !important;
  }

  .fw-ready .fw-media-proxy video,
  .fw-ready .fw-media-proxy img {
    opacity: 1 !important;
  }
}

@media (max-width: 640px) {
  /* Keep smear lighter on small screens by letting CSS radius stay readable. */
  .fw-ready .cinematic-card-bg {
    border-radius: 14px;
  }
}