/* ═══════════════════════════════════════════════════════════════════
   WORK IN PROGRESS watermark — floats above every page as a subtle
   vertical marquee falling downward, letting visitors know the site
   isn't finished yet. Injected on load by site-wip.js so a single
   include on every page picks it up.
   ═══════════════════════════════════════════════════════════════════ */
.site-wip {
  position: fixed;
  inset: 0;
  z-index: 999999;                 /* above every other stacking layer */
  pointer-events: none;            /* purely decorative, never blocks input */
  overflow: hidden;                /* clips the falling track at viewport edges */
  display: flex;
  justify-content: center;         /* centers the falling column horizontally */
  /* Blend the whole watermark against whatever sits beneath it in the
     root stacking context — the text inverts per-pixel to the opposite
     of the backdrop, so it stays visible on dark bg, light bg, imagery
     and mid-tones alike. Applied here on the container (not the track)
     because .site-wip already establishes a stacking context via
     position:fixed + z-index — the blend then applies against the
     root, not against .site-wip's own transparent interior. */
  mix-blend-mode: difference;
}

.site-wip__row {
  /* Single instance of "WORK IN PROGRESS" — falls once through the
     viewport top-to-bottom on page load, then sits offscreen. No
     loop, no duplication. Absolute-positioned so it can translate
     from above the viewport to below it without affecting layout. */
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;                /* regular */
  font-size: 3.84vw;               /* 20% smaller than the previous 4.8vw */
  line-height: 1.15;
  letter-spacing: 0.15em;          /* wide editorial tracking */
  white-space: nowrap;
  /* Dark theme default → pure white; light theme override below flips
     to pure black. Combined with mix-blend-mode: difference on the
     parent, both variants invert against the underlying palette so
     the watermark reads on any backdrop within its own theme. */
  color: #ffffff;
  /* Explicit 50% opacity — semi-transparent so the content behind
     the watermark is visible through it. Kept as a distinct property
     (rather than baked into rgba alpha) for clarity of intent. */
  opacity: 0.5;
  will-change: transform;
  /* Repeating cycle — every 10 seconds a new fall begins. The fall
     itself takes ~9.5s (10% slower than the previous 8.64s
     one-shot); the last 0.5s of each cycle holds the row offscreen
     at the bottom (see the keyframe 95%→100% hold below) before the
     loop wraps invisibly back to above the viewport. */
  animation: site-wip-fall 10s linear infinite;
}

/* Light theme swap — pure 50% black instead of 50% white. Difference
   blend remains applied on the .site-wip parent, so black inverts
   against a light backdrop into a visible dark-gray, and against a
   dark backdrop into a visible light-gray. */
[data-theme="light"] .site-wip__row {
  color: #000000;
}

/* Fall cycle — 95% of each cycle is the actual descent (row
   travels from just above the top edge to just below the bottom
   edge), the final 5% holds the row parked offscreen at the bottom
   so the loop wrap is invisible (jump from 110vh at 100% back to
   -10vh at 0% happens while the row is out of frame). */
@keyframes site-wip-fall {
  0%   { transform: translateY(-10vh);  }
  95%  { transform: translateY(110vh); }
  100% { transform: translateY(110vh); }
}

@media (prefers-reduced-motion: reduce) {
  /* Motion-sensitive users see the watermark parked at a fixed
     mid-viewport position rather than the falling animation. */
  .site-wip__row {
    animation: none;
    transform: translateY(50vh);
  }
}