/* ==========================================================================
   背景舞台 · 完全照 CHUNITHM VERSE 官网首页的背景组件（.main-bg）复刻
   来源：chunithm.sega.jp 首页 main-bg（bg.jpg.webp + 四角装饰 + 星球 + 光带）
   - 底色 #adf4f8，主图 cover / center
   - 图层结构、尺寸、动画时长全部沿用官网原值
   - 最上面压一层白色蒙版（.stage-veil），保证前景文字可读
   站点里只需要：<div class="stage">…</div>（内含 .stage-inner 与 .stage-veil）
   ========================================================================== */

.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  background: #adf4f8;
}

.stage-inner {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("/bg-verse.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 左上 / 右下 的斜向光带（官网 .main-bg-inner::before / ::after） */
.stage-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 565px;
  height: 383px;
  background-image: url("/verse-top-left.webp");
  background-repeat: no-repeat;
  background-size: contain;
  transform-origin: 0;
  animation: verseTopLeft 6s linear infinite;
}
.stage-inner::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -14%;
  width: 565px;
  height: 383px;
  background-image: url("/verse-bottom-right.webp");
  background-repeat: no-repeat;
  background-size: contain;
  transform-origin: 0;
  transform: translate(0, 20%) rotate(-30deg);
  animation: verseBottomRight 6s linear infinite;
}

/* 右上 / 左下 角框 */
.stage .frame {
  position: absolute;
  z-index: -2;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.stage .frame.top-right {
  top: 0;
  right: 0;
  width: 845px;
  height: 182px;
  background-image: url("/verse-top-right.webp");
  background-position: right top;
}
.stage .frame.bottom-left {
  bottom: 0;
  left: 0;
  width: 923px;
  height: 188px;
  background-image: url("/verse-bottom-left.webp");
  background-position: left bottom;
}

.stage .frame-particle { width: 100%; }
.stage .frame-particle.top-right {
  height: 130px;
  animation: verseParticle 6s ease infinite reverse;
}
.stage .frame-particle.bottom-left {
  height: 140px;
  animation: verseParticle 6s ease 1s infinite alternate;
}
.stage .frame-particle::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: #fff;
  transform: rotate(45deg);
}
.stage .frame-particle.top-right::after { top: -4px; left: 130px; }
.stage .frame-particle.bottom-left::after { top: 72px; left: 0; }

.stage .frame-arrow {
  position: absolute;
  display: block;
  overflow: hidden;
  width: 200px;
  height: 124px;
}
.stage .frame-arrow.top-right {
  top: 0;
  right: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 74%);
}
.stage .frame-arrow.top-right::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 90px;
  height: 100px;
  background-image: url("/verse-arrow-down.webp");
  background-repeat: no-repeat;
  background-size: contain;
  animation: verseArrow 6s ease-in-out infinite;
}
.stage .frame-arrow.bottom-left {
  bottom: 0;
  left: 0;
  clip-path: polygon(0 0, 100% 24%, 100% 100%, 0 100%);
}
.stage .frame-arrow.bottom-left::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 90px;
  height: 100px;
  background-image: url("/verse-arrow-up.webp");
  background-repeat: no-repeat;
  background-size: contain;
  animation: verseArrow 6s ease-in-out infinite reverse;
}

/* 斜着流动的一行小字 */
.stage .corner-text {
  position: absolute;
  z-index: -1;
  width: calc(712px * 3);
  height: 48px;
  background-image: url("/verse-text.webp");
  background-size: contain;
  background-repeat: repeat;
  background-position: left bottom;
  opacity: 0;
}
.stage .corner-text.top-right {
  top: -108px;
  right: 0;
  transform: rotate(8.4deg);
  animation: verseCornerText 60s linear infinite reverse;
}
.stage .corner-text.bottom-left {
  bottom: -132px;
  left: 0;
  height: 64px;
  transform: rotate(8.4deg);
  animation: verseCornerText 60s linear infinite;
}

/* 星球：光环 / 光点 / 内芯 三层 */
.stage .globe {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 592px;
  height: 592px;
  transform: translate(-50%, -50%);
  background-image: url("/verse-globe-cross.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.stage .globe::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -2;
  width: 492px;
  height: 492px;
  opacity: 0.9;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: center;
  background-image: url("/verse-globe.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  animation: verseGlobe 240s linear infinite;
}
.stage .globe::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 492px;
  height: 492px;
  transform: translate(-50%, -50%);
  background-image: url("/verse-globe-center.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  animation: verseGlobeCenter 60s ease infinite reverse;
}
.stage .globe-cross {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -2;
  width: 592px;
  height: 592px;
  transform: translate(-50%, -50%);
  background-image: url("/verse-globe-cross.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* 竖向光带 */
.stage .verse-belt {
  position: absolute;
  z-index: -3;
  height: 200%;
  background-image: url("/verse-belt.webp");
  background-size: contain;
  background-position: top center;
  background-repeat: repeat-y;
}
.stage .verse-belt.left { top: 0; left: 80px; width: 56px; animation: verseBelt 20s linear infinite reverse; }
.stage .verse-belt.center-left { top: 0; left: 460px; width: 66px; animation: verseBelt 30s linear infinite reverse; }
.stage .verse-belt.center-right { top: 0; right: 402px; width: 64px; animation: verseBelt 30s linear infinite; }
.stage .verse-belt.right { top: 0; right: 102px; width: 52px; animation: verseBelt 20s linear infinite; }

/* 白色蒙版：压一层白纱，保证卡片外的前景文字可读 */
.stage .stage-veil {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(1000px 640px at 10% -12%, rgba(255, 255, 255, 0.52), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.18) 46%, rgba(255, 255, 255, 0.34));
}

@keyframes verseTopLeft {
  0% { opacity: 0; transform: translate(-20%, 16%) rotate(-10deg); }
  14%, 86% { opacity: 1; }
  100% { opacity: 0; transform: translate(20%, -16%) rotate(0deg); }
}
@keyframes verseBottomRight {
  0% { opacity: 0; transform: translate(0, 20%) rotate(-30deg); }
  14%, 90% { opacity: 1; }
  100% { opacity: 0; transform: translate(-30%, 26%) rotate(1deg); }
}
@keyframes verseArrow {
  0% { opacity: 0; transform: translateY(-100%); }
  10% { opacity: 1; }
  30% { transform: translateY(0); }
  50% { transform: translateY(-20%); }
  60% { transform: translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(100%); }
}
@keyframes verseCornerText {
  0% { opacity: 0; transform: rotate(8.4deg) translate(-50%); }
  4%, 96% { opacity: 0.6; }
  100% { opacity: 0; transform: rotate(8.4deg) translate(50%); }
}
@keyframes verseGlobe {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes verseGlobeCenter {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(0.6); }
  50% { transform: translate(-50%, -50%) rotate(180deg) scale(1); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(0.6); }
}
@keyframes verseBelt {
  0% { opacity: 0; transform: translateY(-40%); }
  4%, 96% { opacity: 1; }
  100% { opacity: 0; transform: translateY(40%); }
}
@keyframes verseParticle {
  0% { opacity: 0; transform: translate(0, 0); }
  4%, 96% { opacity: 1; }
  100% { opacity: 0; transform: translate(100%, 100%); }
}

@media (max-width: 601px) {
  .stage-inner::before { width: 200px; height: 154px; }
  .stage-inner::after { bottom: 4%; right: -26%; width: 200px; height: 154px; }
  .stage .frame.top-right { width: 400px; height: 96px; }
  .stage .frame.bottom-left { width: 400px; height: 96px; }
  .stage .frame-particle.top-right { height: 60px; }
  .stage .frame-particle.bottom-left { height: 60px; }
  .stage .frame-particle.top-right::after { top: -6px; left: 40px; }
  .stage .frame-particle.bottom-left::after { top: 40px; left: -8px; }
  .stage .frame-arrow { width: 58px; height: 58px; }
  .stage .frame-arrow.top-right { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 82%); }
  .stage .frame-arrow.bottom-left { clip-path: polygon(0 0, 100% 16%, 100% 100%, 0 100%); }
  .stage .frame-arrow.top-right::after,
  .stage .frame-arrow.bottom-left::after { width: 40px; height: 48px; }
  .stage .corner-text.top-right { top: -148px; right: 21px; height: 28px; }
  .stage .corner-text.bottom-left { bottom: -146px; height: 28px; }
  .stage .globe { width: 390px; height: 390px; }
  .stage .globe::before { width: 312px; height: 312px; }
  .stage .globe::after { width: 390px; height: 390px; }
  .stage .globe-cross { width: 390px; height: 390px; }
  .stage .verse-belt.left { left: 8px; width: 56px; }
  .stage .verse-belt.center-left { left: 80px; width: 42px; }
  .stage .verse-belt.center-right { right: 80px; width: 42px; }
  .stage .verse-belt.right { right: 10px; width: 48px; }
}