/* EXPERIMENT (branch: experiment/iridescent) — the surviving
   material. Round 4 left C·opal alone: A·opal (the CSS organic
   engine) was killed when the static-gray no-GL fallback was
   accepted and its fallback-engine argument evaporated. Everything
   else went in earlier rounds — all resurrectable from this
   branch's history. The unused assets/holo-textures/ files await
   an owner decision.

   C · OPAL (thin-film shader, WebGL) — interference physics over a
       drifting thickness field; responds by recoloring every pixel.
       Preset + uniforms live in script.js (SHADER_MATERIALS.opal,
       tunable via the panel's c-* knobs).

   Rides .mark-foil's mask/bloom/resolve choreography (styles.css);
   the pointer reaches it as a shader uniform — the CSS pointer-var
   plumbing left with A·opal, its only consumer. */
.mark-foil {
  display: grid;
}
.foil-shader {
  grid-area: 1 / 1;
  display: none;
  width: 100%;
  height: 100%;
}
html.irid-c-opal .foil-shader { display: block; }

/* ── MOBILE DOOR: the rail nav-mark wears the material while gated ──
   Below the mobile breakpoint the big .page-home .mark is buried
   under the fullscreen white rail, so the 64px rail mark IS the
   door — and it used to sit ghost-gray, leaving the locked-shimmer
   story desktop-only. Same choreography as the big .mark-foil
   (styles.css): masked host, opacity 0 until wireNavMarkDoor sets
   .is-live, reveal scoped to html.is-gated so unlock's class
   removal fades it out over 1s in the same breath as the gray→blue
   color flood — the desktop resolve at 64px. No halo risk: while
   gated the svg beneath is --bg-inset, the same near-page gray the
   big door sits on (#0000FF only arrives as the foil leaves).
   Desktop gated hides .nav-mark-link, so no media query is needed.
   The canvas is the shader; the gradient beneath is the no-WebGL
   ground. position:relative on the link anchors the inset. */
.rail .nav-mark-link {
  position: relative;
}
.navmark-foil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease-out;
  -webkit-mask-image: url('assets/PLSR.svg');
  mask-image: url('assets/PLSR.svg');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background: linear-gradient(160deg, #f2f0ec, #e4e2de);
}
html.is-gated .navmark-foil.is-live {
  opacity: 1;
}
.navmark-shader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}