/* ============================================================
   RX Game Hero 波浪 (gr-wave)
   三层 SVG 波浪: back(bg::after, 140px,10s) / mid(bg::before, 110px,7s反向) / front(wrapper::after, 80px,5s)
   background-position 横移无缝循环; 移动端(<768px) 不启用; dark 深色系
   注意: mid 挂 .hero-banner-bg::before (z-index:1) 避免被 .hero-banner-bg 实色背景遮挡
   ============================================================ */
.hero-banner-bg::after,
.hero-banner-bg::before,
.hero-banner-wrapper.has-bg::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  pointer-events: none;
  background-repeat: repeat-x;
  background-position: 0 bottom;
  background-size: 1440px auto;
  transform: translateZ(0);
  will-change: background-position;
  z-index: 0;
}

/* back 层 (140px, 10s) */
.hero-banner-bg::after {
  height: 140px;
  opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,80 C180,140 360,40 540,80 C720,120 900,40 1080,80 C1260,120 1350,60 1440,80 L1440,140 L0,140 Z'/%3E%3C/svg%3E");
  animation: gr-wave-move 10s linear infinite;
}

/* mid 层 (110px, 7s 反向; z-index 高于 back) */
.hero-banner-bg::before {
  z-index: 1;
  height: 110px;
  opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath fill='%23f8f9fa' d='M0,60 C240,110 480,10 720,60 C960,110 1200,10 1440,60 L1440,110 L0,110 Z'/%3E%3C/svg%3E");
  animation: gr-wave-move 7s linear infinite reverse;
}

/* front 层 (80px, 5s) */
.hero-banner-wrapper.has-bg::after {
  height: 80px;
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%23f5f6f8' d='M0,30 C240,80 480,0 720,30 C960,80 1200,0 1440,30 L1440,80 L0,80 Z'/%3E%3C/svg%3E");
  animation: gr-wave-move 5s linear infinite;
}

@keyframes gr-wave-move {
  from { background-position: 0 bottom; }
  to   { background-position: -1440px bottom; }
}

/* Dark 模式: 波浪向 dark 内容区背景过渡 */
[data-theme="dark"] .hero-banner-bg::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath fill='%231e293b' d='M0,80 C180,140 360,40 540,80 C720,120 900,40 1080,80 C1260,120 1350,60 1440,80 L1440,140 L0,140 Z'/%3E%3C/svg%3E");
}
[data-theme="dark"] .hero-banner-bg::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath fill='%23111827' d='M0,60 C240,110 480,10 720,60 C960,110 1200,10 1440,60 L1440,110 L0,110 Z'/%3E%3C/svg%3E");
}
[data-theme="dark"] .hero-banner-wrapper.has-bg::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%230f172a' d='M0,30 C240,80 480,0 720,30 C960,80 1200,0 1440,30 L1440,80 L0,80 Z'/%3E%3C/svg%3E");
}

/* 移动端不启用波浪效果 */
@media (max-width: 768px) {
  .hero-banner-bg::after,
  .hero-banner-bg::before,
  .hero-banner-wrapper.has-bg::after { display: none; }
}