/* Decorative layers move independently; photographed mountains and trees remain undistorted. */
.atmosphere {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  contain: layout style;
}
.ambient-motion {
  animation-play-state: paused;
}
.panorama[data-atmosphere-state="playing"] .ambient-motion {
  animation-play-state: running;
}
.atmosphere-sky {
  position: absolute;
  inset: 0 0 30%;
  mask-image: linear-gradient(transparent, #000 12%, #000 65%, transparent);
}
.ambient-cloud {
  position: absolute;
  width: 150%;
  height: 45%;
  max-width: none;
  object-fit: fill;
  opacity: 0.23;
  --cloud-opacity: 0.23;
  --ambient-duration: 88s;
  animation-name: drift-cloud;
  animation-duration: var(--ambient-duration);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: normal;
}
.ambient-cloud-far {
  left: -25%;
  top: 4%;
  animation-delay: -24s;
}
.ambient-cloud-near {
  left: -15%;
  top: 25%;
  height: 48%;
  opacity: 0.15;
  --cloud-opacity: 0.15;
  --ambient-duration: 65s;
  animation-direction: normal;
  animation-delay: -31s;
}
.ambient-mist {
  position: absolute;
  width: 140%;
  height: 23%;
  max-width: none;
  left: -20%;
  bottom: 22%;
  opacity: 0.16;
  --ambient-duration: 72s;
  animation-name: drift-mist;
  animation-duration: var(--ambient-duration);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: -18s;
}
.atmosphere-birds {
  position: absolute;
  inset: 0;
  opacity: 0.8;
}
.bird-route {
  position: absolute;
  left: 0;
  top: 22%;
  width: 100%;
  height: 1px;
  --ambient-duration: 55s;
  animation-name: passing-birds;
  animation-duration: var(--ambient-duration);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: -7s;
}
.ambient-bird {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 16px;
  overflow: visible;
  fill: #071b21;
}
.ambient-bird:nth-child(2) {
  left: 43px;
  top: -14px;
  width: 19px;
  opacity: 0.8;
}
.ambient-bird:nth-child(3) {
  left: 72px;
  top: 10px;
  width: 16px;
  opacity: 0.7;
}
.bird-wing {
  transform-box: view-box;
  transform-origin: 16px 11px;
  --ambient-duration: 1.15s;
  animation-name: bird-wingbeat;
  animation-duration: var(--ambient-duration);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.ambient-bird:nth-child(2) .bird-wing {
  --ambient-duration: 1.3s;
  animation-delay: -0.47s;
}
.ambient-bird:nth-child(3) .bird-wing {
  --ambient-duration: 1.05s;
  animation-delay: -0.76s;
}
.ambient-bough {
  position: absolute;
  right: -30px;
  bottom: 48%;
  width: clamp(200px, 22vw, 360px);
  height: auto;
  opacity: 0.65;
  filter: blur(0.4px);
  transform-origin: 100% 100%;
  --ambient-duration: 8s;
  animation-name: branch-sway;
  animation-duration: var(--ambient-duration);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: -2s;
}
.panorama[data-daylight-phase="夜色"] .atmosphere-birds {
  visibility: hidden;
}
.panorama[data-daylight-phase="夜色"] .bird-route,
.panorama[data-daylight-phase="夜色"] .bird-wing {
  animation-play-state: paused;
}
.panorama:has([data-scene="honghe-3"][aria-pressed="true"]) .atmosphere-sky,
.panorama:has([data-scene="honghe-3"][aria-pressed="true"]) .atmosphere-birds,
.panorama:has([data-scene="honghe-3"][aria-pressed="true"]) .ambient-bough {
  display: none;
}
.atmosphere-toggle {
  position: absolute;
  z-index: 4;
  bottom: 170px;
  right: calc(7vw + 190px);
  width: 44px;
  height: 44px;
  border: 1px solid #ffffff47;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fffdf6;
  background: #10221d38;
}
.atmosphere-toggle .icon {
  width: 16px;
  height: 16px;
}
.atmosphere-toggle .play-mark,
.atmosphere-toggle[aria-pressed="true"] .pause-mark {
  display: none;
}
.atmosphere-toggle[aria-pressed="true"] .play-mark {
  display: block;
}
@keyframes drift-cloud {
  0% {
    transform: translate3d(-18%, 0, 0);
    opacity: 0;
  }
  15%,
  85% {
    opacity: var(--cloud-opacity);
  }
  100% {
    transform: translate3d(18%, -5%, 0);
    opacity: 0;
  }
}
@keyframes drift-mist {
  from {
    transform: translate3d(-5%, 8%, 0);
  }
  to {
    transform: translate3d(5%, -3%, 0);
  }
}
@keyframes passing-birds {
  0% {
    transform: translate3d(-16%, 20px, 0);
    opacity: 0;
  }
  3% {
    opacity: 0.8;
  }
  25% {
    opacity: 0.8;
  }
  30%,
  100% {
    transform: translate3d(112%, -70px, 0);
    opacity: 0;
  }
}
@keyframes bird-wingbeat {
  0%,
  55%,
  100% {
    transform: scaleY(1);
  }
  27% {
    transform: scaleY(0.32);
  }
}
@keyframes branch-sway {
  from {
    transform: rotate(-1.2deg) translate3d(0, 0, 0);
  }
  to {
    transform: rotate(1.2deg) translate3d(-3px, 1px, 0);
  }
}
/* Ambient playback is independent of keyboard-triggered interface transitions. */
html[data-input="keyboard"] .panorama .ambient-motion {
  animation-duration: var(--ambient-duration) !important;
}
@media (max-width: 760px) {
  .atmosphere-toggle {
    right: 210px;
    bottom: 210px;
  }
  .ambient-cloud {
    width: 220%;
    left: -60%;
    opacity: 0.18;
    --cloud-opacity: 0.18;
  }
  .ambient-cloud-near {
    opacity: 0.12;
    --cloud-opacity: 0.12;
  }
  .bird-route {
    top: 16%;
  }
  .ambient-bird {
    width: 17px;
    height: 12px;
  }
  .ambient-bird:nth-child(2) {
    width: 14px;
    left: 26px;
    top: -9px;
  }
  .ambient-bird:nth-child(3) {
    width: 11px;
    left: 47px;
    top: 6px;
  }
  .ambient-bough {
    width: 190px;
    right: -42px;
    bottom: 42%;
    opacity: 0.55;
  }
}
@media (prefers-reduced-motion: reduce) {
  .panorama .ambient-motion {
    animation: none !important;
  }
  .atmosphere-birds {
    visibility: hidden;
  }
}