/* WebGL is an optional visual layer. Every override requires a successful model
   render; losing the context removes that single gate and restores native DOM. */
.object-webgl-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: block;
  visibility: hidden;
  pointer-events: none;
}
[data-webgl-active] .object-webgl-canvas { visibility: visible; }
[data-webgl-active] .scene-heading { z-index: 4; }

/* The final display is the same persistent video, never a texture clone. */
/* The original accessible film-poster links are exact projected hit areas on
   the paper. No duplicate links, replacement click handler or extra Tab stops. */
#gallery[data-webgl-active] .album-book {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  perspective: none;
  transform: none;
  pointer-events: none;
}
#gallery[data-webgl-active] .album-spread { position: static; display: contents; }
#gallery[data-webgl-active] .album-book::before,
#gallery[data-webgl-active] .album-book::after,
#gallery[data-webgl-active] .album-spread::before,
#gallery[data-webgl-active] .album-spread::after,
#gallery[data-webgl-active] .album-cover,
#gallery[data-webgl-active] .album-turn-leaf,
#gallery[data-webgl-active] .album-turn-underlay,
#gallery[data-webgl-active] .album-turn-shadow,
#gallery[data-webgl-active] .album-interleaf { display: none; }
#gallery[data-webgl-active] .album-page {
  position: absolute;
  left: var(--webgl-photo-left, 25%);
  top: var(--webgl-photo-top, 35%);
  width: var(--webgl-photo-width, 20%);
  height: var(--webgl-photo-height, 25%);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  opacity: 1;
}
#gallery[data-webgl-active] .album-page .still-frame {
  display: block;
  flex: none;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  background: none;
  box-shadow: none;
  border-radius: 0;
  pointer-events: none;
}
#gallery[data-webgl-active][data-webgl-interactive] .album-page .still-frame { pointer-events: auto; }
#gallery[data-webgl-active] .album-page .still-frame img { opacity: 0; }
#gallery[data-webgl-active] .album-page .still-frame::after { display: none; }
#gallery[data-webgl-active] .album-page figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#gallery[data-webgl-active] .still-expand { opacity: 0; }
#gallery[data-webgl-active][data-webgl-interactive] .still-expand { opacity: 1; }
/* Projected edge controls straddle ivory paper and the burgundy surround.
   A currentColor-only ring disappears on the latter; keep both brand tones. */
#gallery[data-webgl-active] .still-frame:focus-visible,
#gallery[data-webgl-active] .album-edge:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 7px;
  box-shadow: 0 0 0 9px var(--ink);
}
#gallery[data-webgl-active] .album-edge {
  top: var(--webgl-book-top, 35%);
  bottom: auto;
  height: var(--webgl-book-height, 25%);
  opacity: 0;
  pointer-events: none;
}
#gallery[data-webgl-active] .album-edge-prev { left: var(--webgl-book-left, 10px); }
#gallery[data-webgl-active] .album-edge-next { right: auto; left: calc(var(--webgl-book-left, 10px) + var(--webgl-book-width, calc(100% - 20px)) - clamp(44px, 5vw, 76px)); }
#gallery[data-webgl-active][data-webgl-interactive] .album-edge,
#gallery[data-webgl-active] .album-edge:focus-visible { opacity: 1; pointer-events: auto; }

#gallery[data-webgl-active] .album-back-cover { left:50%; top:auto; bottom:18px; width:auto; height:auto; padding:12px 20px; transform:translateX(-50%); animation:none; background:#3d0000; box-shadow:none; border:1px solid #f3f2e950; border-radius:30px; pointer-events:auto; }
#gallery[data-webgl-active] .album-back-cover > span { transform:none; display:block; }
#gallery[data-webgl-active] .album-back-cover img { display:none; }

#gallery[data-webgl-active] .album-book[data-album-closed="true"] .album-edge { opacity:1; pointer-events:auto; }
#gallery[data-webgl-active] .album-book[data-album-cover="front"] .album-back-cover { animation:none; transform:translateX(-50%); }

#gallery[data-webgl-active] .album-book[data-album-closing-side="front"] .album-back-cover { animation:none; transform:translateX(-50%); }

/* The closed book itself is the click target: no separate pill or label. */
#gallery[data-webgl-active] .album-book[data-album-closed="true"] .album-back-cover { left:25%; top:20%; bottom:auto; width:50%; height:60%; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; transform:none; animation:none; }
#gallery[data-webgl-active] .album-back-cover > span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }