/* 7-Eleven nav strip — SWEEP + FIELD canvases. INTRO-1 ONLY (index.html).

   ISOLATION IS STILL THE POINT OF THIS FILE EXISTING.
   The 2026-06-08 lock lives in css/styles.css + js/main.js and paints the PORTFOLIO
   row in the portfolio index-portfolio-archived.html. That row is untouched and still runs the lock in full. On THIS
   screen the lock was released by explicit user override and the per-icon motion layer
   is gone; css/pellmell-intro-7e.css was edited accordingly, but only there and only
   for the icons — nothing in the portfolio's files was read or written.

   Every rule below is prefixed `.se-project-screen`, a wrapper that exists only in
   index.html (the portfolio index-portfolio-archived.html has no such element), so these rules cannot reach the
   portfolio row even if the two documents were ever combined — despite both using the
   shared .se-cat / .se-ico / .se-cats names.

   TWO CANVASES, IN TWO MEDIA, ON PURPOSE.
     .se-fill-canvas  — WebGL. The three-shape sweep, plus the icon layer composited
                        into it. Flat colour regions bounded by the measured Elecctro
                        cubic, solved per pixel.
     (.se-field-canvas is GONE — the bubble field was deleted 2026-08-05 and no such
      element is ever created. Its rules went with it.)
   They are separate elements owned by separate files because 5110320 established that
   the field must survive the fill being removed. One canvas would have forced one draw
   loop and re-coupled them.
   ========================================================================= */

/* Both canvases are absolutely placed inside the strip. .se-cats is static in the port,
   so it needs a containing block; `relative` adds one without moving anything. */
.se-project-screen .se-cats { position: relative; }

/* Both sit BELOW the six cells. The icons are DOM again — the sweep no longer paints
   them yet — so an overlaying canvas would cover the artwork.
   Underneath, both show through the strip's own #F3F3F3 wherever the cells do not paint.
   pointer-events:none is LOAD-BEARING on both: without it a canvas would swallow :hover
   on the six cells and kill the links' focus/hover affordance.

   z-index 0 / 1 / 2: sweep under field under cells. The field is drawn over the swept
   colour because the bubbles rise THROUGH the filled surface, which is also why the
   field runs only once the sweep has landed. */
.se-project-screen .se-fill-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.se-project-screen .se-fill-canvas  { z-index: 0; }

/* Lift the cells above both canvases. `relative` with no offsets moves nothing. */
.se-project-screen .se-cats .se-cat {
  position: relative;
  z-index: 2;
}

/* NO HOVER GATE, and that is deliberate. Under the lock, :hover was the sole painter and
   the canvas had to fade out to hand the strip back to it. The per-icon hover path is
   gone, so there is nothing to hand back to: hovering a cell now changes nothing about
   the strip, and the sweep runs through it. The old
   `.se-cats:hover .se-fill-canvas { opacity: 0 }` rule and the
   `.se-fill-live:not(:hover) … { visibility: hidden }` icon-suppression pair went with
   the icon atlas — the sweep does not draw icons at all any more, so no DOM icon is ever
   hidden and no .se-cat--domico marker is needed. */

/* Reduced motion: both files bail before creating a canvas, so this is belt-and-braces —
   if an element ever survived a state change it must not be visible, and the six icons
   must read exactly as they do at rest. */
@media (prefers-reduced-motion: reduce) {
  .se-project-screen .se-fill-canvas { display: none; }
  .se-project-screen .se-cats .se-ico-img--default { opacity: 1; }
}