/* ================================
   PAGE WIPE — shared by the project pages
   The page opens under the same navy splash the homepage slid up before
   navigating, then the splash slides away (same look as the [ work ] wipe).
   ================================ */

/* Keep the old page on screen until this one is ready to draw: no blank flash */
@view-transition {
  navigation: auto;
}

#page-entry-overlay.page-wipe,
.page-wipe {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #000180;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: all;
  will-change: transform;
}

.page-wipe-label {
  font-family: 'Xanh Mono', monospace;
  font-style: italic;
  font-size: 1.6rem;
  color: #D1FFA4;
  letter-spacing: -0.05em;
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* only show the label once its font is ready, so it never flashes in a fallback font */
.page-wipe.label-ready .page-wipe-label {
  opacity: 1;
}

/* Nav links ("work" / "who"): medium weight at rest; Xanh Mono italic on hover
   (same font as "zhang" in the wordmark — free Google Font, no credit needed) */
.nav-hover-italic {
  font-family: 'Xanh Mono', monospace;
  font-style: italic;
  font-weight: 400;
}

/* Cursor dot fades out while the mouse is outside the browser window */
.cursor-dot.is-away {
  opacity: 0 !important;
}


/* Cursor dot: plain see-through, no blend mode (project pages). It used to be
   "multiply", but in Chrome a blended cursor over frosted glass (the nav, the
   work dropdown) made a faint white box appear in the glass. */
.cursor-dot,
.cursor-dot.is-blob {
  mix-blend-mode: normal;
}
.cursor-dot.active { opacity: 0.55; }
.cursor-dot.is-blob { opacity: 0.3; }

/* PLAY is still being built: hidden on the live site, shown on the local
   preview (js/favicon.js adds .show-play on localhost). To launch it, remove
   the line marked PLAY SWITCH in js/favicon.js. */
html:not(.show-play) .nav-link-item[data-default="play"] { display: none; }

/* Top nav over a white / very bright background (js/page-wipe.js adds
   .nav-on-light): same grey frost as the bottom section-nav pills, so it
   doesn't vanish into the page. */
body.nav-on-light .nav-pill:not(.footer-mode),
body.nav-on-light .bubble-menu,
body.nav-on-light .bubble-dot {
  /* a touch lighter than the bottom pills' rgba(232,232,236,.7): the big pill
     reads darker at the same colour */
  background-color: rgba(239, 239, 242, 0.7);
}
/* only on for an instant while the page checks what's behind the nav */
html.nav-probe * { pointer-events: auto !important; }

/* the bottom section nav (case studies): grey frost over white, but over grey boxes,
   pictures, videos and dark sections the top nav's lighter white frost (page-wipe.js) */
body.sidenav-off-light .sidebar-nav .nav-link { background-color: rgba(255, 255, 255, 0.6); }