/*
 * Lokta Sunlight
 *
 * The environment is one opaque WebGL surface. This CSS supplies a complete,
 * phase-neutral paper fallback and the two deliberately tiny controls. No rule
 * here samples, filters, or promotes the scrolling document.
 */

:root {
  --sunlit-paper-near: #fdf9f5;
  --sunlit-paper-far: #fbfcf8;
  --sunlit-shadow: #c5c9c3;
  --sunlit-shadow-feather: rgba(231, 233, 228, 0.72);
  --sunlit-sunset: #e4b68a;
  --sunlit-rhododendron: rgba(143, 58, 65, 0.08);
  --sunlit-utility-ink: #28352d;
  background: var(--sunlit-paper-near);
}

body {
  background: transparent;
  isolation: isolate;
  --sunlit-paper-warm: var(--sunlit-paper-near);
  --sunlit-paper-light: #fbf8ee;
  --sunlit-paper-lichen: var(--sunlit-paper-far);
  --sunlit-shadow-transition: var(--sunlit-shadow-feather);
  --sunlit-sunset-amber: var(--sunlit-sunset);
  --sunlit-sunset-coral: var(--sunlit-rhododendron);
}

/* Keep every route on one explicit foreground plane. This prevents Chromium
 * from folding a long mathematical article into the environmental texture. */
body > .nav-top,
body > h1.title,
body > h2.subtitle,
body > .main,
body > .article-shell,
body > footer {
  position: relative;
  z-index: 1;
}

/* Home is already a direct flex item, so z-index works without positioning it.
 * Its internal grid stays in normal flow while the global paper and crop
 * geometry remain owned by the body. */
body > .home {
  z-index: 1;
}

body > .crop-h,
body > .crop-v,
body > .crop-c {
  z-index: 2;
}

#sunlit-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  background:
    radial-gradient(ellipse at 16% 8%, rgba(255, 254, 247, 0.56), transparent 68%),
    linear-gradient(85deg, var(--sunlit-paper-near), var(--sunlit-paper-far));
}

/* Authored lokta pulp remains visible if WebGL, workers, or scripts fail. */
#sunlit-scene::before {
  content: "";
  position: absolute;
  inset: -1.5rem;
  background: url("../textures/lokta-fibres.svg") 17px 11px / 360px 360px repeat;
  opacity: 0.3;
}

/* A static projected-slat field prevents the prepaint state from becoming a
 * blank gradient. Its long, low-contrast feather avoids a visible cutoff, so
 * the brief poster cannot reintroduce the removed vertical mullion. */
#sunlit-scene::after {
  content: "";
  position: absolute;
  inset: -18vh -18vw;
  z-index: 0;
  background: repeating-linear-gradient(
      to bottom,
      transparent 0,
      rgba(231, 233, 228, 0.24) 4px,
      rgba(214, 218, 212, 0.72) 8px,
      rgba(197, 201, 195, 0.92) 13px 47px,
      rgba(214, 218, 212, 0.72) 52px,
      rgba(231, 233, 228, 0.24) 57px,
      transparent 61px 64px
    );
  filter: blur(7px);
  opacity: 0.84;
  transform: rotate(-20deg);
  transform-origin: center top;
  -webkit-mask-image: linear-gradient(105deg, transparent 0 18%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.56) 70%, #000 100%);
  mask-image: linear-gradient(105deg, transparent 0 18%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.56) 70%, #000 100%);
}

body.sunset #sunlit-scene {
  background:
    radial-gradient(circle at 86% 14%, var(--sunlit-rhododendron), transparent 40%),
    linear-gradient(85deg, #efbb91, var(--sunlit-sunset));
}

body.sunset #sunlit-scene::before {
  opacity: 0.32;
}

body.sunset #sunlit-scene::after {
  background: repeating-linear-gradient(
      to bottom,
      transparent 0,
      rgba(232, 233, 229, 0.22) 4px,
      rgba(216, 219, 214, 0.68) 8px,
      rgba(197, 201, 195, 0.92) 12px 27px,
      rgba(216, 219, 214, 0.68) 32px,
      rgba(232, 233, 229, 0.22) 37px,
      transparent 42px 74px
    );
  filter: blur(7px);
  opacity: 0.84;
  transform: rotate(-16deg) translate3d(10vw, 0, 0);
  -webkit-mask-image: linear-gradient(101deg, transparent 0 18%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.56) 70%, #000 100%);
  mask-image: linear-gradient(101deg, transparent 0 18%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.56) 70%, #000 100%);
}

/*
 * A real frame from the previous live surface is available on ordinary links,
 * reloads, and history traversal. The root paints it before the body exists.
 * Matching gradients remain beneath the frame while the browser decodes it.
 * The scene hides its fibre and shutter layers because the frame contains both.
 */
html.sunlit-has-handoff {
  background-color: var(--sunlit-paper-near);
  background-image:
    var(--sunlit-handoff-frame),
    radial-gradient(ellipse at 16% 8%, rgba(255, 254, 247, 0.56), transparent 68%),
    linear-gradient(85deg, var(--sunlit-paper-near), var(--sunlit-paper-far));
  background-position: center top, center top, center top;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 100vw 100vh, 100vw 100vh, 100vw 100vh;
}

html.sunlit-has-handoff[data-sunlit-handoff-theme="sunset"] {
  background-color: #efbb91;
  background-image:
    var(--sunlit-handoff-frame),
    radial-gradient(circle at 86% 14%, var(--sunlit-rhododendron), transparent 40%),
    linear-gradient(85deg, #efbb91, var(--sunlit-sunset));
}

html.sunlit-has-handoff #sunlit-scene {
  background-color: var(--sunlit-paper-near);
  background-image:
    var(--sunlit-handoff-frame),
    radial-gradient(ellipse at 16% 8%, rgba(255, 254, 247, 0.56), transparent 68%),
    linear-gradient(85deg, var(--sunlit-paper-near), var(--sunlit-paper-far));
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%, 100% 100%;
}

html.sunlit-has-handoff body.sunset #sunlit-scene {
  background-color: #efbb91;
  background-image:
    var(--sunlit-handoff-frame),
    radial-gradient(circle at 86% 14%, var(--sunlit-rhododendron), transparent 40%),
    linear-gradient(85deg, #efbb91, var(--sunlit-sunset));
}

html.sunlit-has-handoff #sunlit-scene::before,
html.sunlit-has-handoff #sunlit-scene::after {
  display: none;
}

#sunlit-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 90ms ease-out;
}

#sunlit-scene.is-live #sunlit-canvas {
  opacity: 1;
}

/* Once the opaque renderer has produced a frame, remove—not merely cover—the
 * static filtered plate. Otherwise the browser may keep a second viewport-wide
 * raster alive underneath the canvas during a fling. */
#sunlit-scene.is-handoff-complete::before,
#sunlit-scene.is-handoff-complete::after {
  display: none;
}

#sunlit-scene.is-fallback #sunlit-canvas {
  display: none;
}

#theme-toggle {
  /* The control belongs to the paper frame, not the viewport. The body is the
   * crop marks' containing block, so absolute placement keeps both locked to
   * the same corner and lets them leave the screen together. */
  position: absolute;
  left: 20px;
  z-index: 1000;
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sunlit-utility-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* The static poster is already the complete no-script experience. Do not
 * leave a focusable promise of a mode change when its controller is absent. */
body.no-js #theme-toggle {
  display: none;
}

#theme-toggle {
  top: 20px;
  opacity: 1;
  transition: opacity 50ms ease-out;
}

#theme-toggle:hover,
#theme-toggle:focus-visible {
  opacity: 0.7;
}

#theme-toggle:focus-visible {
  outline: 1px solid rgba(40, 53, 45, 0.58);
  outline-offset: 4px;
  border-radius: 50%;
}

/* Preserve Sunlit's tiny crop-corner glyphs while making the controls easier
 * to acquire. Pseudo-elements enlarge only the hit region, so neither the
 * optical position nor the focus ring moves. */
#theme-toggle::before {
  position: absolute;
  inset: -3px -7px;
  content: "";
}

#theme-toggle span,
#theme-toggle svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 18px;
  height: 18px;
}

#theme-toggle .moon svg {
  width: 20px;
  height: 20px;
}

#theme-toggle svg {
  fill: currentColor;
  stroke: none;
}

#theme-toggle .sun {
  opacity: 0.5;
  transition: opacity 150ms ease-out 30ms;
}

#theme-toggle .moon {
  opacity: 0;
  transition: opacity 50ms ease-out;
}

body.sunset #theme-toggle .sun {
  opacity: 0;
  transition: opacity 50ms ease-out;
}

body.sunset #theme-toggle .moon {
  opacity: 0.5;
  transition: opacity 150ms ease-out 30ms;
}

@media (max-width: 599px) {
  #sunlit-scene::before {
    background-size: 290px 290px, cover;
    opacity: 0.23;
  }

  #sunlit-scene::after {
    background: repeating-linear-gradient(
      to bottom,
      transparent 0,
      rgba(231, 233, 228, 0.24) 4px,
      rgba(214, 218, 212, 0.70) 8px,
      rgba(197, 201, 195, 0.90) 12px 38px,
      rgba(214, 218, 212, 0.70) 43px,
      rgba(231, 233, 228, 0.24) 48px,
      transparent 53px 58px
    );
    -webkit-mask-image: linear-gradient(95deg, transparent 0 30%, rgba(0, 0, 0, 0.14) 48%, rgba(0, 0, 0, 0.58) 72%, #000 100%);
    mask-image: linear-gradient(95deg, transparent 0 30%, rgba(0, 0, 0, 0.14) 48%, rgba(0, 0, 0, 0.58) 72%, #000 100%);
    opacity: 0.82;
  }

  body.sunset #sunlit-scene::after {
    background: repeating-linear-gradient(
      to bottom,
      transparent 0,
      rgba(232, 233, 229, 0.22) 4px,
      rgba(216, 219, 214, 0.66) 8px,
      rgba(197, 201, 195, 0.90) 12px 27px,
      rgba(216, 219, 214, 0.66) 32px,
      rgba(232, 233, 229, 0.22) 37px,
      transparent 42px 67px
    );
    -webkit-mask-image: linear-gradient(91deg, transparent 0 30%, rgba(0, 0, 0, 0.14) 48%, rgba(0, 0, 0, 0.58) 72%, #000 100%);
    mask-image: linear-gradient(91deg, transparent 0 30%, rgba(0, 0, 0, 0.14) 48%, rgba(0, 0, 0, 0.58) 72%, #000 100%);
    opacity: 0.82;
  }
}

@media (prefers-reduced-motion: reduce) {
  #sunlit-canvas,
  #theme-toggle span {
    transition-duration: 80ms;
  }
}

@media (forced-colors: active) {
  #sunlit-scene {
    display: none;
  }

  #theme-toggle {
    color: ButtonText;
    forced-color-adjust: auto;
  }
}

@media print {
  #sunlit-scene,
  #theme-toggle {
    display: none !important;
  }
}