/* ── Tree-and-mist backdrop for tutorial pages ────────────────────────
   overrides/main.html emits an (empty) .forest-scene marker on pages
   under tutorial/, inside the region instant navigation swaps. Everything
   here activates via body:has(.forest-scene), so client-side navigation
   toggles the scene correctly and browsers without :has() simply keep the
   plain theme. The art itself is docs/assets/scene-{light,dark}.svg —
   layered pine treelines with horizontal mist bands, no external requests. */

body:has(.forest-scene) {
  background-image: url(../assets/scene-light.svg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: bottom center;
  background-size: 100% auto;
}

body[data-md-color-scheme="slate"]:has(.forest-scene) {
  background-image: url(../assets/scene-dark.svg);
}

/* Drifting ground fog above the treelines, below all content. A body
   pseudo-element avoids stacking-context surprises inside the layout. */
body:has(.forest-scene)::after {
  content: "";
  position: fixed;
  left: -10vw;
  right: -10vw;
  bottom: 0;
  height: 34vh;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(55rem 9rem at 22% 96%, rgba(255, 255, 255, 0.30), transparent 70%),
    radial-gradient(45rem 8rem at 76% 88%, rgba(255, 255, 255, 0.22), transparent 70%);
}

body[data-md-color-scheme="slate"]:has(.forest-scene)::after {
  background:
    radial-gradient(55rem 9rem at 22% 96%, rgba(216, 243, 220, 0.07), transparent 70%),
    radial-gradient(45rem 8rem at 76% 88%, rgba(216, 243, 220, 0.05), transparent 70%);
}

@media (prefers-reduced-motion: no-preference) {
  body:has(.forest-scene)::after {
    animation: forest-mist-drift 90s ease-in-out infinite alternate;
  }

  @keyframes forest-mist-drift {
    from { transform: translateX(-3vw); }
    to   { transform: translateX(3vw); }
  }
}

/* Content column rides on a translucent panel so prose stays legible
   over the mist; sidebars and header keep the stock theme. */
body:has(.forest-scene) .md-content {
  background: color-mix(in srgb, var(--md-default-bg-color) 88%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: 0.6rem;
}

/* The marker itself renders nothing. */
.forest-scene {
  display: none;
}