/* ============================================================
   Page transition — a 4-side black aperture that closes on link
   click (OUT) and opens on the next load (LOAD), with a white
   circle + cursor-dot bounce at the pitch-black centre.
   Motion is driven by transition.js. Sits above the custom cursor
   (z 10000) so it covers everything during a transition.
   ============================================================ */

.transition {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: none;          /* no-JS: never cover (avoids a stuck black screen) */
  pointer-events: none;
}

/* JS present: the panels (un-transformed = covering) cover by default so the
   LOAD open is flash-free. transition.js opens them on load, hides on idle. */
.js .transition { display: block; }

/* Iris: a centred transparent circle; its huge box-shadow paints the rest of
   the screen pitch-black. Default size 0 = full black cover (flash-free LOAD).
   transition.js grows it (open) / shrinks it to 0 (close) — a circular wipe. */
.transition__iris {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 100vmax #000;
  will-change: width, height;
}

/* White circle — sits behind the cursor dot at centre. */
.transition__circle {
  position: absolute;
  top: 50%; left: 50%;
  width: 108px; height: 108px;
  margin: -54px 0 0 -54px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);    /* hidden until the centre beat */
  will-change: transform;
}

/* Centre dot — the custom cursor (same 18px disc), solid ink so it reads as a
   crisp cursor dot on the white circle rather than a blend-washed grey.
   transition.js drives the z-bounce. */
.transition__dot {
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: var(--color-fg);
  transform: scale(0);
  will-change: transform;
}

/* While a transition runs, hide the real custom cursor dot (native pointer
   stays hidden via cursor-on). The centre beat uses .transition__dot instead. */
html.is-transitioning .cursor { opacity: 0; }

/* Reduced motion: transition.js navigates/reveals with no animation; keep the
   aperture out of the way entirely. */
@media (prefers-reduced-motion: reduce) {
  .js .transition { display: none; }
}