/* scene.css — 分层卡通风景 · 由 scene-artist 维护，只被 index.html 引用 */
.echo-scene{
  --es-sy:0;
  --es-i:0;
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  isolation:isolate;
  contain:paint;
  background:var(--sky-1,#cfe9f7);
}
.echo-scene svg{display:block;width:100%;height:100%}
.echo-scene .es-layer{
  position:absolute;
  inset:-8% 0 -12%;
  transform:translate3d(0,calc(var(--es-sy,0) * var(--p,0) * 1px + var(--es-lift,0px)),0);
}

/* ── 天空 ───────────────────────────────────────── */
.es-sky{
  --p:0;
  background:linear-gradient(180deg,
    #dceffd 0%,
    var(--sky-1,#cfe9f7) 22%,
    #dff0f8 40%,
    var(--sky-3,#fff6e9) 64%,
    var(--paper,#fbf8f1) 100%);
}
.echo-scene .es-sky::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 54% 42% at 21% 24%,rgba(255,244,214,.55) 0%,rgba(255,244,214,0) 72%),
    linear-gradient(198deg,rgba(243,184,192,.18) 0%,rgba(243,184,192,0) 44%,rgba(185,224,212,.14) 100%);
}
.es-sun{--p:-0.03}
.es-sun__glow{
  position:absolute;
  left:6%;
  top:10%;
  width:46%;
  height:48%;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(255,248,224,.62) 0%,
    rgba(255,231,188,.38) 16%,
    rgba(255,217,160,.22) 32%,
    rgba(247,201,168,.15) 48%,
    rgba(243,184,192,.06) 64%,
    rgba(243,184,192,0) 78%);
  animation:es-glow 15s var(--ease-out,cubic-bezier(.22,.61,.36,1)) infinite alternate;
}
.es-sun__core{
  position:absolute;
  left:25.5%;
  top:33%;
  width:9%;
  height:12%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,250,232,.95) 0%,rgba(255,243,208,.55) 46%,rgba(255,243,208,0) 72%);
  animation:es-glow 11s var(--ease-out,cubic-bezier(.22,.61,.36,1)) infinite alternate-reverse;
}
.es-haze{--p:-0.04}
.es-haze__band{
  position:absolute;
  left:-5%;
  right:-5%;
  top:29%;
  height:11%;
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.22) 46%,
    rgba(255,246,233,.14) 68%,
    rgba(255,246,233,0) 100%);
}

/* ── 云 ─────────────────────────────────────────── */
.es-clouds{--p:-0.05}
.es-cloud-band{position:absolute;left:0;right:0;overflow:hidden}
.es-cloud-band svg{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:auto;
  aspect-ratio:2880/300;
  animation:es-drift linear infinite;
}
.es-cloud-band--1{top:0;height:26%;opacity:.55;filter:blur(6px);--p:-0.04}
.es-cloud-band--1 svg{animation-duration:164s}
.es-cloud-band--2{top:6%;height:30%;opacity:.78;--p:-0.06}
.es-cloud-band--2 svg{animation-duration:118s}
.es-cloud-band--3{top:24%;height:22%;opacity:.92;--p:-0.09}
.es-cloud-band--3 svg{animation-duration:86s}

/* ── 飞鸟 ───────────────────────────────────────── */
.es-birds{--p:-0.07}
.es-birds svg{overflow:visible}
.es-bird{
  fill:none;
  stroke:var(--ink-soft,#5b6b80);
  stroke-width:2;
  stroke-linecap:round;
  stroke-opacity:.4;
}
.es-bird--1{animation:es-flit 19s var(--ease-out,cubic-bezier(.22,.61,.36,1)) infinite alternate}
.es-bird--2{animation:es-flit 15s var(--ease-out,cubic-bezier(.22,.61,.36,1)) infinite alternate-reverse}
.es-bird--3{animation:es-flit 23s var(--ease-out,cubic-bezier(.22,.61,.36,1)) infinite alternate}
.es-bird--4{animation:es-flit 17s var(--ease-out,cubic-bezier(.22,.61,.36,1)) infinite alternate-reverse}
.es-bird--5{animation:es-flit 21s var(--ease-out,cubic-bezier(.22,.61,.36,1)) infinite alternate}
.es-voyage{animation:es-voyage 210s var(--ease-out,cubic-bezier(.22,.61,.36,1)) infinite alternate}
.es-voyage--b{animation-duration:260s}

/* ── 山 ─────────────────────────────────────────── */
.es-hills-back{--p:-0.065}
.es-hills-far{--p:-0.08}
.es-hills-mid{--p:-0.14}
.es-shore{--p:-0.26}
.echo-scene .es-shore::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse 44% 30% at 17% 76%,rgba(255,236,190,.32) 0%,rgba(255,236,190,0) 72%);
}
.echo-scene .es-grass{
  transform-box:fill-box;
  transform-origin:50% 100%;
}
.echo-scene .es-grass--a{animation:es-grass 9s var(--ease-out,cubic-bezier(.22,.61,.36,1)) infinite alternate}
.echo-scene .es-grass--b{animation:es-grass-b 13.5s var(--ease-out,cubic-bezier(.22,.61,.36,1)) infinite alternate}

/* ── 湖面 ───────────────────────────────────────── */
.es-lake{--p:-0.2}
.es-lake__surface{
  position:absolute;
  left:0;
  right:0;
  top:46.7%;
  bottom:0;
  overflow:hidden;
}
.echo-scene .es-lake__surface::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:10%;
  background:linear-gradient(180deg,
    rgba(255,250,240,0) 0%,
    rgba(255,250,240,.08) 34%,
    rgba(255,250,240,.14) 58%,
    rgba(255,250,240,.07) 84%,
    rgba(255,250,240,0) 100%);
  pointer-events:none;
}
.es-lake__water{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    rgba(221,239,247,0) 0%,
    rgba(214,236,247,.5) 3%,
    #d1e9f6 10%,
    #b9dff2 34%,
    #a6d4e0 64%,
    var(--mint,#b9e0d4) 100%);
  opacity:.95;
}
.echo-scene .es-lake__sun{
  position:absolute;
  left:16%;
  top:0;
  width:17%;
  height:68%;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,247,224,.42) 0%,
    rgba(255,236,200,.2) 26%,
    rgba(255,232,190,.08) 58%,
    rgba(255,232,190,0) 86%);
  -webkit-mask-image:radial-gradient(ellipse 64% 56% at 50% 20%,#000 0%,rgba(0,0,0,.55) 46%,rgba(0,0,0,0) 80%);
  mask-image:radial-gradient(ellipse 64% 56% at 50% 20%,#000 0%,rgba(0,0,0,.55) 46%,rgba(0,0,0,0) 80%);
}
.echo-scene .es-lake__refl{
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:30%;
  transform-origin:50% 0;
  animation:es-refl 11s var(--ease-out,cubic-bezier(.22,.61,.36,1)) infinite alternate;
}
.echo-scene .es-lake__waves{
  position:absolute;
  left:0;
  right:0;
  top:0;
  width:100%;
  height:52%;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.95) 30%,rgba(0,0,0,.85) 66%,rgba(0,0,0,.5) 100%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.95) 30%,rgba(0,0,0,.85) 66%,rgba(0,0,0,.5) 100%);
}
.echo-scene .es-waves{animation:es-water 34s linear infinite alternate}
.echo-scene .es-sparkfield{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-repeat:no-repeat;
}
.echo-scene .es-sparkfield--a{animation:es-twinkle 5.2s var(--ease-out,cubic-bezier(.22,.61,.36,1)) -.4s infinite alternate}
.echo-scene .es-sparkfield--b{animation:es-twinkle 7.1s var(--ease-out,cubic-bezier(.22,.61,.36,1)) -2.3s infinite alternate-reverse}
.echo-scene .es-sparkfield--c{animation:es-twinkle 6.3s var(--ease-out,cubic-bezier(.22,.61,.36,1)) -4.1s infinite alternate}
/* ── 人物 ───────────────────────────────────────── */

/* ── 湖畔剪影（极简） ────────────────────── */
.es-figures{--p:-0.32;transition:opacity .55s var(--ease-out,cubic-bezier(.22,.61,.36,1))}
.echo-scene.is-deep .es-figures{opacity:0}
.echo-scene .es-fig{position:absolute;left:17%;bottom:26%;width:min(24%,250px);height:auto;aspect-ratio:300/220}

/* ── MC 草方块（低对比彩蛋） ────────────────────── */

/* ── 前景植物 ───────────────────────────────────── */
.es-foreplant{--p:-0.5}
.echo-scene .es-plant{position:absolute;bottom:-3%;height:auto}
.echo-scene .es-fringe{position:absolute;left:-1%;bottom:-1%;width:102%;height:auto;aspect-ratio:1440/220}
.echo-scene .es-fringe path{transform-box:fill-box;transform-origin:50% 100%}
.echo-scene .es-fringe path:first-child{animation:es-sway-b 16s var(--ease-out,cubic-bezier(.22,.61,.36,1)) infinite alternate}
.echo-scene .es-fringe path:last-child{animation:es-sway-a 21s var(--ease-out,cubic-bezier(.22,.61,.36,1)) infinite alternate-reverse}
.echo-scene .es-plant--l{left:-4%;width:min(24%,320px);aspect-ratio:320/470}
.echo-scene .es-plant--r{right:-3%;width:min(21%,300px);aspect-ratio:300/380}
.echo-scene .es-plant path{transform-box:fill-box;transform-origin:50% 100%}
.echo-scene .es-plant--l path:first-child{animation:es-sway-a 13s var(--ease-out,cubic-bezier(.22,.61,.36,1)) infinite alternate}
.echo-scene .es-plant--l path:last-child{animation:es-sway-b 17.5s var(--ease-out,cubic-bezier(.22,.61,.36,1)) infinite alternate-reverse}
.echo-scene .es-plant--r path:first-child{animation:es-sway-b 15s var(--ease-out,cubic-bezier(.22,.61,.36,1)) infinite alternate}
.echo-scene .es-plant--r path:last-child{animation:es-sway-a 19s var(--ease-out,cubic-bezier(.22,.61,.36,1)) infinite alternate-reverse}

/* ── 光斑 ───────────────────────────────────────── */
.es-bokeh{--p:-0.36}
.es-bokeh span{
  position:absolute;
  left:var(--x,50%);
  top:var(--y,40%);
  width:var(--s,120px);
  height:var(--s,120px);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,248,230,.9) 0%,rgba(255,226,182,.34) 46%,rgba(255,217,160,0) 72%);
  animation:es-bokeh var(--d,17s) var(--ease-out,cubic-bezier(.22,.61,.36,1)) infinite alternate,
            es-bokeh-glow var(--g,9s) ease-in-out infinite alternate;
  animation-delay:var(--bdelay,0s),var(--gdelay,0s);
}

/* ── 花瓣 ───────────────────────────────────────── */
.es-petal{
  position:absolute;
  top:-10%;
  left:var(--x,50%);
  width:var(--s,11px);
  height:calc(var(--s,11px) * 1.45);
  border-radius:64% 36% 58% 42% / 58% 62% 38% 42%;
  background:linear-gradient(158deg,var(--blush,#f3b8c0) 0%,var(--paper,#fbf8f1) 100%);
  opacity:0;
  animation:es-petal-fall var(--dur,20s) linear var(--delay,0s) infinite;
}


.echo-scene .es-petal--b1,
.echo-scene .es-petal--b2{animation-name:es-petal-float}

/* ── 全局氛围 ───────────────────────────────────── */
.es-vignette{
  position:absolute;
  inset:0;
  background:
    radial-gradient(132% 108% at 46% 36%,rgba(46,59,78,0) 56%,rgba(46,59,78,.08) 100%),
    linear-gradient(180deg,rgba(255,246,233,0) 70%,rgba(251,248,241,.28) 100%);
}
.es-veil{
  position:absolute;
  inset:0;
  background:var(--paper,#fbf8f1);
  opacity:calc(var(--es-i,0) * .16);
  transition:opacity var(--dur-2,520ms) var(--ease-out,cubic-bezier(.22,.61,.36,1));
}

/* ── 状态 ───────────────────────────────────────── */
.echo-scene.is-scrolling .es-layer{will-change:transform}
.echo-scene.is-paused .es-layer,
.echo-scene.is-paused .es-cloud-band svg,
.echo-scene.is-paused .es-petal,
.echo-scene.is-paused .es-bokeh span,
.echo-scene.is-paused .es-waves,
.echo-scene.is-paused .es-sparkfield,
.echo-scene.is-paused .es-voyage,
.echo-scene.is-paused .es-lake__refl,
.echo-scene.is-paused .es-breathe,
.echo-scene.is-paused .es-plant path,
.echo-scene.is-paused .es-fringe path,
.echo-scene.is-paused .es-bird{animation-play-state:paused}

.echo-scene.es-rm .es-layer{transform:translate3d(0,var(--es-lift,0px),0)}
.echo-scene.es-rm .es-cloud-band svg,
.echo-scene.es-rm .es-petal,
.echo-scene.es-rm .es-bokeh span,
.echo-scene.es-rm .es-waves,
.echo-scene.es-rm .es-sparkfield,
.echo-scene.es-rm .es-voyage,
.echo-scene.es-rm .es-lake__refl,
.echo-scene.es-rm .es-sun__glow,
.echo-scene.es-rm .es-sun__core,
.echo-scene.es-rm .es-grass,
.echo-scene.es-rm .es-bird,
.echo-scene.es-rm .es-cloud-band svg{animation:none;transform:translate3d(-9%,0,0)}
.echo-scene.es-rm .es-plant path,
.echo-scene.es-rm .es-fringe path{animation:none;transform:none}
.echo-scene.es-rm .es-petal{
  top:var(--stop,42%);
  opacity:.62;
  transform:rotate(var(--r0,0deg));
}
.echo-scene.es-rm .es-bokeh span{opacity:.72}
.echo-scene.es-rm .es-sparkfield{opacity:.62}
.echo-scene.es-rm .es-sun__core{opacity:.9}
.echo-scene.es-rm *{animation:none}

/* ── 关键帧 ─────────────────────────────────────── */
@keyframes es-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes es-glow{from{opacity:.72}to{opacity:1}}
@keyframes es-fly-a{
  from{transform:translate3d(-8%,4px,0);opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  to{transform:translate3d(108%,-10px,0);opacity:0}
}
@keyframes es-fly-b{
  from{transform:translate3d(-8%,-6px,0);opacity:0}
  16%{opacity:1}
  84%{opacity:1}
  to{transform:translate3d(108%,8px,0);opacity:0}
}
@keyframes es-sway-a{from{transform:rotate(-.6deg)}to{transform:rotate(.85deg)}}
@keyframes es-sway-b{from{transform:rotate(.55deg)}to{transform:rotate(-.75deg)}}
@keyframes es-grass{from{transform:skewX(-1.2deg)}to{transform:skewX(1.8deg)}}
@keyframes es-grass-b{from{transform:skewX(1.5deg) translate3d(-1px,0,0)}to{transform:skewX(-1.1deg) translate3d(2px,0,0)}}
@keyframes es-twinkle{from{opacity:.34}to{opacity:1}}
@keyframes es-voyage{from{transform:translate3d(-30px,0,0)}to{transform:translate3d(34px,0,0)}}
@keyframes es-flit{from{transform:translate3d(-13px,2px,0)}to{transform:translate3d(15px,-2.5px,0)}}
@keyframes es-refl{from{transform:skewX(.35deg) scaleY(1)}to{transform:skewX(-.45deg) scaleY(1.04)}}
@keyframes es-water{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-23px,0)}}
@keyframes es-bokeh{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--dx,14px),var(--dy,-18px),0)}}
@keyframes es-bokeh-glow{from{opacity:.45}to{opacity:.95}}
@keyframes es-petal-fall{
  0%{opacity:0;transform:translate3d(0,-8vh,0) rotate(var(--r0,0deg))}
  8%{opacity:var(--o,.85)}
  22%{transform:translate3d(calc(var(--dx,60px) * .16),16vh,0) rotate(calc(var(--r0,0deg) + var(--spin,200deg) * .18))}
  42%{transform:translate3d(calc(var(--dx,60px) * .46),38vh,0) rotate(calc(var(--r0,0deg) + var(--spin,200deg) * .44))}
  62%{transform:translate3d(calc(var(--dx,60px) * .28),60vh,0) rotate(calc(var(--r0,0deg) + var(--spin,200deg) * .62))}
  82%{transform:translate3d(calc(var(--dx,60px) * .82),84vh,0) rotate(calc(var(--r0,0deg) + var(--spin,200deg) * .84))}
  92%{opacity:var(--o,.85)}
  100%{opacity:0;transform:translate3d(var(--dx,60px),108vh,0) rotate(calc(var(--r0,0deg) + var(--spin,200deg)))}
}

@keyframes es-petal-float{
  0%{opacity:0;transform:translate3d(0,-6vh,0) rotate(var(--r0,0deg))}
  10%{opacity:var(--o,.85)}
  34%{transform:translate3d(calc(var(--dx,60px) * .2),16vh,0) rotate(calc(var(--r0,0deg) + var(--spin,200deg) * .22))}
  62%{transform:translate3d(calc(var(--dx,60px) * .58),34vh,0) rotate(calc(var(--r0,0deg) + var(--spin,200deg) * .52))}
  86%{opacity:calc(var(--o,.85) * .7);transform:translate3d(calc(var(--dx,60px) * .44),50vh,0) rotate(calc(var(--r0,0deg) + var(--spin,200deg) * .8))}
  100%{opacity:0;transform:translate3d(var(--dx,60px),60vh,0) rotate(calc(var(--r0,0deg) + var(--spin,200deg)))}
}

/* ── 窄屏降级 ───────────────────────────────────── */
@media (max-width:620px){
  .echo-scene .es-petal--b2,
  .echo-scene .es-petal--b3{display:none}
  .echo-scene .es-cloud-band--1{display:none}
  .echo-scene .es-bokeh span:nth-child(n+3){display:none}
  .echo-scene .es-shore,
    .echo-scene .es-foreplant{display:none}
}
@media (max-height:520px){
  .echo-scene .es-fig{bottom:12%;width:min(24%,190px)}
}