/* ============================================================
   场景视觉特效 · 10个闯关场景 CSS
   通过 data-scene 属性切换场景样式
   ============================================================ */

/* ---------- 通用场景过渡 ---------- */
.dream-root{ transition:background 1.2s ease; }
.dream-track{ transition:filter 1s ease; }

/* ---------- 场景1：迷雾入口 ---------- */
.dream-root[data-scene="scene1"]{
  background:
    radial-gradient(120% 80% at 50% 10%, rgba(255,230,240,.7), transparent 50%),
    radial-gradient(100% 80% at 50% 90%, rgba(255,210,225,.6), transparent 60%),
    linear-gradient(165deg,#ffe8f0 0%, #ffd0e0 32%, #ffc2d4 58%, #ffd6e4 82%, #fff0f5 100%);
}
.dream-root[data-scene="scene1"] .dream-mist{ opacity:.7; }
.scene1-fog{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(ellipse at 50% 60%, rgba(200,200,210,.35) 0%, transparent 60%);
  animation:fogShift 8s ease-in-out infinite;
}
@keyframes fogShift{ 0%,100%{ opacity:.6 } 50%{ opacity:.3 } }
.scene1-starlet{
  position:absolute; width:5px; height:5px; border-radius:50%; background:#fff;
  box-shadow:0 0 6px #fff; animation:starletTwinkle 2s ease-in-out infinite;
}
@keyframes starletTwinkle{ 0%,100%{ opacity:.3; transform:scale(.6) } 50%{ opacity:1; transform:scale(1) } }

/* ---------- 场景2：星光花径 ---------- */
.dream-root[data-scene="scene2"]{
  background:
    radial-gradient(120% 80% at 40% 20%, rgba(255,200,220,.65), transparent 50%),
    radial-gradient(100% 80% at 60% 80%, rgba(255,180,210,.55), transparent 60%),
    linear-gradient(165deg,#ffd0e6 0%, #ffc2dc 32%, #ffb8d4 58%, #ffcce0 82%, #ffe8f2 100%);
}
.scene2-flower{
  position:absolute; width:30px; height:30px; pointer-events:none; z-index:2;
  animation:flowerSway 3s ease-in-out infinite;
}
@keyframes flowerSway{ 0%,100%{ transform:rotate(-5deg) } 50%{ transform:rotate(5deg) } }
.scene2-petal{
  position:absolute; width:8px; height:8px; background:#ffb3c6; border-radius:50% 0 50% 0;
  pointer-events:none; z-index:3; animation:petalDrift 4s linear infinite;
}
@keyframes petalDrift{ 0%{ transform:translateY(-10px) rotate(0deg); opacity:0 } 10%{ opacity:.8 } 100%{ transform:translateY(300px) rotate(360deg); opacity:0 } }

/* ---------- 场景3：迷雾峡谷 ---------- */
.dream-root[data-scene="scene3"]{
  background:
    radial-gradient(120% 80% at 20% 30%, rgba(220,190,230,.55), transparent 50%),
    radial-gradient(100% 80% at 80% 70%, rgba(200,180,220,.5), transparent 60%),
    linear-gradient(165deg,#e8d0e8 0%, #e0c2dc 32%, #d8b8d4 58%, #e0cce0 82%, #f0e0f0 100%);
}
.scene3-crystal{
  position:absolute; width:16px; height:16px; background:linear-gradient(135deg,#ccc,#999);
  pointer-events:none; z-index:2; animation:crystalBlink 2s ease-in-out infinite;
}
.scene3-crystal.lit{ background:linear-gradient(135deg,#ffb3c6,#ff7fb0); animation:crystalBeam 2s ease-in-out infinite; }
@keyframes crystalBlink{ 0%,100%{ opacity:.4 } 50%{ opacity:.8 } }
@keyframes crystalBeam{ 0%,100%{ box-shadow:0 0 8px rgba(255,127,184,.4) } 50%{ box-shadow:0 0 20px rgba(255,127,184,.8) } }
.scene3-fogband{
  position:absolute; left:0; right:0; height:40px; background:linear-gradient(180deg,rgba(180,180,190,.4),transparent);
  pointer-events:none; z-index:2; animation:fogbandFade 4s ease-in-out infinite;
}

/* ---------- 场景4：音符溪流 ---------- */
.dream-root[data-scene="scene4"]{
  background:
    radial-gradient(120% 80% at 50% 50%, rgba(255,210,235,.5), transparent 50%),
    radial-gradient(100% 80% at 30% 70%, rgba(255,200,230,.45), transparent 60%),
    linear-gradient(165deg,#ffe0f0 0%, #ffd0e8 32%, #ffc8e0 58%, #ffe0ec 82%, #fff0f8 100%);
}
.scene4-note{
  position:absolute; width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.35);
  border:1px solid rgba(255,200,230,.5); display:flex; align-items:center; justify-content:center;
  font-size:12px; pointer-events:none; z-index:2; animation:noteBob 2s ease-in-out infinite;
}
@keyframes noteBob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
.scene4-ripple{
  position:absolute; border-radius:50%; border:2px solid rgba(255,200,230,.4);
  pointer-events:none; z-index:1; animation:rippleExpand 2s ease-out infinite;
}
@keyframes rippleExpand{ 0%{ width:20px; height:20px; opacity:.6 } 100%{ width:60px; height:60px; opacity:0 } }

/* ---------- 场景5：完形森林 ---------- */
.dream-root[data-scene="scene5"]{
  background:
    radial-gradient(120% 80% at 60% 20%, rgba(255,200,220,.5), transparent 50%),
    radial-gradient(100% 80% at 30% 80%, rgba(255,210,200,.45), transparent 60%),
    linear-gradient(165deg,#ffe8f0 0%, #ffe0e8 32%, #ffd8e0 58%, #ffe8ec 82%, #fff5f8 100%);
}
.scene5-tree{
  position:absolute; width:40px; height:60px; pointer-events:none; z-index:2;
}
.scene5-mushroom{
  position:absolute; width:20px; height:20px; border-radius:50% 50% 40% 40%;
  background:radial-gradient(circle at 40% 30%,#ffb3c6,#ff7fb0); pointer-events:none; z-index:2;
  animation:mushGlow 3s ease-in-out infinite;
}
@keyframes mushGlow{ 0%,100%{ box-shadow:0 0 6px rgba(255,127,184,.3) } 50%{ box-shadow:0 0 14px rgba(255,127,184,.6) } }
.scene5-sign{
  position:absolute; padding:4px 10px; border-radius:8px; background:rgba(255,255,255,.7);
  font-size:11px; font-weight:700; color:#8a4670; pointer-events:none; z-index:2;
}

/* ---------- 场景6：许愿湖 ---------- */
.dream-root[data-scene="scene6"]{
  background:
    radial-gradient(120% 80% at 50% 60%, rgba(255,210,230,.55), transparent 50%),
    radial-gradient(100% 80% at 50% 40%, rgba(255,200,220,.5), transparent 60%),
    linear-gradient(165deg,#ffe8f4 0%, #ffe0ee 32%, #ffd8e8 58%, #ffe8f0 82%, #fff8fc 100%);
}
.scene6-star-rise{
  position:absolute; width:6px; height:6px; border-radius:50%; background:#ffd76a;
  box-shadow:0 0 10px #ffd76a; pointer-events:none; z-index:2;
  animation:starRise 3s ease-out forwards;
}
@keyframes starRise{ 0%{ transform:translateY(40px); opacity:0 } 30%{ opacity:1 } 100%{ transform:translateY(-20px); opacity:0 } }
.scene6-wish-platform{
  position:absolute; width:60px; height:8px; border-radius:4px; background:linear-gradient(90deg,#fff,#ffe0ec);
  pointer-events:none; z-index:2; box-shadow:0 2px 8px rgba(255,200,230,.4);
}
.scene6-beam{
  position:absolute; width:4px; background:linear-gradient(180deg,rgba(255,127,184,.6),transparent);
  pointer-events:none; z-index:1; animation:beamPulse 2s ease-in-out infinite;
}
@keyframes beamPulse{ 0%,100%{ opacity:.4 } 50%{ opacity:.8 } }

/* ---------- 场景7：遗忘回廊 ---------- */
.dream-root[data-scene="scene7"]{
  background:
    radial-gradient(120% 80% at 50% 50%, rgba(230,200,220,.45), transparent 50%),
    linear-gradient(165deg,#f0e0e8 0%, #e8d8e0 32%, #e0d0d8 58%, #ecd8e0 82%, #f8f0f4 100%);
}
.scene7-frame{
  position:absolute; width:18px; height:24px; border:2px solid rgba(150,150,160,.4);
  background:rgba(255,255,255,.2); pointer-events:none; z-index:2;
}
.scene7-frame.lit{ border-color:#ff7fb0; background:rgba(255,127,184,.2); box-shadow:0 0 8px rgba(255,127,184,.4); }
.scene7-floor-tile{
  position:absolute; width:30px; height:30px; border:1px dashed rgba(180,160,170,.3);
  pointer-events:none; z-index:1;
}

/* ---------- 场景8：十一选十星桥 ---------- */
.dream-root[data-scene="scene8"]{
  background:
    radial-gradient(120% 80% at 50% 30%, rgba(255,220,230,.55), transparent 50%),
    radial-gradient(100% 80% at 50% 70%, rgba(255,200,220,.5), transparent 60%),
    linear-gradient(165deg,#ffe0ec 0%, #ffd0e0 32%, #ffc8d8 58%, #ffd8e4 82%, #fff0f5 100%);
}
.scene8-sakura{
  position:absolute; width:10px; height:10px; background:#ffb3c6; border-radius:50% 0 50% 0;
  pointer-events:none; z-index:3; animation:sakuraFall 3s linear infinite;
}
@keyframes sakuraFall{ 0%{ transform:translateY(-10px) translateX(0) rotate(0deg); opacity:0 } 10%{ opacity:.8 } 100%{ transform:translateY(300px) translateX(30px) rotate(720deg); opacity:0 } }
.scene8-step{
  position:absolute; width:24px; height:16px; border-radius:4px; background:linear-gradient(180deg,#ffe0ec,#ffc2d9);
  pointer-events:none; z-index:2; box-shadow:0 1px 4px rgba(255,150,190,.3);
}
.scene8-step.glow{ box-shadow:0 0 12px rgba(255,200,100,.7); animation:stepGlow 1s ease-in-out infinite; }
@keyframes stepGlow{ 0%,100%{ box-shadow:0 0 8px rgba(255,200,100,.5) } 50%{ box-shadow:0 0 16px rgba(255,200,100,.9) } }
.scene8-arch{
  position:absolute; width:120px; height:60px; border-radius:60px 60px 0 0;
  border:4px solid rgba(255,200,100,.6); border-bottom:none; pointer-events:none; z-index:2;
}

/* ---------- 场景9：冲刺云海 ---------- */
.dream-root[data-scene="scene9"]{
  background:
    radial-gradient(120% 80% at 50% 40%, rgba(255,255,255,.7), transparent 50%),
    radial-gradient(100% 80% at 50% 60%, rgba(220,230,255,.5), transparent 60%),
    linear-gradient(165deg,#f0f4ff 0%, #e8eeff 32%, #e0e8ff 58%, #ecf0ff 82%, #f8faff 100%);
}
.scene9-meteor{
  position:absolute; height:2px; background:linear-gradient(90deg,rgba(255,127,184,.8),transparent);
  pointer-events:none; z-index:2; animation:meteorFly 3s linear forwards;
}
@keyframes meteorFly{ 0%{ transform:translateX(-100px); opacity:0 } 10%{ opacity:1 } 100%{ transform:translateX(300px); opacity:0 } }
.scene9-cloud{
  position:absolute; width:60px; height:30px; border-radius:30px; background:rgba(255,255,255,.7);
  pointer-events:none; z-index:2; animation:cloudDrift 8s ease-in-out infinite;
}
@keyframes cloudDrift{ 0%,100%{ transform:translateX(0) } 50%{ transform:translateX(20px) } }
.scene9-platform{
  position:absolute; width:80px; height:10px; border-radius:5px; background:linear-gradient(90deg,#ffe0ec,#ffc2d9);
  pointer-events:none; z-index:2; box-shadow:0 2px 8px rgba(255,150,190,.3);
}

/* ---------- 场景10：星光城堡 ---------- */
.dream-root[data-scene="scene10"]{
  background:
    radial-gradient(120% 80% at 50% 30%, rgba(255,200,220,.6), transparent 50%),
    radial-gradient(100% 80% at 50% 70%, rgba(255,220,200,.5), transparent 60%),
    linear-gradient(165deg,#ffe0d8 0%, #ffd0d0 32%, #ffc8c8 58%, #ffd8d8 82%, #fff0f0 100%);
}
.scene10-star-grid{
  position:absolute; pointer-events:none; z-index:2;
}
.scene10-star{
  position:absolute; width:8px; height:8px; background:#ff7fb0; border-radius:50%;
  box-shadow:0 0 6px rgba(255,127,184,.6); animation:castleStarBlink 2s ease-in-out infinite;
}
@keyframes castleStarBlink{ 0%,100%{ opacity:.4; transform:scale(.8) } 50%{ opacity:1; transform:scale(1.2) } }
.scene10-gate{
  position:absolute; width:100px; height:80px; border-radius:50px 50px 0 0;
  background:linear-gradient(180deg,rgba(255,200,100,.3),rgba(255,200,100,.1)); pointer-events:none; z-index:1;
}
.scene10-rays{
  position:absolute; width:200%; height:200%; left:-50%; top:-50%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,200,100,.1) 20deg,transparent 40deg,rgba(255,200,100,.1) 60deg,transparent 80deg,rgba(255,200,100,.1) 100deg,transparent 120deg,rgba(255,200,100,.1) 140deg,transparent 160deg,rgba(255,200,100,.1) 180deg,transparent 200deg,rgba(255,200,100,.1) 220deg,transparent 240deg,rgba(255,200,100,.1) 260deg,transparent 280deg,rgba(255,200,100,.1) 300deg,transparent 320deg,rgba(255,200,100,.1) 340deg,transparent 360deg);
  animation:raySpin 20s linear infinite; pointer-events:none; z-index:0; opacity:.5;
}
@keyframes raySpin{ to{ transform:rotate(360deg) } }

/* ---------- 场景装饰元素通用动画 ---------- */
@keyframes mistDriftSlow{ from{ transform:translateX(-5%) } to{ transform:translateX(5%) } }