/* ===== задники предметов v2 (scenes.js): полноэкранная картина позади контента ===== */
.scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .6s ease}
.scene.on{opacity:1}
.sc-sky,.sc-tint{position:absolute;inset:0}
/* слои одной сетки 1600×900, прибиты к низу; на узком экране не меньше 1100px — главное в центре (x 520…1080) */
.scene{--sw:max(100vw,min(177.78vh,1100px))}
.sc-layer{position:absolute;bottom:0;left:calc(50% - var(--sw) / 2);width:var(--sw);height:calc(var(--sw) * .5625);
  overflow:visible;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.sc-layer.top{bottom:auto;top:0}
.scene .sc-layer{opacity:0;transform:translateY(30px)}
.scene.on .sc-layer{opacity:1;transform:none;transition:opacity .8s ease,transform 1.1s cubic-bezier(.22,1,.36,1)}
/* старшие классы: та же картина, но приглушённая и спокойная */
.scene.calm .sc-layer,.scene.calm .sc-sky{filter:saturate(.55) brightness(1.04)}
.scene.calm .an:not(.keep){animation:none}
.scene.calm .an.keep{animation-duration:calc(var(--d,3s) * 2.2)}

/* пока есть сцена — мир сайта (домики, холмы, солнце) уходит целиком */
.world{transition:opacity .6s}
body.has-scene .world{opacity:0}

/* ---------- анимации: только transform/opacity; опорная точка — начало координат группы ---------- */
.scene .an{transform-box:view-box;transform-origin:0 0;animation-duration:var(--d,3s);animation-delay:var(--dl,0s);
  animation-iteration-count:infinite;animation-direction:alternate;animation-timing-function:ease-in-out}
.scene .an.rev{animation-direction:reverse}
.k-rot{animation-name:sc-rot}.k-rot0{animation-name:sc-rot0}
.k-x{animation-name:sc-x}.k-y{animation-name:sc-y}
.k-float{animation-name:sc-float}
.k-flag{animation-name:sc-flag}
.k-pulse{animation-name:sc-pulse}
.k-grow{animation-name:sc-grow}
.k-flap{animation-name:sc-flap}
.k-flapv{animation-name:sc-flapv}
.k-page{animation-name:sc-page}
.k-blink{animation-name:sc-blink2;animation-direction:normal}
.k-glow{animation-name:sc-glow}
.k-flicker{animation-name:sc-flicker}
.scene .k-twinkle{animation-name:sc-twinkle}
.scene .k-spin{animation-name:sc-spin;animation-timing-function:linear;animation-direction:normal}
.scene .k-spin.rev{animation-direction:reverse}
.scene .k-drift{animation-name:sc-drive;animation-timing-function:linear;animation-direction:normal}
.scene .k-drive{animation-name:sc-drive;animation-timing-function:linear;animation-direction:normal}
.scene .k-pace{animation-name:sc-pace;animation-timing-function:linear;animation-direction:normal}
.scene .k-rise{animation-name:sc-rise;animation-timing-function:ease-out;animation-direction:normal}
.scene .k-smoke{animation-name:sc-smoke;animation-timing-function:ease-out;animation-direction:normal}
.scene .k-drop{animation-name:sc-drop;animation-timing-function:ease-in;animation-direction:normal}
.scene .k-drop2{animation-name:sc-drop2;animation-direction:normal}
.scene .k-cata{animation-name:sc-cata;animation-direction:normal}
.scene .k-shot{animation-name:sc-shot;animation-timing-function:linear;animation-direction:normal}
.scene .k-toss{animation-name:sc-toss;animation-direction:normal}
.scene .k-coin{animation-name:sc-coin;animation-direction:normal}
.scene .k-puff{animation-name:sc-puff;animation-direction:normal}
.scene .k-slide{animation-name:sc-slide;animation-timing-function:linear;animation-direction:normal}
.scene .k-hop{animation-name:sc-hop;animation-direction:normal}
.scene .k-swing{animation-name:sc-swing}

@keyframes sc-rot{from{transform:rotate(calc(var(--a,15deg) * -1))}to{transform:rotate(var(--a,15deg))}}
@keyframes sc-rot0{from{transform:rotate(0)}to{transform:rotate(var(--a,30deg))}}
@keyframes sc-x{from{transform:translateX(0)}to{transform:translateX(var(--x,10px))}}
@keyframes sc-y{from{transform:translateY(0)}to{transform:translateY(var(--y,-8px))}}
@keyframes sc-float{0%{transform:translate(0,0)}50%{transform:translate(calc(var(--x,20px) * .5),var(--y,-10px))}100%{transform:translate(var(--x,20px),0)}}
@keyframes sc-flag{from{transform:scaleX(1) skewY(0)}to{transform:scaleX(.82) skewY(8deg)}}
@keyframes sc-pulse{from{transform:scale(1)}to{transform:scale(var(--s,1.2))}}
@keyframes sc-grow{from{transform:scale(var(--s,.5))}to{transform:scale(1)}}
@keyframes sc-flap{from{transform:scaleX(1)}to{transform:scaleX(.2)}}
@keyframes sc-flapv{from{transform:scaleY(1)}to{transform:scaleY(-.6)}}
@keyframes sc-page{from{transform:scaleX(1)}to{transform:scaleX(-1)}}
@keyframes sc-blink2{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes sc-glow{from{opacity:.55}to{opacity:1}}
@keyframes sc-flicker{0%{opacity:.75;transform:scale(1)}30%{opacity:1;transform:scale(1.08,1.15)}60%{opacity:.85;transform:scale(.95,1.05)}100%{opacity:1;transform:scale(1.04,.96)}}
@keyframes sc-twinkle{from{opacity:.25;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes sc-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes sc-drive{from{transform:translateX(var(--x,0))}to{transform:translateX(var(--x2,100px))}}
@keyframes sc-pace{0%{transform:translateX(0) scaleX(1)}48%{transform:translateX(var(--x,80px)) scaleX(1)}
  50%{transform:translateX(var(--x,80px)) scaleX(-1)}98%{transform:translateX(0) scaleX(-1)}100%{transform:translateX(0) scaleX(1)}}
@keyframes sc-rise{0%{transform:translate(0,0) scale(.5);opacity:0}15%{opacity:1}100%{transform:translate(var(--x,0),var(--y,-50px)) scale(1.1);opacity:0}}
@keyframes sc-smoke{0%{transform:translate(0,0) scale(.4);opacity:0}20%{opacity:.85}100%{transform:translate(var(--x,8px),var(--y,-55px)) scale(1.8);opacity:0}}
@keyframes sc-drop{0%{transform:translateY(0);opacity:1}100%{transform:translateY(var(--y,40px));opacity:0}}
@keyframes sc-drop2{0%,15%{transform:translateY(var(--y,-60px))}45%{transform:translateY(0)}52%{transform:translateY(-8px)}58%,100%{transform:translateY(0)}}
@keyframes sc-cata{0%{transform:rotate(0)}12%{transform:rotate(70deg)}55%{transform:rotate(70deg)}100%{transform:rotate(0)}}
/* снаряд по дуге: x равномерно, y — вверх и вниз */
@keyframes sc-shot{0%{transform:translate(0,0);opacity:0}5%{opacity:1}
  20%{transform:translate(calc(var(--x,150px) * .3),calc(var(--y,-90px) * .85))}35%{transform:translate(calc(var(--x,150px) * .55),var(--y,-90px))}
  50%{transform:translate(calc(var(--x,150px) * .8),calc(var(--y,-90px) * .55 + var(--y2,0px) * .5))}60%{transform:translate(var(--x,150px),var(--y2,0px));opacity:1}62%,100%{transform:translate(var(--x,150px),var(--y2,0px));opacity:0}}
/* облачко пыли в момент попадания снаряда (та же длительность, что у k-shot) */
@keyframes sc-puff{0%,57%{opacity:0;transform:scale(.3)}62%{opacity:1;transform:scale(1)}85%,100%{opacity:0;transform:scale(1.7)}}
@keyframes sc-toss{0%,10%{transform:translateY(0) rotate(0)}45%{transform:translateY(var(--y,-40px)) rotate(200deg)}80%,100%{transform:translateY(0) rotate(360deg)}}
@keyframes sc-coin{0%,10%{transform:translateY(0) scaleY(1)}25%{transform:translateY(calc(var(--y,-40px) * .7)) scaleY(-1)}
  45%{transform:translateY(var(--y,-40px)) scaleY(1)}65%{transform:translateY(calc(var(--y,-40px) * .7)) scaleY(-1)}85%,100%{transform:translateY(0) scaleY(1)}}
/* едет вперёд, у цели тает и появляется снова в начале — без обратного хода */
@keyframes sc-slide{0%{transform:translateX(0);opacity:0}8%{opacity:1}86%{transform:translateX(var(--x,80px));opacity:1}94%,100%{transform:translateX(var(--x,80px));opacity:0}}
@keyframes sc-hop{0%,60%,100%{transform:translateY(0)}75%{transform:translateY(var(--y,-14px))}}
@keyframes sc-swing{from{transform:rotate(calc(var(--a,8deg) * -1))}to{transform:rotate(var(--a,8deg))}}

@media (prefers-reduced-motion:reduce){
  .scene .an{animation:none!important}
}