/* ============================================================
   overlay.css
   — Image overlay: sits above the star canvas / tree shadow,
     but below all page content (z-index 1, content is z-index 10)
   — Dark mode image: fixed to bottom-left corner
   — Shadow (sway) animation: light mode only
   ============================================================ */

/* ── Overlay image (dark mode) ───────────────────────────────
   Sits between the star canvas (z-index 0) and the content
   (.wrap z-index 10), so z-index 1 is exactly right.
   Hidden in light mode, visible in dark mode.
   Pinned to the bottom-left corner.
   ---------------------------------------------------------- */
#overlay-image {
  position: fixed;
  bottom: 0;
  left: 0;
  width: clamp(20vw, 35vw, 55vw);
  height: auto;
  pointer-events: none;
  z-index: 1;
  /* above stars (0), below content (10) */

  /* Hidden by default (light mode) */
  opacity: 0;
  transition: opacity 0.6s ease;

  /* Optional: subtle fade at the bottom so it blends with the bg */
  -webkit-mask-image: linear-gradient(to top,
      rgba(0, 0, 0, 0.6) 0%,
      rgba(0, 0, 0, 1) 40%);
  mask-image: linear-gradient(to top,
      rgba(0, 0, 0, 0.6) 0%,
      rgba(0, 0, 0, 1) 40%);
}

/* Show the overlay image only in dark mode */
body.dark #overlay-image {
  opacity: 1;
}


/* ── Shadow animation: light mode ONLY ───────────────────────
   The original tree shadow (#tree-shadow) keeps its sway
   animations in light mode. In dark mode we freeze it
   (animation: none) AND hide it (opacity: 0 — already done
   by the original CSS, we just reinforce it here).
   ---------------------------------------------------------- */
body.dark .branch-a,
body.dark .branch-b,
body.dark .branch-c {
  animation: none;
}

/* Ensure #tree-shadow is completely invisible in dark mode
   (belt-and-suspenders alongside the original opacity:0 rule) */
body.dark #tree-shadow {
  opacity: 0 !important;
  pointer-events: none;
}

/* ── Dappled shadow video overlay (light mode ONLY) ──────────────
   Sits BELOW page content (z-index 1 < .wrap's z-index 10), so
   mix-blend-mode: multiply darkens the background only — text and
   icons stay untouched and fully legible. White/bright areas of the
   video disappear; only dark shadow patches remain.
   Raise this above 10 if the shadows should fall across the UI too.
   ---------------------------------------------------------- */
#shadow-video-wrap {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* clicks pass straight through */
  z-index: 1;
  /* below .wrap (z-index 10) */
  mix-blend-mode: multiply;

  /* Dial this down if shadows are too heavy (0.5 = subtle, 0.9 = dramatic) */
  opacity: 0.08;
  transition: opacity 0.6s ease;
}

#shadow-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* fills the viewport, no letterboxing */
  display: block;
}

/* Kill it in dark mode — #overlay-image handles that side */
body.dark #shadow-video-wrap {
  opacity: 0;
}