/* sky, hills, lighthouse, animals */
.sky{position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(110% 60% at 18% 0%,#15233f 0%,rgba(21,35,63,0) 62%),
    radial-gradient(90% 55% at 85% 100%,#1b2a3b 0%,rgba(27,42,59,0) 65%),
    linear-gradient(#04060b,#09101d 62%,#101a2b)}
.sky::after{content:"";position:absolute;inset:0;opacity:.07;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='200' height='200' filter='url(%23g)'/></svg>")}
#stars{position:absolute;inset:0;width:100%;height:100%}
.moon{position:absolute;top:calc(var(--sat) + 9%);left:13%;width:clamp(34px,9vw,52px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#f4efe0,#cfc9b8 70%);opacity:.8;
  box-shadow:0 0 30px 6px rgba(226,222,205,.22),0 0 120px 40px rgba(150,170,210,.12);transition:opacity 1.2s}

.scene{position:fixed;left:0;right:0;bottom:0;height:calc(var(--ground) + 190px);z-index:1;pointer-events:none;transition:opacity 1.4s var(--ease)}
body:not([data-screen="home"]):not([data-screen="finale"]) .scene{opacity:.5}
body[data-screen="viewer"] .scene{opacity:.28}
.hills{position:absolute;left:0;bottom:0;width:100%;height:calc(var(--ground) + 70px)}
.lighthouse{position:absolute;right:max(3%,calc(50% - 360px));bottom:calc(var(--ground) * .52);height:clamp(150px,27dvh,250px);aspect-ratio:1/2;overflow:visible}
.lighthouse .beam{transform-box:view-box;transform-origin:50px 62px;animation:sweep 16s linear infinite;will-change:transform,opacity}
.lamp-glow{animation:lamp 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes lamp{50%{opacity:.7;transform:scale(.92)}}
@keyframes sweep{
  0%{transform:scaleX(1);opacity:.9}
  12.5%{transform:scaleX(.7);opacity:.75}
  25%{transform:scaleX(.04);opacity:.15}
  37.5%{transform:scaleX(-.7);opacity:.75}
  50%{transform:scaleX(-1);opacity:.9}
  62.5%{transform:scaleX(-.7);opacity:.75}
  75%{transform:scaleX(-.04);opacity:.15}
  87.5%{transform:scaleX(.7);opacity:.75}
  100%{transform:scaleX(1);opacity:.9}
}
body[data-screen="finale"] .lighthouse .beam{animation-duration:11s}

/* ── animals ───────────────────────────────────────────── */
.herd{position:fixed;left:0;right:0;bottom:0;height:var(--ground);z-index:2;pointer-events:none}
.critter{position:absolute;left:0;bottom:0;width:54px;height:44px;pointer-events:auto;display:block;will-change:transform}
.critter::before{content:"";position:absolute;inset:-12px -8px -8px}
.critter .hop,.critter .flip,.critter .bob,.critter svg{display:block;width:100%;height:100%;overflow:visible}
.critter .flip{transition:transform .3s var(--ease)}
.critter.face-left .flip{transform:scaleX(-1)}
.critter.is-walking .bob{animation:bob .46s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-1.6px)}}
.leg{transform-box:fill-box;transform-origin:50% 0}
.critter.is-walking .l1,.critter.is-walking .l4{animation:leg .46s ease-in-out infinite alternate}
.critter.is-walking .l2,.critter.is-walking .l3{animation:leg .46s ease-in-out infinite alternate-reverse}
@keyframes leg{from{transform:rotate(-24deg)}to{transform:rotate(24deg)}}
.critter .hop{transform-origin:50% 100%}
.critter.is-jumping .hop{animation:hop .8s cubic-bezier(.3,.7,.4,1)}
@keyframes hop{
  0%{transform:translateY(0) scale(1,1)}
  14%{transform:translateY(0) scale(1.1,.86)}
  42%{transform:translateY(-36px) scale(.95,1.08) rotate(-6deg)}
  70%{transform:translateY(0) scale(1.08,.9) rotate(3deg)}
  84%{transform:translateY(-7px) scale(.99,1.02)}
  100%{transform:translateY(0) scale(1,1)}
}
.baa{position:absolute;left:50%;top:-6px;font-family:var(--mono);font-size:11px;color:rgba(241,239,236,.85);pointer-events:none;
  animation:baa 1.3s ease-out forwards;white-space:nowrap}
@keyframes baa{from{opacity:0;transform:translate(-50%,6px)}18%{opacity:1}to{opacity:0;transform:translate(-50%,-30px)}}
body:not([data-screen="home"]) .moon{opacity:.18}