/* Enlarged lower-world composition. The village, trees and walkers are 1.5x
   their previous rendered size. A moving grass edge sits above the same dark
   curtain used around the legal footer. */

.hero-download {
  top: 36% !important;
  bottom: auto !important;
}

/*
   The heroes run forward while the terrain moves backward as one world.
   Every repeating terrain strip below travels at the same visible speed:
   1024px / 12s = 1280px / 15s = 1536px / 18s.
   Durations differ only to match each source strip's exact repeat width.
*/
.scene-sky,
.scene-mountains,
.scene-near-mountains,
.scene-back-buildings {
  animation-duration: 12s;
}

.scene-grass-fill {
  animation-duration: 12.234375s;
}

.scene-grass-details {
  animation-duration: 12s;
}

/* Lift both mountain planes together so the skyline remains visible behind
   the enlarged village while preserving their original depth separation. */
.scene-mountains {
  background-image: url("../assets/img/hero-scene/mountains.png");
  bottom: 290px;
}

.scene-near-mountains {
  bottom: 278px;
}

.hero-parallax .scene-ground {
  bottom: 0;
  height: 300px;
  background-color: #121918;
  background-image:
    url("../assets/img/hero-scene/ground.png"),
    linear-gradient(180deg, rgba(39, 35, 27, .96), rgba(14, 19, 17, .98));
  background-size: auto 38px, 100% 100%;
  background-position: 0 0, 0 0;
  background-repeat: repeat-x, no-repeat;
  box-shadow: none;
  animation: scene-scroll-ground-stacked 12s linear infinite;
}

.hero-parallax .scene-ground::after {
  position: absolute;
  inset: 38px 0 0;
  background: url("../assets/img/hero-scene/ground-dirt-tile.png") 0 0 / auto 14px repeat;
  content: "";
  opacity: .055;
  pointer-events: none;
}

.scene-grass-details {
  /* Remove only the distant repeating tree line. */
  display: none;
}

.scene-village {
  /* Align the actual building foundations, not the lower fence pixels. */
  background-image: url("../assets/img/hero-scene/village.png");
  bottom: 252px;
  height: 411px;
  background-size: auto 411px;
  animation-name: scene-scroll-village-large;
  animation-duration: 18s;
  transform: translate3d(var(--pointer-x-front, 0px), 0, 0);
}

/* Keep pointer movement coherent too; the parent scene supplies one shared
   subtle offset instead of giving every terrain plane a different depth. */
.scene-mountains,
.scene-near-mountains,
.scene-village,
.hero-parallax .scene-ground {
  transform: none;
}

.walker {
  /* Sink the strip's transparent lower padding into the grass edge. */
  bottom: 286px;
  transform: translateX(-50%) scale(2.175);
}

.walker-liubei {
  left: calc(50% + 132px);
}

.walker-guanyu {
  left: calc(50% + 12px);
}

.walker-zhangfei {
  left: calc(50% - 117px);
}

@keyframes scene-scroll-ground-stacked {
  from { background-position: 0 0, 0 0; }
  to { background-position: -1024px 0, 0 0; }
}

@keyframes scene-scroll-village-large {
  from { background-position-x: 0; }
  to { background-position-x: -1536px; }
}

@keyframes scene-scroll-grass-details-large {
  from { background-position-x: 0; }
  to { background-position-x: -1536px; }
}

@media (max-width: 900px) {
  .hero-download {
    top: 34% !important;
    bottom: auto !important;
  }

  .scene-mountains {
    bottom: 248px;
  }

  .scene-near-mountains {
    bottom: 238px;
  }

  .hero-parallax .scene-ground {
    height: 240px;
    background-size: auto 32px, 100% 100%;
    background-position: 0 0, 0 0;
    animation-name: scene-scroll-ground-stacked-compact;
  }

  .hero-parallax .scene-ground::after {
    inset-block-start: 32px;
  }

  .scene-grass-details {
    bottom: 229px;
    height: 230px;
    background-size: 1280px 230px;
    animation-name: scene-scroll-grass-details-compact;
    animation-duration: 15s;
  }

  .scene-village {
    bottom: 200px;
    height: 343px;
    background-size: auto 343px;
    animation-name: scene-scroll-village-compact;
    animation-duration: 15s;
  }

  .walker {
    bottom: 226px;
    transform: translateX(-50%) scale(1.8125);
  }

  .walker-liubei {
    left: calc(50% + 110px);
  }

  .walker-guanyu {
    left: calc(50% + 10px);
  }

  .walker-zhangfei {
    left: calc(50% - 98px);
  }
}

@keyframes scene-scroll-ground-stacked-compact {
  from { background-position: 0 0, 0 0; }
  to { background-position: -1024px 0, 0 0; }
}

@keyframes scene-scroll-village-compact {
  from { background-position-x: 0; }
  to { background-position-x: -1280px; }
}

@keyframes scene-scroll-grass-details-compact {
  from { background-position-x: 0; }
  to { background-position-x: -1280px; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-ground,
  .scene-grass-details,
  .scene-village,
  .walker {
    animation: none !important;
  }
}

/* Community entrances sit as one horizontal group in the lower-right corner. */
.social-rail {
  position: absolute;
  top: auto !important;
  right: clamp(14px, 2vw, 34px);
  bottom: 80px;
  left: auto;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 6px;
  transform: none !important;
  transform-origin: right bottom;
}

.social-rail::after {
  display: none;
}

.social-wechat-entry {
  flex: 0 0 auto;
}

.age-rating-badge {
  top: auto !important;
  bottom: 82px !important;
  left: clamp(18px, 2.6vw, 46px);
}

.legal-footer {
  bottom: 84px;
}

.social-rail .wechat-qr-panel {
  top: auto;
  right: 0;
  bottom: calc(100% - 8px);
  transform: translateY(18px) scale(.94);
  transform-origin: right bottom;
}

.social-rail .wechat-qr-panel::after {
  display: none;
}

.social-rail .social-wechat-entry.is-open .wechat-qr-panel,
.social-rail .social-wechat-entry:hover .wechat-qr-panel,
.social-rail .social-wechat-entry:focus-within .wechat-qr-panel {
  transform: translateY(0) scale(1);
}

@media (max-width: 900px) {
  .social-rail {
    right: 8px;
    bottom: 151px;
    gap: 3px;
  }

  .age-rating-badge {
    top: auto !important;
    bottom: 158px !important;
    left: 10px;
  }

  .legal-footer {
    bottom: 10px;
  }
}

@media (max-width: 560px) {
  .social-rail {
    right: 5px;
    bottom: 155px;
    gap: 2px;
  }


  .age-rating-badge {
    top: auto !important;
    bottom: 161px !important;
    left: 8px;
  }

  .legal-footer {
    bottom: 4px;
  }
}