/* Two image layers keep the slideshow light; the shade stays still above them. */
.landscape {
  overflow: hidden;
  pointer-events: none;
  background: #0b1d24;
}

.scenery-frame {
  position: absolute;
  inset: 0 auto 0 -6vw;
  width: 112vw;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  max-width: none;
  will-change: transform, opacity;
}

.scenery-next { opacity: 0; }

.landscape::after {
  z-index: 2;
  background:
    radial-gradient(ellipse at 50% 38%, transparent 15%, #06151b65 90%),
    linear-gradient(180deg, rgba(5,17,23,.38), rgba(4,19,27,.22) 28%, rgba(4,17,24,.83) 72%, #06131bea);
}

.scenery-controls { display: flex; align-items: center; gap: 28px; }
.scenery-toggle {
  font: inherit;
  font-size: 12px;
  color: #d0dce0;
  border: 1px solid #d0dce040;
  background: #07182070;
  padding: 9px 12px;
  border-radius: 3px;
  cursor: pointer;
}
.scenery-toggle:hover { color: #efbe79; border-color: #efbe7970; }
.scenery-toggle:focus-visible { outline: 2px solid #edbc7b; outline-offset: 5px; }

@media (max-width: 640px) {
  header { gap: 10px; }
  .back { font-size: 10px; letter-spacing: .1em; }
  .back span { margin-right: 5px; }
  .scenery-controls { gap: 0; }
  .scenery-toggle { font-size: 12px; padding: 8px; white-space: nowrap; }
  .scenery-frame { object-position: 58% center; }
}