/* Songnan in ink and gold. Static detail survives reduced motion and no JS. */
:root {
  --scenery-base: #111f1b;
  --scenery-light: #b89a5530;
  --scenery-jade: #52776322;
  --scenery-strength: .84;
}
html[data-theme=night] {
  --scenery-base: #0c191b;
  --scenery-light: #aa935b19;
  --scenery-jade: #486e7a1d;
  --scenery-strength: .62;
}
body {
  background: var(--scenery-base);
}
/* Replace the older oversized gradient planes with one contained atmosphere. */
body::before, body::after { content: none; }
.ambient-scenery {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  background:
    radial-gradient(ellipse at 89% 10%, var(--scenery-light), transparent 54%),
    radial-gradient(ellipse at 0% 68%, var(--scenery-jade), transparent 52%);
}
.ambient-scenery > div { position: absolute; pointer-events: none; }
.scenery-relief {
  inset: 0;
  background: url('assets/songnan-relief.svg') center / cover no-repeat;
  opacity: var(--scenery-strength);
  /* Leave a dark, calm middle for long reading pages. */
  mask-image: linear-gradient(90deg, #000, #0009 24%, #0004 46%, #0009 72%, #000);
}
.scenery-mist {
  inset: -6%;
  background:
    radial-gradient(ellipse 65% 12% at 15% 64%, #91ada314, transparent 75%),
    radial-gradient(ellipse 53% 8% at 87% 34%, #e4cc8a10, transparent 75%),
    radial-gradient(ellipse 70% 10% at 67% 83%, #aac0ad0c, transparent 75%);
  animation: songnan-mist 38s ease-in-out infinite alternate;
}
.scenery-grain {
  inset: 0;
  background: url('assets/ink-grain.svg') repeat;
  background-size: 180px 180px;
  opacity: .045;
}
@keyframes songnan-mist {
  from { transform: translate3d(-2%, 1%, 0); opacity: .55; }
  to { transform: translate3d(2%, -1%, 0); opacity: 1; }
}
@media (max-width: 650px) {
  .scenery-relief { background-position: 69% center; opacity: calc(var(--scenery-strength) * .72); }
  .scenery-grain { opacity: .03; }
}
html[data-motion=off] .scenery-mist { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .scenery-mist { animation: none; }
}
/* Background detail must never compete with the stronger reading mode. */
html[data-contrast=high] .ambient-scenery,
html[data-contrast=high] .ambient-canvas { display: none; }
@media (prefers-contrast: more), (forced-colors: active) {
  .ambient-scenery, .ambient-canvas { display: none; }
}
@media print {
  body { background: white; }
  .ambient-scenery { display: none; }
}