/* 禅模式隧道穿梭背景 — 提取自 src/styles/zen-animation.css，适配官网全屏 */

.site-shuttle-field {
  --shuttle-origin-y: 42%;
  --shuttle-radius: max(75vmax, 85vw, 85vh);
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.72;
}

/* 中心汇聚光晕 */
.site-shuttle-field::after {
  content: '';
  position: absolute;
  left: 50%;
  top: var(--shuttle-origin-y);
  width: 320px;
  height: 320px;
  margin: -160px 0 0 -160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.12) 0%, rgba(16, 185, 129, 0.04) 45%, transparent 70%);
  animation: site-center-pulse 4s ease-in-out infinite;
}

@keyframes site-center-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

.site-shuttle-particle {
  position: absolute;
  left: 50%;
  top: var(--shuttle-origin-y);
  width: 2.5px;
  height: 48px;
  margin-left: -1.25px;
  margin-top: -24px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(52, 211, 153, 0.18) 15%,
    rgba(110, 231, 183, 0.95) 50%,
    rgba(16, 185, 129, 0.6) 78%,
    transparent 100%
  );
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.45);
  opacity: 0;
  animation-name: site-particle-shuttle;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes site-particle-shuttle {
  0% {
    transform: rotate(var(--rot)) translateY(calc(var(--shuttle-radius) * var(--dist, 1) * -1)) scaleY(1.2);
    opacity: 0;
  }
  5% { opacity: 0.7; }
  40% { opacity: 0.85; }
  72% { opacity: 0.35; }
  100% {
    transform: rotate(var(--rot)) translateY(-80px) scaleY(0.3);
    opacity: 0;
  }
}

.site-shuttle-lane {
  position: absolute;
  top: var(--lane-top);
  width: 96px;
  height: 2.5px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(110, 231, 183, 0.25) 20%,
    rgba(110, 231, 183, 0.95) 52%,
    rgba(16, 185, 129, 0.5) 80%,
    transparent 100%
  );
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.45);
  opacity: 0;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.site-shuttle-lane--left {
  left: 0;
  animation-name: site-lane-from-left;
}

.site-shuttle-lane--right {
  right: 0;
  background: linear-gradient(
    270deg,
    transparent 0%,
    rgba(110, 231, 183, 0.25) 20%,
    rgba(110, 231, 183, 0.95) 52%,
    rgba(16, 185, 129, 0.5) 80%,
    transparent 100%
  );
  animation-name: site-lane-from-right;
}

@keyframes site-lane-from-left {
  0% { left: -6%; opacity: 0; width: 52px; }
  10% { opacity: 0.75; }
  100% { left: calc(50% - 48px); opacity: 0; width: 100px; }
}

@keyframes site-lane-from-right {
  0% { right: -6%; opacity: 0; width: 52px; }
  10% { opacity: 0.75; }
  100% { right: calc(50% - 48px); opacity: 0; width: 100px; }
}

.page-bg-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 95% 70% at 50% 42%, transparent 20%, rgba(11, 15, 23, 0.55) 55%, var(--bg) 100%),
    linear-gradient(180deg, rgba(11, 15, 23, 0.7) 0%, transparent 10%, transparent 90%, rgba(11, 15, 23, 0.85) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .site-shuttle-field {
    opacity: 0.25;
  }

  .site-shuttle-field::after {
    animation: none;
  }

  .site-shuttle-particle,
  .site-shuttle-lane {
    animation: none !important;
    opacity: 0.1;
  }
}