/* Independent, opaque photographic planes. No repeated whole-photo overlays. */
.strata-diorama {
  position: relative;
  height: clamp(640px, calc(100svh - 66px), 1000px);
  isolation: isolate;
  overflow: clip;
  background: #253229;
}
.diorama-window { position: absolute; inset: 0; container-type: size; overflow: hidden; }
.diorama-stage {
  position: absolute;
  width: max(calc(100cqw + 160px), calc(150cqh + 160px));
  aspect-ratio: 3 / 2;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.diorama-plane { position: absolute; inset: 0; pointer-events: none; }
.diorama-plane > img { display: block; width: 100%; height: 100%; object-fit: fill; user-select: none; }
.diorama-plane[data-depth] { transform: translate3d(0,0,0); }
.strata-diorama.is-active .diorama-plane[data-depth] { will-change: transform; }
.diorama-far-hill { top: 5%; bottom: -5%; }
.diorama-valley { top: 10%; bottom: -10%; }
.diorama-trees { top: 3%; bottom: -3%; left: 5%; right: -5%; }
.diorama-ground { top: 64%; bottom: -14%; }
.diorama-wildlife img { position: absolute; object-fit: contain; height: auto; }
.diorama-wildlife .diorama-deer { left: 45%; top: 67%; width: 5.8%; }
.diorama-wildlife .diorama-fox { left: 81%; top: 72.5%; width: 8.1%; }
.diorama-birds > img { position: absolute; left: 67%; top: 23%; width: 15%; height: auto; animation: diorama-glide 57s -12s ease-in-out infinite alternate; }
@keyframes diorama-glide { from { translate: -18px 4px; } to { translate: 24px -8px; } }
.strata-diorama:not(.is-active) .diorama-birds > img, .strata-diorama.is-paused .diorama-birds > img { animation-play-state: paused; }
.diorama-canopy { inset: -1.5%; }
.diorama-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #0c150d80, transparent 60%),
    linear-gradient(0deg, #10190ee8, transparent 37%);
}
.diorama-copy {
  position: absolute; left: 7%; bottom: 10%; z-index: 2;
  max-width: 690px; width: 62%;
  text-shadow: 0 2px 4px #14201199, 0 8px 24px #10201066;
}
.diorama-copy > p { font: 11px/1.5 monospace; letter-spacing: .24em; color: #fff0cd; }
.diorama-copy h1 { font: clamp(62px, 7.5vw, 116px)/1.01 Georgia,serif; letter-spacing: -.045em; margin: 20px 0 24px; }
.diorama-copy h1 em { color: #ffe0a0; }
.diorama-copy > span { font: 13px/1.6 monospace; display: block; max-width: 38ch; }
.diorama-controls { position: absolute; right: 5%; bottom: 5%; z-index: 3; display: flex; gap: 15px; align-items: center; }
.diorama-hint { font: 10px/1.5 monospace; letter-spacing: .1em; color: #ffefc9; }
.diorama-toggle { border: 1px solid #ebd4a766; border-radius: 30px; padding: 10px 15px; background: #142016b8; color: #ffeaca; font: 11px monospace; min-height: 40px; }
.diorama-sun { position: absolute; width: 22%; height: 30%; left: 13%; top: 15%; background: radial-gradient(ellipse,#fff1a044,transparent 66%); mix-blend-mode: screen; pointer-events: none; }
.diorama-motes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.diorama-motes i { position: absolute; left: var(--x); top: var(--y); width: 2px; height: 2px; background: #ffe8a6; border-radius: 50%; opacity: 0; animation: diorama-mote var(--duration) var(--delay) ease-in-out infinite; }
@keyframes diorama-mote { 0%,100% { opacity: 0; transform: translate(0,12px); } 25%,65% { opacity: .55; } 85% { opacity: 0; transform: translate(22px,-32px); } }
.strata-diorama:not(.is-active) .diorama-motes i, .strata-diorama.is-paused .diorama-motes i { animation-play-state: paused; }
@media (max-width: 700px) {
  .strata-diorama { height: 760px; max-height: none; }
  .diorama-window { bottom: 170px; }
  .diorama-stage { left: 48%; }
  .diorama-copy { left: 7%; bottom: 85px; width: 86%; max-width: none; }
  .diorama-copy h1 { font-size: clamp(52px, 12vw, 76px); line-height: 1.03; }
  .diorama-copy > p { font-size: 9px; }
  .diorama-copy > span { font-size: 11px; }
  .diorama-shade { background: linear-gradient(0deg,#152016 0 22%,#15201655 48%, transparent 80%); }
  .diorama-controls { left: 7%; right: 7%; bottom: 25px; justify-content: space-between; }
  .diorama-hint { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .diorama-motes { display: none; }
  .diorama-birds > img { animation: none; }
  .diorama-hint { display: none; }
}