:root {
  --sun-x: 14%;
  --sun-y: 10%;
  --sun-size: 135px;
  --sun-opacity: 1;
  --sun-warmth: .65;
  --sun-reflection-x: 36%;
  --sun-reflection-opacity: .5;
  --sky-top: #0a76c9;
  --sky-mid: #5aa7e9;
  --sky-low: #d7efff;
  --lake-deep: #075267;
  --lake-mid: #0896a9;
  --lake-light: #5fe1e9;
  --grass-dark: #2d601f;
  --grass: #70a944;
  --rock-dark: #3b3e3e;
  --rock-mid: #7b7870;
  --rock-light: #c6c1b7;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background: #06203a;
}

.alpine-scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at var(--sun-x) var(--sun-y), rgba(255,255,255,.55), transparent 12%),
    linear-gradient(to bottom, var(--sky-top) 0%, var(--sky-mid) 42%, var(--sky-low) 63%, #69a957 86%, #25411f 100%);
}

.sky-layer {
  position: absolute;
  inset: 0 0 37% 0;
  z-index: 1;
  overflow: hidden;
}
.sky-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at var(--sun-x) var(--sun-y), rgba(255,255,255,.38), rgba(255,255,255,.08) 12%, transparent 30%),
    linear-gradient(to bottom, rgba(255,255,255,.08), transparent 72%);
  opacity: calc(.75 + .25 * var(--sun-opacity));
}

.sun {
  position: absolute;
  left: var(--sun-x);
  top: var(--sun-y);
  width: var(--sun-size);
  height: var(--sun-size);
  transform: translate(-50%, -50%);
  opacity: var(--sun-opacity);
  z-index: 4;
  pointer-events: none;
}
.sun-core {
  position: absolute;
  inset: 36%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 26%, #fff8d1 45%, #ffcf6d 70%, transparent 72%);
  box-shadow:
    0 0 18px rgba(255,255,255,.96),
    0 0 60px rgba(255,237,170,.72),
    0 0 130px rgba(255,184,83,.42);
}
.sun-rays {
  position: absolute;
  inset: -26%;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 8deg, rgba(255,255,255,.62) 0deg 3deg, transparent 8deg 17deg),
    radial-gradient(circle, rgba(255,255,255,.35), transparent 62%);
  filter: blur(.8px);
  animation: slowSpin 36s linear infinite;
}
@keyframes slowSpin { to { transform: rotate(360deg); } }

.haze {
  position: absolute;
  width: 44vw;
  height: 18vh;
  top: 44%;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  filter: blur(22px);
  opacity: .45;
}
.haze-left { left: -8%; }
.haze-right { right: -10%; }
.cloud {
  position: absolute;
  height: 5vh;
  border-radius: 999px;
  background: rgba(255,255,255,.28);
  filter: blur(12px);
  animation: cloudMove 44s linear infinite alternate;
}
.cloud-1 { left: 38%; top: 15%; width: 18vw; opacity: .45; }
.cloud-2 { left: 64%; top: 24%; width: 25vw; opacity: .26; animation-duration: 58s; }
.cloud-3 { left: 9%; top: 33%; width: 20vw; opacity: .22; animation-duration: 53s; }
@keyframes cloudMove { to { transform: translateX(5vw); } }

.mountain-stage {
  position: absolute;
  left: -4vw;
  right: -4vw;
  top: 27vh;
  height: 33vh;
  z-index: 3;
  filter: drop-shadow(0 24px 26px rgba(0,0,0,.35));
}
.mountain {
  position: absolute;
  bottom: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  overflow: hidden;
}
.mountain::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(118deg, rgba(255,255,255,.33) 0 22%, transparent 23% 100%),
    linear-gradient(244deg, rgba(0,0,0,.32) 0 38%, transparent 39% 100%),
    linear-gradient(to bottom, #8e938c, #494b49 55%, #252a2e 100%);
}
.mountain::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(68deg, transparent 0 16px, rgba(255,255,255,.09) 17px 20px, transparent 21px 31px),
    repeating-linear-gradient(124deg, transparent 0 12px, rgba(0,0,0,.14) 13px 17px, transparent 18px 27px);
  opacity: .7;
}
.mountain span {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(118deg, transparent 0 31%, rgba(255,255,255,.82) 32% 39%, transparent 40% 100%),
    linear-gradient(240deg, transparent 0 55%, rgba(255,255,255,.46) 56% 60%, transparent 61% 100%);
  clip-path: polygon(50% 0, 61% 21%, 55% 18%, 50% 31%, 43% 20%, 36% 30%);
  opacity: .45;
}
.far { opacity: .74; filter: saturate(.82) brightness(.92); }
.mid { opacity: .92; }
.near { opacity: 1; }
.far-1 { left: 0%; width: 32vw; height: 24vh; }
.far-2 { left: 64%; width: 34vw; height: 22vh; }
.mid-1 { left: 8%; width: 36vw; height: 31vh; }
.mid-2 { left: 35%; width: 31vw; height: 24vh; }
.mid-3 { left: 59%; width: 32vw; height: 28vh; }
.near-1 { left: -3%; width: 28vw; height: 23vh; }
.near-2 { left: 50%; width: 25vw; height: 22vh; }
.near-3 { left: 75%; width: 23vw; height: 20vh; }

.green-slope {
  position: absolute;
  bottom: -2.5vh;
  height: 14vh;
  background:
    radial-gradient(ellipse at 52% 30%, rgba(255,239,126,.36), transparent 20%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.16) 0 2px, transparent 3px 22px),
    linear-gradient(to bottom, #86bd4c, #356727 78%, #1a3519 100%);
  filter: drop-shadow(0 8px 13px rgba(0,0,0,.22));
}
.slope-left {
  left: -2vw;
  width: 48vw;
  clip-path: polygon(0 55%, 31% 4%, 55% 30%, 100% 14%, 100% 100%, 0 100%);
}
.slope-right {
  right: -2vw;
  width: 55vw;
  clip-path: polygon(0 25%, 34% 12%, 57% 37%, 86% 0, 100% 39%, 100% 100%, 0 100%);
}
.pine-line {
  position: absolute;
  bottom: 0;
  height: 10vh;
  background:
    repeating-linear-gradient(88deg, transparent 0 13px, #133818 14px 17px, transparent 18px 25px),
    linear-gradient(to top, #071609, transparent);
  opacity: .9;
}
.pine-line-left { left: 0; width: 36vw; clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%); }
.pine-line-right { right: 0; width: 42vw; clip-path: polygon(0 5%, 100% 43%, 100% 100%, 0 100%); }

.lake-zone {
  position: absolute;
  left: 0;
  right: 0;
  top: 50vh;
  height: 32vh;
  z-index: 4;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 48% 68%, rgba(85,234,238,.65), transparent 26%),
    linear-gradient(to bottom, var(--lake-mid) 0%, var(--lake-deep) 88%);
  clip-path: polygon(5% 0, 95% 0, 100% 26%, 94% 65%, 72% 95%, 30% 100%, 6% 72%, 0 25%);
  box-shadow: inset 0 24px 35px rgba(255,255,255,.22), inset 0 -44px 70px rgba(1,30,42,.55);
}
.lake-back-edge {
  position: absolute;
  left: 5%; right: 5%; top: 0;
  height: 16px;
  background: linear-gradient(90deg, transparent, rgba(193,247,238,.55), transparent);
  filter: blur(3px);
  z-index: 4;
}
.water-glass {
  position: absolute;
  inset: 0;
  z-index: 5;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.13), rgba(255,255,255,0) 24%),
    repeating-linear-gradient(94deg, transparent 0 34px, rgba(255,255,255,.11) 36px 39px, transparent 42px 76px);
  mix-blend-mode: screen;
  opacity: .7;
  animation: glassSlide 9s ease-in-out infinite alternate;
}
@keyframes glassSlide { to { transform: translateX(46px); } }
#waterCanvas {
  position: absolute;
  inset: 0;
  z-index: 7;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  pointer-events: none;
}
.mountain-reflection {
  position: absolute;
  bottom: 8%;
  height: 88%;
  transform: scaleY(-1);
  transform-origin: bottom;
  opacity: .42;
  filter: blur(2px) saturate(.95);
  mix-blend-mode: multiply;
  z-index: 2;
}
.mountain-reflection::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(122deg, rgba(255,255,255,.36) 0 21%, transparent 22% 100%),
    linear-gradient(244deg, rgba(0,0,0,.32) 0 42%, transparent 43% 100%),
    linear-gradient(to bottom, rgba(60,83,87,.88), rgba(10,54,64,.82));
}
.reflection-left { left: 3%; width: 38vw; }
.reflection-center { left: 34%; width: 31vw; height: 75%; opacity: .35; }
.reflection-right { left: 58%; width: 36vw; }
.sun-reflection {
  position: absolute;
  left: calc(var(--sun-reflection-x) - 9%);
  top: 0;
  width: 18%;
  height: 100%;
  z-index: 8;
  opacity: var(--sun-reflection-opacity);
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.62) 0 4px, rgba(255,226,137,.24) 7px 15px, transparent 20px 35px),
    linear-gradient(to bottom, rgba(255,255,255,.6), rgba(255,205,105,.28), transparent 70%);
  filter: blur(8px);
  mix-blend-mode: screen;
  animation: sunReflectionPulse 3.6s ease-in-out infinite alternate;
}
@keyframes sunReflectionPulse {
  from { transform: translateX(-12px) scaleX(.82); }
  to { transform: translateX(12px) scaleX(1.16); }
}
.shoreline {
  position: absolute;
  bottom: -2vh;
  height: 10vh;
  width: 34vw;
  z-index: 9;
  background:
    linear-gradient(to top, rgba(104,126,72,.9), rgba(126,166,76,.42), transparent),
    repeating-linear-gradient(118deg, transparent 0 15px, rgba(255,255,255,.18) 16px 18px, transparent 19px 32px);
  filter: blur(1px);
}
.shoreline-left { left: -4vw; clip-path: polygon(0 30%, 76% 0, 100% 100%, 0 100%); }
.shoreline-right { right: -8vw; width: 42vw; clip-path: polygon(21% 0, 100% 28%, 100% 100%, 0 100%); }
.islet {
  position: absolute;
  left: 47%; top: 43%;
  width: 10vw; height: 4.2vh;
  z-index: 10;
  border-radius: 48% 52% 42% 58%;
  background: linear-gradient(145deg, #84796a, #2e392f 76%);
  box-shadow: 0 14px 20px rgba(0,0,0,.22);
}
.islet span {
  position: absolute; left: 30%; bottom: 72%;
  width: 36%; height: 3vh;
  background: #17451c;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.foreground {
  position: absolute;
  inset: auto 0 0 0;
  height: 30vh;
  z-index: 12;
  overflow: hidden;
  background: linear-gradient(to top, rgba(9,28,13,.96), rgba(28,82,25,.72) 52%, transparent 100%);
}
.ground {
  position: absolute;
  bottom: -3vh;
  height: 22vh;
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.22), transparent 12%),
    repeating-linear-gradient(104deg, rgba(255,255,255,.12) 0 2px, transparent 3px 18px),
    linear-gradient(140deg, #7db243, #275c1d 68%, #0b240d);
  filter: drop-shadow(0 -12px 18px rgba(0,0,0,.25));
}
.ground-left { left: -6vw; width: 62vw; clip-path: polygon(0 34%, 35% 0, 76% 38%, 100% 100%, 0 100%); }
.ground-right { right: -8vw; width: 62vw; clip-path: polygon(0 58%, 35% 22%, 67% 0, 100% 40%, 100% 100%, 0 100%); }
.boulder {
  position: absolute;
  z-index: 5;
  border-radius: 36% 64% 46% 54%;
  background:
    linear-gradient(128deg, rgba(255,255,255,.38), transparent 24%),
    linear-gradient(145deg, var(--rock-light), var(--rock-mid) 44%, var(--rock-dark) 100%);
  box-shadow: inset -12px -18px 24px rgba(0,0,0,.26), 0 18px 23px rgba(0,0,0,.34);
}
.boulder-1 { left: 4vw; bottom: 6vh; width: 15vw; height: 12vh; transform: rotate(-9deg); }
.boulder-2 { left: 17vw; bottom: 9vh; width: 8vw; height: 16vh; transform: rotate(9deg); }
.boulder-3 { right: 4vw; bottom: 6vh; width: 18vw; height: 20vh; border-radius: 48% 36% 52% 30%; transform: rotate(7deg); }
.boulder-4 { right: 23vw; bottom: 4vh; width: 9vw; height: 8vh; transform: rotate(-14deg); }
.bush {
  position: absolute;
  z-index: 7;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, #8ac744, transparent 28%),
    radial-gradient(circle at 68% 34%, #69a640, transparent 32%),
    radial-gradient(circle at 50% 72%, #285c21, transparent 44%);
  filter: drop-shadow(0 10px 9px rgba(0,0,0,.26));
  animation: bushWind 4.8s ease-in-out infinite alternate;
}
.bush-1 { left: 26vw; bottom: 6vh; width: 17vw; height: 12vh; }
.bush-2 { right: 28vw; bottom: 5vh; width: 15vw; height: 10vh; animation-delay: .6s; }
.bush-3 { left: 42vw; bottom: 2vh; width: 18vw; height: 8vh; animation-delay: 1.1s; }
@keyframes bushWind { to { transform: skewX(-2deg) translateX(4px); } }
.flowers {
  position: absolute;
  z-index: 9;
  height: 10vh;
  background:
    radial-gradient(circle, #b162ff 0 2px, transparent 3px) 0 4px / 21px 20px,
    radial-gradient(circle, #ffcf5e 0 1.5px, transparent 2.5px) 8px 14px / 26px 24px,
    radial-gradient(circle, #f4f0ff 0 1.5px, transparent 2.5px) 14px 2px / 24px 23px;
  opacity: .95;
  filter: drop-shadow(0 4px 3px rgba(0,0,0,.25));
}
.flowers-1 { left: 1vw; bottom: 1vh; width: 40vw; }
.flowers-2 { left: 41vw; bottom: .5vh; width: 27vw; }
.flowers-3 { right: 2vw; bottom: 1.5vh; width: 30vw; }
.foreground-pine {
  position: absolute;
  bottom: 8vh;
  width: 0; height: 0;
  z-index: 8;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 118px solid #17451d;
  filter: drop-shadow(0 12px 9px rgba(0,0,0,.35));
}
.foreground-pine::after {
  content: "";
  position: absolute;
  left: -4px; top: 88px;
  width: 8px; height: 60px;
  background: #51351d;
  border-radius: 999px;
}
.pine-a { right: 7vw; transform: scale(1.15); }
.pine-b { right: 14vw; bottom: 11vh; transform: scale(.82); opacity: .92; }

.solar-debug {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 30;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px;
  color: rgba(255,255,255,.92);
  background: rgba(4,18,31,.28);
  backdrop-filter: blur(10px);
  font-size: 12px;
  box-shadow: 0 12px 34px rgba(0,0,0,.18);
}
.solar-debug strong { font-size: 12px; letter-spacing: .02em; }
.solar-debug span { opacity: .84; }

@media (max-width: 820px) {
  :root { --sun-size: 110px; }
  .mountain-stage { top: 30vh; height: 28vh; }
  .lake-zone { top: 53vh; height: 31vh; clip-path: polygon(0 0,100% 0,100% 72%,73% 100%,28% 100%,0 72%); }
  .foreground { height: 30vh; }
  .solar-debug { display: none; }
  .boulder-3 { width: 25vw; }
  .boulder-1 { width: 21vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}