.horizon-line {
  position: absolute;
  left: 0;
  top: 45%;
  width: 100%;
  height: 20%;
  background:
    linear-gradient(
      to bottom,
      rgba(var(--light-color), 0) 0%,
      rgba(var(--light-color), 0.08) 48%,
      rgba(var(--shadow-color), 0.04) 100%
    );
}

.terrain {
  position: absolute;
  left: -4%;
  bottom: -2%;
  width: 108%;
  height: 47%;
  border-radius: 52% 48% 0 0 / 8% 11% 0 0;
  background:
    radial-gradient(
      ellipse at 68% 26%,
      rgba(var(--light-color), 0.08) 0 18%,
      transparent 44%
    ),
    linear-gradient(
      118deg,
      var(--terrain-shadow) 0%,
      var(--terrain-surface) 42%,
      var(--terrain-light) 72%,
      var(--terrain-surface) 100%
    );
}

.terrain::before {
  content: "";
  position: absolute;
  left: 5%;
  top: -6vh;
  width: 90%;
  height: 10vh;
  border-radius: 46% 54% 0 0 / 78% 66% 0 0;
  background:
    linear-gradient(
      to right,
      color-mix(in srgb, var(--terrain-distant) 88%, var(--forest-far)) 0%,
      var(--terrain-distant) 52%,
      color-mix(in srgb, var(--terrain-distant) 86%, var(--terrain-light)) 100%
    );
}

.terrain::after {
  content: "";
  position: absolute;
  left: 12%;
  bottom: -8%;
  width: 52%;
  height: 54%;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse at 60% 0%,
      rgba(var(--light-color), 0.08),
      rgba(var(--shadow-color), 0.07) 54%,
      rgba(var(--shadow-color), 0) 72%
    );
  transform: rotate(-8deg);
}

.forest-ridge {
  position: absolute;
  left: -3%;
  width: 106%;
  transform-origin: 50% 100%;
}

.forest-ridge--far {
  bottom: 43%;
  height: 13%;
  background: var(--forest-far);
  clip-path: polygon(
    0 100%, 0 72%, 4% 48%, 7% 73%, 11% 40%, 15% 68%, 19% 32%,
    23% 70%, 28% 46%, 33% 75%, 38% 37%, 43% 70%, 48% 43%, 54% 72%,
    60% 34%, 65% 70%, 71% 45%, 77% 74%, 82% 38%, 87% 68%, 92% 47%,
    96% 72%, 100% 50%, 100% 100%
  );
  opacity: 0.44;
  filter: blur(0.4px);
}

.forest-ridge--near {
  bottom: 42%;
  height: 11%;
  background: var(--forest-near);
  clip-path: polygon(
    0 100%, 0 58%, 5% 31%, 9% 70%, 14% 37%, 18% 76%, 23% 45%,
    29% 81%, 35% 52%, 42% 84%, 49% 57%, 56% 83%, 63% 49%, 69% 78%,
    75% 42%, 81% 73%, 87% 35%, 92% 70%, 96% 43%, 100% 68%, 100% 100%
  );
  opacity: 0.32;
}

.lake-water {
  position: absolute;
  left: 52%;
  bottom: 13%;
  z-index: 0;
  width: min(37rem, 38vw);
  height: clamp(6rem, 16vh, 10rem);
  border: 1px solid var(--lake-edge-light);
  border-radius: 62% 38% 55% 45% / 42% 58% 39% 61%;
  background-color: var(--lake-surface);
  background:
    radial-gradient(
      ellipse at 48% 18%,
      rgba(220, 241, 252, 0.34),
      rgba(99, 173, 220, 0.08) 38%,
      transparent 58%
    ),
    linear-gradient(
      165deg,
      var(--lake-surface-light) 0%,
      var(--lake-surface) 48%,
      var(--lake-surface-deep) 100%
    );
  box-shadow:
    inset 0 1px rgba(235, 248, 255, 0.36),
    inset 0 -1.2rem 2.4rem rgba(11, 59, 103, 0.2),
    0 0.5rem 1.8rem rgba(23, 75, 116, 0.12);
  overflow: visible;
}

.lake-water::before {
  content: "";
  position: absolute;
  inset: -1.4vh -1.2vw;
  z-index: -1;
  border-radius: 60% 40% 54% 46% / 44% 56% 38% 62%;
  background:
    linear-gradient(
      140deg,
      var(--lake-shore),
      color-mix(in srgb, var(--lake-shore) 84%, var(--terrain-shadow)) 70%
    );
}

.lake-water::after {
  content: "";
  position: absolute;
  left: 18%;
  top: 18%;
  width: 56%;
  height: 20%;
  border-radius: 50%;
  background: var(--lake-reflection);
  filter: blur(0.25rem);
  opacity: 0.72;
  transform: scaleX(0.9);
  transition:
    opacity 4s ease,
    transform 5s ease;
}

.lake-ripples {
  position: absolute;
  inset: 15% 9%;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0.46;
}

.lake-ripples span {
  position: absolute;
  left: var(--ripple-left, 20%);
  top: var(--ripple-top, 28%);
  width: var(--ripple-width, 34%);
  height: 1px;
  border-radius: 50%;
  background: rgba(218, 240, 252, 0.42);
  transform: scaleX(0.72);
  animation: lake-breath 7s ease-in-out infinite;
}

.lake-ripples span:nth-child(2) {
  --ripple-left: 48%;
  --ripple-top: 52%;
  --ripple-width: 28%;
  animation-delay: -2.4s;
}

.lake-ripples span:nth-child(3) {
  --ripple-left: 27%;
  --ripple-top: 72%;
  --ripple-width: 42%;
  animation-delay: -4.8s;
}

.tree-trunk {
  position: absolute;
  left: 25.8%;
  bottom: 20.5%;
  width: clamp(2.2rem, 3.3vw, 3.5rem);
  height: clamp(7.6rem, 18vh, 11.6rem);
  transform: rotate(1deg);
}

.tree-trunk__core {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 38% 52% 20% 27% / 8% 12% 5% 7%;
  background:
    linear-gradient(
      to right,
      color-mix(in srgb, var(--tree-trunk) 70%, rgb(var(--shadow-color))) 0%,
      var(--tree-trunk) 48%,
      color-mix(in srgb, var(--tree-trunk) 88%, rgb(var(--light-color))) 72%,
      color-mix(in srgb, var(--tree-trunk) 78%, rgb(var(--shadow-color))) 100%
    );
  clip-path: polygon(31% 0, 67% 2%, 76% 43%, 82% 100%, 15% 100%, 24% 52%);
}

.tree-trunk::before,
.tree-trunk::after {
  content: "";
  position: absolute;
  top: 5%;
  z-index: 0;
  width: 118%;
  height: 45%;
  background:
    linear-gradient(
      to top,
      var(--tree-trunk),
      color-mix(in srgb, var(--tree-trunk) 88%, rgb(var(--light-color)))
    );
  transform-origin: 50% 100%;
}

.tree-trunk::before {
  left: -83%;
  clip-path: polygon(100% 100%, 73% 49%, 8% 2%, 0 17%, 60% 67%);
  transform: rotate(-3deg);
}

.tree-trunk::after {
  right: -82%;
  clip-path: polygon(0 100%, 27% 48%, 90% 3%, 100% 19%, 41% 68%);
  transform: rotate(4deg);
}

.tree-crown {
  position: absolute;
  left: 18.6%;
  bottom: 34.5%;
  width: clamp(10rem, 18vw, 18rem);
  height: clamp(7.4rem, 20vh, 13rem);
  overflow: hidden;
  border-radius: 42% 58% 38% 62% / 58% 40% 60% 42%;
  background:
    radial-gradient(ellipse at 28% 24%, rgba(var(--light-color), 0.17), transparent 38%),
    radial-gradient(ellipse at 72% 80%, var(--tree-crown-shadow), transparent 62%),
    linear-gradient(142deg, var(--tree-crown-light), var(--tree-crown) 48%, var(--tree-crown-shadow));
  box-shadow:
    inset 1rem 0.5rem 2.8rem rgba(var(--light-color), 0.04),
    inset -1.6rem -1.2rem 2.8rem rgba(var(--shadow-color), 0.13);
  transform: rotate(-2deg);
}

.tree-crown::before,
.tree-crown::after {
  content: "";
  position: absolute;
  border-radius: 45% 55% 42% 58% / 58% 43% 57% 42%;
}

.tree-crown::before {
  left: 7%;
  top: 8%;
  width: 48%;
  height: 58%;
  background: radial-gradient(ellipse, rgba(var(--light-color), 0.12), transparent 68%);
  transform: rotate(10deg);
}

.tree-crown::after {
  right: -6%;
  bottom: -14%;
  width: 72%;
  height: 72%;
  background: radial-gradient(ellipse, rgba(var(--shadow-color), 0.2), transparent 68%);
  transform: rotate(-7deg);
}

.shoreline-rock {
  position: absolute;
  left: 49%;
  bottom: 21%;
  width: clamp(3.2rem, 6vw, 6.4rem);
  height: clamp(1.7rem, 4vh, 2.8rem);
  border-radius: 58% 42% 46% 54% / 71% 63% 37% 29%;
  background:
    radial-gradient(circle at 34% 26%, rgba(var(--light-color), 0.12), transparent 31%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--rock-surface) 88%, rgb(var(--light-color))),
      var(--rock-surface) 58%,
      color-mix(in srgb, var(--rock-surface) 82%, rgb(var(--shadow-color)))
    );
  box-shadow: 0 0.45rem 0.9rem rgba(var(--shadow-color), 0.08);
  transform: rotate(-3deg);
}

.flower {
  --petal-color: var(--flower-red);

  position: absolute;
  width: clamp(0.62rem, 1.15vw, 1rem);
  height: clamp(1.7rem, 4vh, 2.5rem);
  transform-origin: 50% 100%;
}

.flower::before {
  content: "";
  position: absolute;
  left: 48%;
  bottom: 0;
  width: 1px;
  height: 72%;
  background: var(--stem-surface);
  transform: rotate(var(--stem-turn, 0deg));
  transform-origin: 50% 100%;
}

.flower::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 2%;
  width: 74%;
  aspect-ratio: 1;
  border-radius: 58% 42% 55% 45% / 48% 57% 43% 52%;
  background:
    radial-gradient(circle, var(--flower-center) 0 21%, transparent 23%),
    conic-gradient(
      from 10deg,
      var(--petal-color),
      color-mix(in srgb, var(--petal-color) 82%, rgb(var(--light-color))),
      var(--petal-color),
      color-mix(in srgb, var(--petal-color) 86%, rgb(var(--shadow-color))),
      var(--petal-color)
    );
  transform: translateX(-50%) rotate(var(--flower-turn, 0deg));
}

.flower--first {
  left: 32%;
  bottom: 19%;
  --petal-color: var(--flower-red);
  --stem-turn: -4deg;
}

.flower--second {
  left: 38%;
  bottom: 18%;
  --petal-color: var(--flower-yellow);
  --stem-turn: 3deg;
}

.flower--third {
  left: 44%;
  bottom: 20%;
  --petal-color: var(--flower-blue);
  --stem-turn: -2deg;
}

.flower--discovery {
  opacity: 0;
  transform: translateY(0.8rem) scale(0.18) rotate(-8deg);
  transition:
    opacity 0.6s ease,
    transform 1.4s cubic-bezier(0.2, 0.75, 0.25, 1);
}

.flower--discovery-one {
  left: 29%;
  bottom: 17%;
  --petal-color: var(--flower-red);
}

.flower--discovery-two {
  left: 34%;
  bottom: 19%;
  --petal-color: var(--flower-yellow);
  --flower-turn: 7deg;
}

.flower--discovery-three {
  left: 40%;
  bottom: 16%;
  --petal-color: var(--flower-blue);
  --flower-turn: -5deg;
}

.flower--discovery-four {
  left: 47%;
  bottom: 18%;
  --petal-color: var(--flower-red);
  --flower-turn: 5deg;
}

.flower--discovery.is-bloomed {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(var(--flower-turn, 0deg));
}

.refuge:not([data-sky-phase="sunset"]) .lake-water::after {
  opacity: 1;
  transform: scaleX(1);
}

@keyframes lake-breath {
  0%,
  100% {
    opacity: 0.28;
    transform: scaleX(0.72);
  }

  50% {
    opacity: 0.68;
    transform: scaleX(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lake-ripples span {
    animation: none;
  }
}