:root {
  color-scheme: dark;
  --bg-1: #06130c;
  --bg-2: #0b2a18;
  --green: #45e780;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
html { background: var(--bg-1); }
body {
  min-height: 100svh;
  overflow: hidden;
  font-family: "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 50% 68%, rgba(42, 235, 112, .20), transparent 32%),
    linear-gradient(180deg, var(--bg-2), var(--bg-1));
}
img { display: block; max-width: 100%; }

.page {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
}

.page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 100%);
}

.glow {
  position: absolute;
  z-index: -2;
  border-radius: 50%;
  filter: blur(35px);
  opacity: .45;
  pointer-events: none;
}
.glow--one { width: 36vw; height: 36vw; left: -10vw; top: 18%; background: #0d7d3b; }
.glow--two { width: 42vw; height: 42vw; right: -14vw; bottom: -16vw; background: #25c968; }

.brand {
  position: absolute;
  z-index: 10;
  top: max(28px, env(safe-area-inset-top));
  left: 50%;
  width: min(53vw, 385px);
  transform: translateX(-50%);
  animation: brand-in .75s ease-out both;
}
.brand img { width: 100%; height: auto; filter: drop-shadow(0 8px 24px rgba(0,0,0,.32)); }

.scene {
  position: absolute;
  left: 50%;
  bottom: max(-7vh, -70px);
  width: min(100vw, 760px);
  aspect-ratio: 720 / 727;
  transform: translateX(-50%);
  animation: scene-in .9s .08s cubic-bezier(.2,.75,.25,1) both;
}
.platform { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

.orbit, .shield, .circle, .speed { position: absolute; }
.orbit img, .shield, .circle, .speed img { width: 100%; height: auto; }

.orbit--left {
  width: 11.4%;
  left: 28%;
  top: 26%;
  animation: float-left 4.8s ease-in-out infinite;
}
.orbit--right {
  width: 9.2%;
  right: 27%;
  top: 29%;
  animation: float-right 4.2s ease-in-out infinite;
}
.shield {
  width: 31.5%;
  left: 34.25%;
  top: 23%;
  transform-origin: 50% 72%;
  animation: shield-pulse 3.2s ease-in-out infinite;
}
.circle {
  width: 17.1%;
  left: 41.45%;
  top: 56%;
  animation: circle-glow 2.4s ease-in-out infinite;
}
.speed {
  width: .7%;
  top: 35%;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(99,255,151,.85));
  animation: speed-fall 1.8s linear infinite;
}
.speed--one { left: 42%; animation-delay: 0s; }
.speed--two { left: 50%; animation-delay: .55s; }
.speed--three { left: 58%; animation-delay: 1.1s; }

noscript {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 20;
  transform: translateX(-50%);
  padding: 8px 12px;
  border-radius: 8px;
  color: #fff;
  background: rgba(0,0,0,.72);
  font-size: 13px;
}

@keyframes brand-in {
  from { opacity: 0; transform: translate(-50%, -18px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes scene-in {
  from { opacity: 0; transform: translate(-50%, 6%); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes float-left {
  0%,100% { transform: translate3d(0,0,0) rotate(-4deg); }
  50% { transform: translate3d(-10px,-16px,0) rotate(5deg); }
}
@keyframes float-right {
  0%,100% { transform: translate3d(0,0,0) rotate(5deg); }
  50% { transform: translate3d(12px,-13px,0) rotate(-5deg); }
}
@keyframes shield-pulse {
  0%,100% { transform: scale(1); filter: drop-shadow(0 0 12px rgba(68,255,132,.18)); }
  50% { transform: scale(1.025); filter: drop-shadow(0 0 24px rgba(68,255,132,.42)); }
}
@keyframes circle-glow {
  0%,100% { opacity: .72; transform: scaleX(.92); }
  50% { opacity: 1; transform: scaleX(1.08); }
}
@keyframes speed-fall {
  0% { opacity: 0; transform: translateY(-38px) scaleY(.55); }
  20% { opacity: .9; }
  80% { opacity: .55; }
  100% { opacity: 0; transform: translateY(125px) scaleY(1.1); }
}

@media (max-width: 520px) {
  .brand { top: max(22px, env(safe-area-inset-top)); width: min(64vw, 330px); }
  .scene { width: 112vw; bottom: -5vh; }
}

@media (max-height: 620px) {
  .brand { width: min(43vw, 300px); top: max(12px, env(safe-area-inset-top)); }
  .scene { width: min(78vh, 690px); bottom: -16vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}
.is-paused *, .is-paused *::before, .is-paused *::after { animation-play-state: paused !important; }