/* ===== Life Sandbox background ===== */

.scene-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--theme-root-bg, #ffffff);
}

/* 一层很轻的浅蓝灰气氛，只留在地平线以下，更容易看见白光 */
.scene-fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgba(238, 242, 247, 0.9) 0%,
      rgba(243, 246, 250, 0.62) 18%,
      rgba(248, 250, 252, 0.22) 34%,
      rgba(255, 255, 255, 0) 48%
    );
  opacity: 0.78;
  transition: opacity 1s ease, background 1s ease;
}

/* ===== Map world ===== */

.map-layer {
  position: absolute;
  inset: 0;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    transform 2s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 2s ease,
    filter 2s ease;
  will-change: transform, opacity;
}

.map-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 只让世界活在下 1/3 左右 */
.roads-group {
  mask-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.98) 18%,
    rgba(0, 0, 0, 0.72) 30%,
    rgba(0, 0, 0, 0.18) 40%,
    rgba(0, 0, 0, 0) 47%
  );
  -webkit-mask-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.98) 18%,
    rgba(0, 0, 0, 0.72) 30%,
    rgba(0, 0, 0, 0.18) 40%,
    rgba(0, 0, 0, 0) 47%
  );
}

.road {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition:
    stroke 1.5s ease,
    stroke-width 1.5s ease,
    opacity 1.5s ease,
    filter 1.5s ease;
}

.road--far {
  stroke: rgba(40, 48, 58, 0.14);
  stroke-width: 1.2;
  opacity: 0.34;
}

.road--mid {
  stroke: rgba(40, 48, 58, 0.16);
  stroke-width: 1.45;
  opacity: 0.42;
}

.road--near {
  stroke: rgba(40, 48, 58, 0.18);
  stroke-width: 1.7;
  opacity: 0.5;
}

/* ===== 路径发光：偏白，不偏黄 ===== */

.road-active {
  stroke: rgba(255, 255, 255, 0.99) !important;
  stroke-width: 2.7 !important;
  opacity: 1 !important;
  filter:
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.92))
    drop-shadow(0 0 18px rgba(248, 248, 255, 0.38))
    drop-shadow(0 0 26px rgba(255, 246, 220, 0.16));
}

/* ===== 阶段1：地图加速平移 ===== */

.bg-pan .map-layer {
  transform: translate3d(-68px, -6px, 0) scale(1.018);
}

/* 定住 */
.bg-pause .map-layer {
  transform: translate3d(-68px, -6px, 0) scale(1.018);
}

/* ===== 阶段2：飞出屏幕 ===== */

.bg-fly .map-layer {
  transform: translate3d(-72px, 135vh, 0) scale(1.03);
  opacity: 0;
  filter: blur(0.5px);
}

/* 飞出时，屏幕开始微灰，为白色速度线做底 */
.bg-fade .scene-fade {
  opacity: 1;
  background:
    linear-gradient(
      to bottom,
      rgba(244, 246, 249, 0.42) 0%,
      rgba(235, 239, 244, 0.58) 100%
    );
}

/* ===== Warp ===== */

.warp-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.bg-warp .warp-layer {
  opacity: 1;
}

.warp-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: var(--len);
  margin-left: -0.5px;
  margin-top: calc(var(--len) * -0.5);
  border-radius: 999px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.96),
    rgba(255, 255, 255, 0.68),
    rgba(255, 255, 255, 0)
  );
  opacity: 0;
  transform-origin: center center;
  transform:
    translate(var(--offset-x), var(--offset-y))
    rotate(var(--angle))
    scaleY(0.16)
    scaleX(0.75);
  filter:
    drop-shadow(0 0 4px rgba(255, 255, 255, 0.5))
    blur(0.1px);
}

.bg-warp .warp-line {
  animation: ls-warp-burst 2s ease-out var(--delay) forwards;
}

@keyframes ls-warp-burst {
  0% {
    opacity: 0;
    transform:
      translate(var(--offset-x), var(--offset-y))
      rotate(var(--angle))
      scaleY(0.16)
      scaleX(0.75);
  }

  15% {
    opacity: 0.78;
  }

  100% {
    opacity: 0;
    transform:
      translate(var(--offset-x), var(--offset-y))
      rotate(var(--angle))
      scaleY(1.75)
      scaleX(1.02);
  }
}

/* ===== 小屏幕 ===== */

@media (max-width: 768px) {
  .road--far {
    opacity: 0.26;
  }

  .road--mid {
    opacity: 0.34;
  }

  .road--near {
    opacity: 0.4;
  }

  .bg-pan .map-layer,
  .bg-pause .map-layer {
    transform: translate3d(-36px, -4px, 0) scale(1.01);
  }

  .bg-fly .map-layer {
    transform: translate3d(-40px, 130vh, 0) scale(1.02);
  }

  .warp-line {
    width: 0.9px;
  }
}

/* 未镜 Logo */

.landing-logo {
  display: flex;
  justify-content: center;
  margin-top: 160px;
  margin-bottom: 40px;
}

.landing-logo img {
  width: 220px;
  opacity: 0.9;
  filter: contrast(1.1);
}

/* 副标题 */

.landing-subtitle {
  text-align: center;
  font-size: 18px;
  color: #555;
  letter-spacing: 0.08em;
  margin-bottom: 80px;
}