.campsite {
  --ground-depth: clamp(92px, 12svh, 132px);
  --grass-offset: clamp(20px, 2.4svh, 28px);
  --ground-lift: 20px;
  --object-baseline: calc(var(--ground-depth) - var(--grass-offset) + 6px);
  position: relative;
  width: 100%;
  height: clamp(400px, 55svh, 620px);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(
    to bottom,
    var(--paper) 0%,
    #f1eee6 12%,
    #ddd0c3 35%,
    #c3aa94 58%,
    #8f9186 83%,
    #676c62 100%
  );
}

.camp-layer,
.camp-object,
.camp-sign,
.camp-crate-button,
.camp-vehicle-wrap,
.camp-fire-wrap,
.camp-fire-glow {
  position: absolute;
  display: block;
}

.camp-layer,
.camp-object,
.camp-sign > img,
.camp-fire {
  user-select: none;
  -webkit-user-drag: none;
}

.camp-layer,
.camp-object,
.camp-fire,
.camp-sign > img { pointer-events: none; }

.camp-clouds {
  z-index: 1;
  top: 2%;
  left: 0;
  width: 100%;
  height: 58%;
  overflow: hidden;
  opacity: .72;
}

.camp-cloud-track {
  display: flex;
  width: max-content;
  height: 100%;
  will-change: transform;
  animation: camp-cloud-loop 72s linear infinite;
}

.camp-cloud-track img {
  display: block;
  width: auto;
  height: 100%;
  flex: none;
  image-rendering: pixelated;
  pointer-events: none;
}

.camp-mountains-far {
  z-index: 2;
  inset: auto 0 calc(var(--ground-depth) + 14%);
  width: 100%;
  height: 34%;
  image-rendering: pixelated;
}
.campsite.assets-ready .camp-mountains-far { background: url('../media/camp/mountains-far.png') center bottom / auto 100% repeat-x; }

.camp-mountains-near {
  z-index: 3;
  inset: auto 0 calc(var(--ground-depth) - var(--ground-lift) - 3px);
  width: 100%;
  height: 50%;
  image-rendering: pixelated;
}
.campsite.assets-ready .camp-mountains-near { background: url('../media/camp/mountains-near.png') center bottom / auto 100% repeat-x; }

.camp-ground {
  z-index: 5;
  inset: auto 0 0;
  width: 100%;
  height: calc(var(--ground-depth) + var(--ground-lift));
}

.camp-tent {
  z-index: 6;
  left: 3.5%;
  bottom: var(--object-baseline);
  width: clamp(280px, 29vw, 450px);
}

.camp-crate-button {
  z-index: 6;
  left: 34%;
  bottom: var(--object-baseline);
  width: clamp(78px, 7.5vw, 116px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.camp-crate-button img {
  display: block;
  width: 100%;
  height: auto;
  transition: filter 160ms ease;
  user-select: none;
  -webkit-user-drag: none;
}

.camp-crate-button:hover img,
.camp-crate-button:focus-visible img {
  filter: brightness(1.24) saturate(1.08);
}

.camp-crate-button:focus-visible { outline: none; }

.camp-fire-wrap {
  z-index: 6;
  left: 47%;
  bottom: var(--object-baseline);
  width: clamp(96px, 8.5vw, 132px);
}

.camp-fire-wrap .camp-fire {
  position: relative;
  width: 100%;
  height: auto;
}

.camp-fire-glow {
  z-index: 4;
  left: 49.5%;
  bottom: calc(var(--object-baseline) - 8px);
  width: clamp(210px, 22vw, 360px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, #ffbb5a40 0%, #ef9b3d18 36%, transparent 70%);
  mix-blend-mode: screen;
  animation: camp-glow 2.4s ease-in-out infinite;
}

.camp-fire-wrap i {
  position: absolute;
  z-index: -1;
  width: 3px;
  height: 3px;
  bottom: 52%;
  left: 50%;
  background: #ffd279;
  box-shadow: 0 0 5px #ff9d35;
  opacity: 0;
  animation: camp-spark 2.7s steps(5, end) infinite;
}

.camp-fire-wrap i:nth-of-type(2) { left: 38%; animation-delay: .9s; }
.camp-fire-wrap i:nth-of-type(3) { left: 66%; animation-delay: 1.7s; }

.camp-vehicle-wrap {
  z-index: 6;
  right: 14%;
  bottom: var(--object-baseline);
  width: clamp(225px, 23vw, 360px);
}

.camp-vehicle {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.camp-sign {
  z-index: 6;
  right: 2.5%;
  bottom: calc(var(--object-baseline) - 4px);
  width: clamp(118px, 9.5vw, 150px);
}

.camp-sign > img {
  display: block;
  width: 100%;
  height: auto;
}

.camp-links { position: absolute; inset: 0; }
.camp-link,
.camp-link-row {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #302a22;
  font: 700 clamp(6px, .55vw, 9px)/1 var(--meta-font);
  letter-spacing: .04em;
  text-shadow: 0 1px #e3bf8e66;
}

.camp-link {
  width: 78%;
  height: 16%;
}

.camp-link-one { top: 11.5%; left: 11%; }
.camp-link-two { top: 35.5%; left: 11%; }
.camp-link-three { top: 59%; left: 11%; }
.camp-link-row {
  top: 59%;
  left: 10%;
  width: 80%;
  height: 16%;
  gap: 7%;
}

.camp-link-row a {
  display: grid;
  place-items: center;
  width: 46%;
  height: 100%;
}

.camp-link:hover,
.camp-link-row a:hover,
.camp-link:focus-visible,
.camp-link-row a:focus-visible {
  color: #fff7df;
  text-shadow: 0 1px 5px #382817;
}

@keyframes camp-cloud-loop {
  to { transform: translateX(-25%); }
}

@keyframes camp-glow {
  50% { opacity: .68; transform: translateX(-50%) scale(.94); }
}

@keyframes camp-spark {
  18% { opacity: .9; }
  70% { opacity: .35; transform: translate(7px, -34px); }
  100% { opacity: 0; transform: translate(10px, -46px); }
}

@media (max-width: 650px) {
  .campsite {
    --ground-depth: clamp(88px, 12svh, 108px);
    --grass-offset: clamp(18px, 2.4svh, 22px);
    --ground-lift: 16px;
    height: clamp(410px, 56svh, 500px);
  }
  .camp-clouds {
    top: 2%;
    left: 0;
    width: 100%;
    height: 45%;
  }
  .camp-mountains-far {
    bottom: calc(var(--ground-depth) + 13%);
    height: 31%;
  }
  .camp-mountains-near {
    height: 45%;
  }
  .camp-tent {
    left: -2%;
    width: clamp(166px, 48vw, 196px);
  }
  .camp-crate-button {
    left: 34%;
    width: clamp(48px, 13.5vw, 60px);
  }
  .camp-fire-wrap {
    left: 46%;
    width: clamp(56px, 16vw, 68px);
  }
  .camp-fire-glow {
    left: 50%;
    width: 150px;
  }
  .camp-vehicle-wrap {
    right: 20%;
    left: auto;
    width: clamp(108px, 29vw, 120px);
  }
  .camp-sign {
    right: 0;
    width: 92px;
  }
  .camp-link,
  .camp-link-row { font-size: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .camp-clouds,
  .camp-cloud-track,
  .camp-fire-glow,
  .camp-fire-wrap i { animation: none; }

  .camp-crate-button img { transition: none; }
}