/* ==========================================================================
   LIQUID / FLUID REVEAL — mask shapes
   ==========================================================================
   Visual overlay for the paged scene-to-scene transition. The animation
   itself (timing, easing, per-layer opacity/delay/wavelength) lives in
   transitions.js — curtainConfig.waveLayers; this file only defines the
   two mask layers and a safe hidden-by-default state so nothing flashes
   before JS runs.

   Two solid-color layers, each with its own wavy leading edge
   (clip-path: polygon(...)), anchored to the bottom of the viewport —
   liquid rising to fill the screen, settling, then receding back down and
   draining away. The second layer trails the first by a short delay and
   sits on top of it (later in the DOM), so the more opaque, dominant wave
   reads as the near surface and the fainter one as depth behind it. Only
   `clip-path` is touched per frame on either layer, which the browser can
   composite without a layout pass.

   Remove the <link> to this file and the <script> tags for transitions.js
   and navigation.js from index.html to fully disable the effect — see
   navigation.js's own header for how to restore continuous scrolling too.
   ========================================================================== */

.curtain{
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
}

.curtain__mask{
  position: absolute;
  inset: 0;
  background: var(--curtain-color, var(--blue));
  /* A zero-height sliver pinned to the bottom edge — invisible until JS
     raises the fill level. */
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}

/* Per-layer opacity is applied inline by transitions.js from
   curtainConfig.waveLayers — kept out of this file so the config object
   stays the single source of truth for every tunable. */

/* The JS layer only ever writes `clip-path` (per frame) and `opacity`
   (once, at start) inline — no layout/paint cost outside these two
   elements. */

@media (prefers-reduced-motion: reduce){
  .curtain{ display: none; }
}