/* Quiet scenery outside the reading column. No video or new image downloads. */
main { overflow: clip; }
.heart-atmosphere, #cave-explorer { position: relative; isolation: isolate; }
.ambient-scene {
  position: absolute;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 1.5s ease;
  contain: layout paint;
}
.ambient-scene.has-entered { opacity: 1; }
.ambient-forest {
  height: 600px;
  background: radial-gradient(ellipse at 0 60%, #285e4838, transparent 37%),
    radial-gradient(ellipse at 100% 70%, #3156472a, transparent 34%);
  mask-image: linear-gradient(transparent, #000 22%, #000 76%, transparent);
}
.forest-top { top: -155px; }
.forest-bottom { bottom: -50px; }
.ambient-trees {
  position: absolute;
  bottom: 30px;
  width: 280px;
  height: 500px;
  opacity: .26;
  mask-image: linear-gradient(90deg, #000, #0008 62%, transparent);
}
.ambient-left { left: -30px; }
.ambient-right { right: -30px; transform: scaleX(-1); }
.ambient-firefly {
  position: absolute;
  left: var(--edge);
  top: var(--height);
  width: 3px;
  height: 3px;
  background: #dcda9a;
  box-shadow: 0 0 9px 3px #bccd7135;
  opacity: .12;
  animation: firefly-drift var(--duration) ease-in-out var(--delay) infinite;
  animation-play-state: paused;
}
.ambient-firefly.from-right { left: auto; right: var(--edge); }
.ambient-scene.is-active .ambient-firefly,
.ambient-scene.is-active .ambient-cave-light,
.ambient-scene.is-active .ambient-cave-haze { animation-play-state: running; }
@keyframes firefly-drift {
  0%, 100% { opacity: .08; transform: translate(0, 5px); }
  45% { opacity: .55; }
  65% { opacity: .3; transform: translate(var(--drift), -10px); }
}
.ambient-cave {
  top: -90px;
  height: calc(100% + 180px);
  min-height: 420px;
  mask-image: linear-gradient(transparent, #000 24%, #000 70%, transparent);
}
.ambient-rock-left, .ambient-rock-right {
  position: absolute;
  width: clamp(110px, 20vw, 340px);
  height: 100%;
  background: #434450;
  opacity: .23;
}
.ambient-rock-left {
  left: 0;
  clip-path: polygon(0 0, 38% 0, 38% 8%, 61% 8%, 61% 17%, 73% 17%, 73% 27%, 60% 27%, 60% 37%, 81% 37%, 81% 52%, 65% 52%, 65% 65%, 88% 65%, 88% 77%, 100% 77%, 100% 100%, 0 100%);
  mask-image: linear-gradient(90deg, #000, transparent);
}
.ambient-rock-right {
  right: 0;
  clip-path: polygon(100% 0, 28% 0, 28% 14%, 46% 14%, 46% 29%, 32% 29%, 32% 48%, 54% 48%, 54% 68%, 21% 68%, 21% 82%, 0 82%, 0 100%, 100% 100%);
  mask-image: linear-gradient(270deg, #000, transparent);
}
.ambient-cave-light, .ambient-cave-haze { position: absolute; inset: 0; animation-play-state: paused; }
.ambient-cave-light {
  background: radial-gradient(ellipse at 7% 68%, #c68b4330, transparent 40%),
    radial-gradient(ellipse at 98% 50%, #bd7b3124, transparent 28%);
  animation: cave-breathe 9s ease-in-out infinite paused;
}
.ambient-cave-haze {
  background: radial-gradient(ellipse at 8% 80%, #c3a16f14, transparent 32%);
  animation: cave-haze 13s ease-in-out infinite alternate paused;
}
@keyframes cave-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes cave-haze { from { transform: translateY(8px); opacity: .35; } to { transform: translateY(-10px); opacity: .7; } }
.art-reveal { opacity: 0; transform: translateY(12px); transition: opacity .7s ease, transform .7s ease; }
.art-reveal.art-visible, .art-reveal:focus-within { opacity: 1; transform: none; }
body.modal-open .ambient-scene * { animation-play-state: paused !important; }
.ambient-toggle { padding: 6px 0; background: none; font-size: 10px; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
.ambient-toggle:hover { color: var(--cream); }
.ambient-toggle:disabled { cursor: default; text-decoration: none; }
.ambient-paused .art-reveal { opacity: 1; transform: none; transition: none; }
@media (max-width: 720px) {
  .ambient-forest { height: 470px; }
  .ambient-trees { width: 190px; height: 340px; opacity: .17; }
  .ambient-left { left: -75px; }
  .ambient-right { right: -75px; }
  .ambient-firefly:nth-of-type(n+5) { display: none; }
  .ambient-firefly { --edge: 3% !important; width: 2px; height: 2px; }
  .ambient-cave-light { opacity: .65; }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-scene, .art-reveal { opacity: 1; transition: none; }
  .art-reveal { transform: none; }
  .ambient-scene * { animation: none !important; }
  .ambient-firefly { opacity: .15; }
}