/* ============ 首页动态赛博场景（像素风·画框式） ============ */
/* 卡片在视口正中央；场景元素分布在四角 + 顶部 + 底部，绝不进入卡片区域 */
/* 像素资源黑底 + mix-blend-mode:screen → 黑色自动透明，只保留像素图形 */
/* image-rendering:pixelated → 放大时保留锐利方块像素感 */

.cyber-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 100% 80% at 50% 50%,
      rgba(15, 8, 35, 0.55) 0%,
      rgba(8, 4, 20, 0.78) 50%,
      rgba(5, 2, 8, 0.95) 100%),
    var(--bg-base);
}

.cyber-scene .scene-layer {
  position: absolute;
}

/* 所有场景图片：黑底自动透明 + 锐利像素感 */
.scene-img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  user-select: none;
  -webkit-user-drag: none;
}

/* ============ 顶部背景：星盘大环（中心略高于屏幕顶，露出下半圆） ============ */
.scene-stars {
  width: min(60vmin, 460px);
  left: 50%;
  top: -18%;
  transform: translate(-50%, -50%);
  opacity: 0.5;
  animation: scene-spin-cw 90s linear infinite;
  filter: drop-shadow(0 0 14px rgba(0, 240, 255, 0.4));
}

/* ============ 左上角：佛身（呼吸光晕） ============ */
.scene-buddha {
  width: min(16vmin, 120px);
  left: 13%;
  top: 18%;
  transform: translate(-50%, -50%);
  opacity: 0.88;
  animation: buddha-breathe 5s ease-in-out infinite;
}

/* ============ 右上角：太极（反向旋转） ============ */
.scene-taiji {
  width: min(15vmin, 110px);
  left: 87%;
  top: 18%;
  transform: translate(-50%, -50%);
  opacity: 0.65;
  animation: scene-spin-ccw 28s linear infinite;
  filter: drop-shadow(0 0 14px rgba(255, 45, 149, 0.4));
}

/* ============ 塔罗（左右两侧，竖向一列，避开卡片） ============ */
.scene-tarot {
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.5vmin, 14px);
  opacity: 0.82;
}

.tarot-left {
  left: clamp(8px, 2vw, 28px);
}

.tarot-right {
  right: clamp(8px, 2vw, 28px);
}

.scene-tarot .tarot-card {
  width: clamp(48px, 6.5vmin, 74px);
  filter:
    drop-shadow(0 0 6px rgba(255, 45, 149, 0.55))
    drop-shadow(0 0 14px rgba(0, 240, 255, 0.28));
  animation: tarot-sway 4.5s ease-in-out infinite alternate;
}

.scene-tarot .tarot-card:nth-child(1) { animation-delay: 0s; }
.scene-tarot .tarot-card:nth-child(2) { animation-delay: 0.6s; }
.scene-tarot .tarot-card:nth-child(3) { animation-delay: 1.2s; }

/* ============ 莲花（底部呼吸，宽幅） ============ */
.scene-lotus {
  bottom: clamp(56px, 7vh, 92px);
  left: 50%;
  transform: translateX(-50%);
  width: min(78vmin, 720px);
  opacity: 0.72;
  animation: lotus-breathe 4.5s ease-in-out infinite;
}

/* ============ 五行图标（底部一排，相生顺序脉冲） ============ */
.scene-elements {
  bottom: clamp(10px, 2.5vh, 26px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: clamp(14px, 3.5vmin, 40px);
}

.el-icon {
  position: relative;
  width: clamp(36px, 5.5vmin, 56px);
  height: clamp(36px, 5.5vmin, 56px);
  animation: el-pulse 3s ease-in-out infinite;
}

.el-icon .scene-img {
  border-radius: 50%;
}

.el-metal  { color: #fff0c0; animation-delay: 0s;   filter: drop-shadow(0 0 6px rgba(255, 240, 192, 0.7)); }
.el-wood   { color: #4dffa6; animation-delay: 0.6s; filter: drop-shadow(0 0 6px rgba(77, 255, 166, 0.7)); }
.el-water  { color: var(--neon-cyan); animation-delay: 1.2s; filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.7)); }
.el-fire   { color: var(--neon-magenta); animation-delay: 1.8s; filter: drop-shadow(0 0 6px rgba(255, 45, 149, 0.7)); }
.el-earth  { color: var(--gold); animation-delay: 2.4s; filter: drop-shadow(0 0 6px rgba(201, 168, 76, 0.7)); }

/* ============ 中央暗角（对准卡片所在区域 50%/50%） ============ */
.scene-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 52% 40% at 50% 50%,
      rgba(5, 2, 8, 0.9) 0%,
      rgba(5, 2, 8, 0.65) 45%,
      rgba(5, 2, 8, 0.28) 75%,
      rgba(5, 2, 8, 0) 100%
    );
  z-index: 2;
}

/* ============ 关键帧 ============ */
@keyframes scene-spin-cw {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes scene-spin-ccw {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes buddha-breathe {
  0%, 100% {
    opacity: 0.65;
    transform: translate(-50%, -50%) scale(1);
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
  }
  50% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.04);
    filter:
      drop-shadow(0 0 20px rgba(255, 215, 0, 0.85))
      drop-shadow(0 0 32px rgba(255, 45, 149, 0.25));
  }
}

@keyframes tarot-sway {
  from { transform: translateY(-3px) rotate(-2.5deg); }
  to   { transform: translateY(3px) rotate(2.5deg); }
}

@keyframes lotus-breathe {
  0%, 100% {
    opacity: 0.5;
    filter: drop-shadow(0 0 8px rgba(255, 158, 199, 0.5));
  }
  50% {
    opacity: 0.78;
    filter:
      drop-shadow(0 0 18px rgba(255, 158, 199, 0.85))
      drop-shadow(0 0 28px rgba(0, 240, 255, 0.3));
  }
}

@keyframes el-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 6px currentColor;
  }
  50% {
    transform: scale(1.14);
    box-shadow:
      0 0 14px currentColor,
      0 0 28px currentColor;
  }
}

/* ============ 响应式：手机（背景透出式） ============ */
/* 顶部装饰 opacity 大幅降低（0.2-0.3）作为氛围背景；卡片用 --bg-panel-strong 强化不透明 */
@media (max-width: 767px) {
  .scene-tarot { display: none; }

  /* 星盘：顶部背景，露出下半圆，很淡 */
  .scene-stars {
    width: min(75vmin, 340px);
    top: -15%;
    opacity: 0.22;
    filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.2));
  }

  /* 佛身：左上角小图，用手机端呼吸动画（低 opacity 范围） */
  .scene-buddha {
    width: min(18vmin, 80px);
    left: 15%;
    top: 11%;
    animation: buddha-breathe-mobile 5s ease-in-out infinite;
  }

  /* 太极：右上角小图 */
  .scene-taiji {
    width: min(17vmin, 75px);
    left: 85%;
    top: 11%;
    opacity: 0.28;
    filter: drop-shadow(0 0 8px rgba(255, 45, 149, 0.25));
  }

  /* 莲花：底部保持可见 */
  .scene-lotus {
    bottom: clamp(56px, 7vh, 90px);
    width: min(88vmin, 420px);
    opacity: 0.65;
  }

  /* 五行图标略缩小 */
  .el-icon {
    width: clamp(30px, 8vmin, 44px);
    height: clamp(30px, 8vmin, 44px);
  }

  /* 暗角聚焦在卡片所在区域 */
  .scene-vignette {
    background: radial-gradient(
      ellipse 75% 45% at 50% 50%,
      rgba(5, 2, 8, 0.94) 0%,
      rgba(5, 2, 8, 0.72) 50%,
      rgba(5, 2, 8, 0.32) 80%,
      rgba(5, 2, 8, 0) 100%
    );
  }

  /* 卡片用强不透明背景，让透出的装饰不干扰可读性 */
  .view-home .card {
    background: var(--bg-panel-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  /* 手机端佛身呼吸（低 opacity 范围，匹配"背景透出"基调） */
  @keyframes buddha-breathe-mobile {
    0%, 100% {
      opacity: 0.2;
      transform: translate(-50%, -50%) scale(1);
    }
    50% {
      opacity: 0.36;
      transform: translate(-50%, -50%) scale(1.04);
    }
  }
}

/* ============ 响应式：大屏 ============ */
@media (min-width: 1024px) {
  .scene-stars {
    width: min(50vmin, 540px);
    opacity: 0.6;
  }

  .scene-buddha {
    width: min(13vmin, 150px);
  }

  .scene-taiji {
    width: min(12vmin, 140px);
  }

  .scene-lotus {
    width: min(72vmin, 820px);
  }
}