/* Original illustrated landscape; moving layers sit behind all page content. */
.hero-world {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #f4e9e2;
}
.hero-scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.scene-landscape {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  transform: scale(1.025);
}
.hero-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Keep text readable across the illustrated tree silhouettes. */
  background: linear-gradient(90deg, #faf7f1f5 0%, #faf7f1e0 38%, #faf7f130 68%, #faf7f100 100%);
}
.hero-world .hero {
  min-height: 680px;
  padding-block: 64px 100px;
}
.hero-world .hero-copy { position: relative; z-index: 1; }
.hero-world .hero-art { position: relative; transform: translateY(56px); }
.hero-world .hero-nox { transform-origin: center 90%; }
.hero-world .hero-art figcaption {
  color: #352e3b;
  text-shadow: 0 1px 8px #faf7f1;
}
.scene-cloud {
  position: absolute;
  width: 420px;
  height: auto;
  opacity: .65;
  pointer-events: none;
}
.scene-cloud-far { top: 5px; left: 48%; width: 480px; opacity: .5; }
.scene-cloud-near { top: 80px; right: -30px; width: 360px; }
.scene-controls { position: absolute; inset: auto 0 20px; text-align: right; }
.scene-motion {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #51415950;
  border-radius: 8px;
  background: #faf7f1e8;
  color: #352e3b;
  font-size: 12px;
  line-height: 1.5;
}
.scene-motion[hidden] { display: none; }
.hero-world .scene-landscape { animation: landscape-breathe 28s ease-in-out infinite alternate; }
.hero-world .scene-cloud-far { animation: cloud-drift-far 45s ease-in-out infinite alternate; }
.hero-world .scene-cloud-near { animation: cloud-drift-near 34s ease-in-out infinite alternate; }
.hero-world .hero-nox { animation: nox-breathe 7s ease-in-out infinite; }
.hero-world[data-motion='paused'] *, .hero-world[data-visible='false'] * { animation-play-state: paused !important; }
@keyframes landscape-breathe { from { transform: scale(1.025) translateX(-.3%); } to { transform: scale(1.045) translateX(.3%); } }
@keyframes cloud-drift-far { from { transform: translateX(-70px); } to { transform: translateX(70px); } }
@keyframes cloud-drift-near { from { transform: translateX(36px); } to { transform: translateX(-55px); } }
@keyframes nox-breathe { 0%,100% { transform: scale(1,1); } 50% { transform: scale(1.008,.989); } }
:root[data-theme='dark'] .hero-world { background: #241e29; }
:root[data-theme='dark'] .hero-scene::after {
  background: linear-gradient(90deg, #241e29f5 0%, #241e29dc 38%, #241e2940 70%, #241e291c 100%);
}
:root[data-theme='dark'] .scene-landscape { filter: brightness(.56) saturate(.8); }
:root[data-theme='dark'] .scene-cloud { opacity: .15; }
:root[data-theme='dark'] .hero-world .hero-art figcaption { color: #f8f3ed; text-shadow: 0 1px 8px #241e29; }
:root[data-theme='dark'] .scene-motion { color: #f8f3ed; background: #241e29e8; border-color: #cdb6d760; }
@media (max-width: 1050px) and (min-width: 768px) {
  .hero-world .hero { min-height: 620px; }
}
@media (max-width: 767px) {
  .hero-world .hero { min-height: 0; padding-block: 38px 90px; }
  .scene-landscape { object-position: 67% bottom; }
  .hero-scene::after { background: linear-gradient(180deg, #faf7f1fc 0%, #faf7f1f2 40%, #faf7f170 63%, #faf7f100 83%); }
  .hero-world .hero-art { transform: none; }
  .hero-world .hero-art figcaption { margin-top: -12px; }
  .scene-cloud-far { left: 8%; top: 340px; width: 380px; }
  .scene-cloud-near { right: -70px; top: 430px; width: 280px; }
  .scene-controls { bottom: 16px; }
  :root[data-theme='dark'] .hero-scene::after { background: linear-gradient(180deg, #241e29fc 0%, #241e29f0 40%, #241e2990 63%, #241e2920 85%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-world * { animation: none !important; }
}
/* Preserve a readable static scene when scripts are unavailable. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .hero-world { background: #241e29; }
  :root:not([data-theme='light']) .hero-scene::after { background: linear-gradient(90deg, #241e29f5 0%, #241e29dc 38%, #241e2940 70%, #241e291c 100%); }
  :root:not([data-theme='light']) .scene-landscape { filter: brightness(.56) saturate(.8); }
  :root:not([data-theme='light']) .scene-cloud { opacity: .15; }
  :root:not([data-theme='light']) .hero-world .hero-art figcaption { color: #f8f3ed; text-shadow: 0 1px 8px #241e29; }
}
@media (prefers-color-scheme: dark) and (max-width: 767px) {
  :root:not([data-theme='light']) .hero-scene::after { background: linear-gradient(180deg, #241e29fc 0%, #241e29f0 40%, #241e2990 63%, #241e2920 85%); }
}