@media (min-width: 1025px) {
  .lake,
  .tree,
  .flowers,
  .discoveries,
  .quiet-discoveries {
    left: 50%;
    right: auto;
    width: min(100vw, 120rem);
    transform: translateX(-50%);
  }

  .sky {
    --sky-transition-duration: 4.6s;
  }

  .refuge::after {
    transition-duration: 4.6s;
  }

  .lake-water {
    left: 67%;
    width: clamp(28rem, 38vw, 46rem);
    height: clamp(7.5rem, 17vh, 11rem);
    transform: translateX(-50%);
  }

  .tree-trunk {
    left: 27%;
    bottom: 20.5%;
    width: clamp(2.4rem, 3vw, 3.75rem);
    height: clamp(8.5rem, 19vh, 12.5rem);
    transform: translateX(-50%) rotate(1deg);
  }

  .tree-crown {
    left: 27%;
    bottom: 35.5%;
    width: clamp(12rem, 19vw, 21rem);
    height: clamp(8rem, 21vh, 14rem);
    transform: translateX(-50%) rotate(-2deg);
  }

  .shoreline-rock {
    left: 49%;
  }

  .ambient-star {
    --star-size: 2.5px;
    --star-ray: 0.72rem;
    --star-duration: 3.6s;
  }

  .discovery-star {
    --star-size: clamp(0.42rem, 0.55vw, 0.62rem);
  }

  .discovery-star.is-discovered {
    --twinkle-duration: 4.8s;
  }

  .sky-gradient,
  .sky-glow,
  .ambient-stars,
  .ambient-star,
  .discovery-star__light {
    will-change: transform, opacity;
  }
}

@media (min-width: 721px) and (max-width: 1024px) and (orientation: portrait) {
  .sky {
    --sky-transition-duration: 5s;
  }

  .quiet-hotspot--lake {
    left: 68%;
    bottom: 11%;
    width: 52vw;
    height: 17vh;
  }

  .quiet-hotspot--tree {
    left: 24%;
    bottom: 22%;
    width: 29vw;
    height: 32vh;
  }

  .quiet-hotspot--rock {
    left: 40%;
    bottom: 18%;
    width: 12vw;
  }

  .quiet-hotspot--flowers {
    left: 23%;
    bottom: 13%;
    width: 26%;
  }

  .lake-water {
    left: 68%;
    bottom: 13%;
    width: 52vw;
    height: 14vh;
    transform: translateX(-50%);
  }

  .tree-trunk {
    left: 24%;
    bottom: 23%;
    width: 4.8vw;
    height: 15vh;
    transform: translateX(-50%) rotate(1deg);
  }

  .tree-crown {
    left: 24%;
    bottom: 36%;
    width: 29vw;
    height: 18vh;
    transform: translateX(-50%) rotate(-2deg);
  }

  .shoreline-rock {
    left: 42%;
    bottom: 21%;
    width: 9vw;
  }

  .flower--first {
    left: 25%;
  }

  .flower--second {
    left: 32%;
  }

  .flower--third {
    left: 39%;
  }

  .flower--discovery-one {
    left: 28%;
  }

  .flower--discovery-two {
    left: 35%;
  }

  .flower--discovery-three {
    left: 42%;
  }

  .flower--discovery-four {
    left: 46%;
  }

  .discovery-star {
    top: 29%;
    left: 69%;
  }

  .discovery-star--second {
    top: 18%;
    left: 41%;
  }

  .discovery-star--third {
    top: 36%;
    left: 22%;
  }

  .discovery-star--fourth {
    top: 15%;
    left: 74%;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .sky {
    --sky-transition-duration: 4.6s;
  }

  .terrain {
    height: 50%;
  }

  .lake-water {
    left: 69%;
    bottom: 11%;
    width: 42vw;
    height: 27vh;
    transform: translateX(-50%);
  }

  .tree-trunk {
    left: 25%;
    bottom: 18%;
    width: 4vw;
    height: 34vh;
    transform: translateX(-50%) rotate(1deg);
  }

  .tree-crown {
    left: 25%;
    bottom: 42%;
    width: 22vw;
    height: 32vh;
    transform: translateX(-50%) rotate(-2deg);
  }

  .shoreline-rock {
    left: 46%;
    bottom: 18%;
    width: 8vw;
  }

  .flower {
    bottom: 13%;
  }

  .flower--first,
  .flower--discovery-one {
    left: 34%;
  }

  .flower--second,
  .flower--discovery-two {
    left: 39%;
  }

  .flower--third,
  .flower--discovery-three {
    left: 44%;
  }

  .flower--discovery-four {
    left: 49%;
  }

  .quiet-hotspot--lake {
    left: 69%;
    bottom: 8%;
    width: 42vw;
    height: 33vh;
  }

  .quiet-hotspot--tree {
    left: 25%;
    bottom: 16%;
    width: 24vw;
    height: 62vh;
  }

  .quiet-hotspot--rock {
    left: 44%;
    bottom: 14%;
    width: 11vw;
  }

  .quiet-hotspot--flowers {
    left: 32%;
    bottom: 8%;
    width: 21%;
    height: 15%;
  }
}

@media (max-width: 720px) and (orientation: portrait) {
  .terrain {
    height: 48%;
  }

  .lake-water {
    left: 42%;
    bottom: 14%;
    width: 54vw;
    height: 13vh;
  }

  .tree-trunk {
    left: 22%;
    bottom: 25%;
    width: 5.2vw;
    height: 13vh;
  }

  .tree-crown {
    left: 11%;
    bottom: 36%;
    width: 28vw;
    height: 17vh;
  }

  .shoreline-rock {
    left: 42%;
    bottom: 22%;
    width: 10vw;
  }

  .flower {
    width: clamp(0.7rem, 2.4vw, 1rem);
    height: clamp(1.7rem, 5vw, 2.25rem);
  }

  .flower--first {
    left: 20%;
  }

  .flower--second {
    left: 27%;
  }

  .flower--third {
    left: 34%;
  }

  .flower--discovery-one {
    left: 23%;
  }

  .flower--discovery-two {
    left: 30%;
  }

  .flower--discovery-three {
    left: 37%;
  }

  .flower--discovery-four {
    left: 40%;
  }

  .discovery-star {
    top: 30%;
    left: 68%;
  }

  .discovery-star--second {
    top: 18%;
    left: 40%;
  }

  .discovery-star--third {
    top: 37%;
    left: 20%;
  }

  .discovery-star--fourth {
    top: 16%;
    left: 72%;
  }

  .quiet-hotspot--lake {
    left: 42%;
    bottom: 11%;
    width: 54vw;
    height: 17vh;
    transform: none;
  }

  .quiet-hotspot--tree {
    left: 9%;
    bottom: 23%;
    width: 32vw;
    height: 34vh;
    transform: none;
  }

  .quiet-hotspot--rock {
    left: 39%;
    bottom: 19%;
    width: 14vw;
  }

  .quiet-hotspot--flowers {
    left: 17%;
    bottom: 13%;
    width: 29%;
    height: 9%;
  }

  .builder-note--distance {
    right: 2%;
    bottom: 32%;
    left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sky,
  .sky-phase-layer,
  .moon,
  .ambient-stars,
  .lake-water::after,
  .lake-ripples,
  .flower--discovery,
  .refuge::after {
    transition-duration: 0.01ms;
  }

  .ambient-star {
    animation: ambient-star-glimmer var(--star-duration) ease-in-out var(--star-delay) infinite;
  }

  .discovery-star__light {
    animation: discovery-star-glimmer 5.4s ease-in-out var(--star-delay) infinite;
  }

  .discovery-star__light::before,
  .discovery-star__light::after {
    animation: star-rays 5.4s ease-in-out var(--star-delay) infinite;
  }
}

@keyframes ambient-star-glimmer {
  0%,
  100% {
    opacity: 0.34;
    filter: brightness(0.78);
  }

  48% {
    opacity: 1;
    filter: brightness(1.38);
  }
}

@keyframes discovery-star-glimmer {
  0%,
  100% {
    opacity: 0.52;
    filter: brightness(0.86);
  }

  45% {
    opacity: 1;
    filter: brightness(1.34);
  }
}