/* Kobel One – Wimmelbild forest frame around the live image.
   Mobile-first. Everything is scaled by --s (design px -> screen px). Animations: transform/opacity only. */
.defs{position:absolute;width:0;height:0;overflow:hidden}
.stage{--s:.66;--pt:calc(124px*var(--s));--pb:calc(160px*var(--s));--side:20px;
  position:relative;max-width:1000px;margin:0 auto;padding:var(--pt) var(--side) var(--pb);border-radius:0 0 34px 34px;overflow:hidden;
  background:linear-gradient(#cfe8c4,#e9f3dc 50%,#d6e7c0);contain:layout paint;-webkit-tap-highlight-color:transparent}
.stage .sky{position:absolute;inset:0;background:radial-gradient(circle at 80% 8%,#fff8d8 0,#fff8d800 40%),radial-gradient(circle at 15% 60%,#ffffff40 0,#fff0 30%)}
.it{position:absolute;display:block;width:calc(var(--w)*var(--s)*1px);height:calc(var(--h)*var(--s)*1px);z-index:2}
.u{display:block;width:100%;height:100%;overflow:visible}
.u>svg{display:block;width:100%;height:100%}
[data-p]{cursor:inherit}
.stage .d{display:none}

/* bands & sides */
.band{position:absolute;left:0;right:0;pointer-events:none}
.band.top{top:0;height:var(--pt);z-index:3}
.band.bot{bottom:0;height:var(--pb);z-index:6}
.foliage,.floor{position:absolute;inset:0;width:100%;height:100%}
.side{position:absolute;top:0;bottom:0;width:var(--side);pointer-events:none}
.side.l{left:0;--tx:3px}.side.r{right:0;--tx:calc(100% - 15px)}
.side .trunk{position:absolute;top:0;bottom:0;left:var(--tx);width:12px;height:100%;z-index:1}
.stage [data-p]{pointer-events:auto}
.live{position:relative;z-index:5;margin:0 auto;width:100%;aspect-ratio:3/4;border-radius:28px;overflow:hidden;background:#1d2a22;
  border:5px solid var(--gold);box-shadow:0 0 0 2px #7a5636,0 8px 0 #2e6b30,0 14px 30px #0003}
.live img{display:block;width:100%;height:100%;object-fit:cover}
.badge{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:7px;background:#000a;color:#fff;font-weight:900;font-size:.9rem;padding:6px 12px;border-radius:999px;letter-spacing:.06em}
.badge .dot{width:11px;height:11px;border-radius:50%;background:#999}
.badge.on .dot{background:#ff3b30;animation:pulse 1.4s infinite}
.sleep{position:absolute;inset:auto 0 0 0;padding:18px 14px 22px;text-align:center;background:linear-gradient(#0000,#193527ee 40%)}
.sleep div{display:inline-block;background:var(--cream);color:var(--green);font-weight:900;font-size:1.25rem;padding:12px 20px;border-radius:999px;box-shadow:0 3px 0 var(--gold)}
.resume{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-height:56px;padding:0 24px;border:0;border-radius:999px;background:var(--gold);color:#fff;font-weight:900;font-size:1.1rem;font-family:inherit}
.hide{display:none!important}

/* Kobel boxes */
.kob{z-index:4}
.side.r .kobB{left:calc(var(--tx) - 64px);top:calc(-4px*var(--s))}
.kob .knoedel{transform-box:view-box;transform-origin:103px 86px;animation:sw 3.2s ease-in-out infinite alternate}
.kpeek{transform-box:view-box;animation:kpeek 9s ease-in-out infinite}
@keyframes kpeek{0%,30%,100%{transform:translateY(14px)}40%,80%{transform:translateY(0)}60%{transform:translateY(0) rotate(4deg)}}

/* idle motion (random delays via --d, speeds via --du) */
.sw{transform-origin:50% 100%;animation:sw var(--du,5s) ease-in-out var(--d,0s) infinite alternate}
.sw.hang{transform-origin:50% 0}
@keyframes sw{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
.tilt{animation:tilt 6s ease-in-out var(--d,0s) infinite}
@keyframes tilt{0%,70%,100%{transform:rotate(0)}76%,88%{transform:rotate(-10deg)}82%{transform:rotate(6deg)}}
.web{z-index:1}.webg{opacity:.75;animation:shim 6s ease-in-out infinite alternate}
@keyframes shim{from{opacity:.45}to{opacity:.9}}
.dangle{position:relative;width:100%;height:100%;animation:dangle 7s ease-in-out infinite}
.dangle .thread{position:absolute;left:50%;bottom:60%;width:1px;height:300px;background:#ffffffb0}
.spid{z-index:3}
@keyframes dangle{0%,100%{transform:translateY(0)}45%,60%{transform:translateY(calc(26px*var(--s)))}}
.peek{animation:peek 13s ease-in-out infinite}
@keyframes peek{0%,55%,100%{transform:translateY(70%)}62%,88%{transform:translateY(0)}75%{transform:translateY(0) rotate(-6deg)}}
.mpk{transform-box:view-box;animation:mpk 8s ease-in-out infinite}
@keyframes mpk{0%,35%,100%{transform:translateY(13px)}45%,85%{transform:translateY(0)}}
.thr{transform-box:fill-box;transform-origin:50% 50%;animation:thr 2.4s ease-in-out infinite}
@keyframes thr{0%,60%,100%{transform:scale(.6)}75%{transform:scale(1.25)}}
.blink-owl .lids,.lids{transform-box:fill-box;transform-origin:50% 0;animation:blink 5s infinite}
@keyframes blink{0%,90%,100%{transform:scaleY(0)}94%{transform:scaleY(1)}}
.peck{transform-box:fill-box;transform-origin:70% 80%;animation:peck 2.6s infinite}
@keyframes peck{0%,40%,100%{transform:rotate(0)}45%,55%,65%{transform:rotate(-14deg)}50%,60%{transform:rotate(0)}}

/* crawling bugs (horizontal) and climbing bugs (vertical) */
.crawl{animation:crawl var(--du,40s) linear var(--d,0s) infinite;z-index:3}
@keyframes crawl{0%{translate:0 0;opacity:0}6%,94%{opacity:1}100%{translate:calc(var(--dx)*1px*var(--s)) 0;opacity:0}}
.ants .u{animation:antw .3s steps(2) infinite}
@keyframes antw{to{transform:translateY(-.5px)}}
.vcrawl{z-index:2;animation:vcrawl var(--du,35s) linear var(--d,0s) infinite}
.vcrawl.down{animation-name:vcrawld}
@keyframes vcrawl{0%{transform:translateY(0);opacity:0}5%,92%{opacity:1}100%{transform:translateY(calc(-75vh));opacity:0}}
@keyframes vcrawld{0%{transform:translateY(0) rotate(90deg);opacity:0}5%,92%{opacity:1}100%{transform:translateY(60vh) rotate(90deg);opacity:0}}

/* walkers on the forest floor */
.walker{position:absolute;left:0;bottom:calc(10px*var(--s));width:100%;animation:walk linear infinite;z-index:3}
.walker>div{position:absolute;right:100%;bottom:0}
.walker svg{display:block;width:100%;height:auto}
.w-squirrel>div{width:calc(60px*var(--s))}.w-hedgehog>div{width:calc(54px*var(--s))}.w-rabbit>div{width:calc(46px*var(--s))}.w-fox>div{width:calc(86px*var(--s))}.w-robin>div{width:calc(28px*var(--s))}
.w-squirrel{animation-duration:12s;animation-delay:-2s}
.w-hedgehog{animation-duration:38s;animation-delay:-20s}
.w-rabbit{animation-duration:17s;animation-delay:-9s}
.w-fox{animation-duration:23s;animation-delay:-4s;animation-direction:reverse}
.w-robin{animation-duration:28s;animation-delay:-15s;bottom:calc(16px*var(--s))}
@keyframes walk{from{transform:translateX(0)}to{transform:translateX(calc(100% + 100px))}}
.hop{animation:hop .55s ease-in-out infinite}.hop.big{animation-duration:.8s}.hop.small{animation-duration:.4s}
@keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.waddle{animation:waddle .9s ease-in-out infinite}
@keyframes waddle{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) translateY(-1px)}}
.trot{animation:trot .5s ease-in-out infinite}
@keyframes trot{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.lg{transform-box:fill-box;transform-origin:50% 0;animation:leg .5s ease-in-out infinite}.lg.b{animation-delay:-.25s}
@keyframes leg{0%,100%{transform:rotate(18deg)}50%{transform:rotate(-18deg)}}

/* flyers: only inside the canopy band, the floor band or the side columns – never over the picture */
.flyers{position:absolute;inset:0;pointer-events:none;z-index:7}
.flyer{position:absolute;left:0;width:100%;animation:fly linear infinite}
.flyer svg{position:absolute;right:100%;width:calc(36px*var(--s))}
.f1{top:calc(8px*var(--s));animation-duration:13s;animation-delay:-3s}
.f2{top:calc(50px*var(--s));animation-duration:17s;animation-delay:-11s;animation-direction:reverse}
.f2 svg{transform:scaleX(-1)}
.f3{top:calc(28px*var(--s));animation-duration:23s;animation-delay:-7s}
@keyframes fly{0%{transform:translate(0,0)}25%{transform:translate(calc(25% + 10px),-6px)}50%{transform:translate(calc(50% + 20px),5px)}75%{transform:translate(calc(75% + 30px),-6px)}100%{transform:translate(calc(100% + 40px),0)}}
.fly .wg{transform-box:fill-box;transform-origin:85% 70%;animation:flap .22s ease-in-out infinite alternate}
@keyframes flap{from{transform:rotate(-55deg) scaleY(1.2)}to{transform:rotate(25deg) scaleY(.7)}}
.bf{position:absolute;width:calc(22px*var(--s));height:calc(18px*var(--s));animation:bfpath 18s ease-in-out infinite}
.flut{animation:flut var(--du,.26s) ease-in-out infinite alternate}
@keyframes flut{from{transform:scaleX(1)}to{transform:scaleX(.25)}}
.b1{left:22%;bottom:calc(70px*var(--s))}
.b2{left:70%;bottom:calc(60px*var(--s));animation-duration:23s;animation-delay:-8s;animation-direction:reverse}
.b3{left:4%;top:70%;animation-duration:20s;animation-delay:-5s}
@keyframes bfpath{0%,100%{transform:translate(0,0) rotate(-8deg)}20%{transform:translate(40px,-22px) rotate(10deg)}40%{transform:translate(70px,6px) rotate(-6deg)}55%{transform:translate(40px,-30px) rotate(14deg)}75%{transform:translate(-20px,-12px) rotate(-12deg)}}
.dfly{position:absolute;right:16%;bottom:calc(92px*var(--s));width:calc(34px*var(--s));height:calc(24px*var(--s));animation:dart 11s ease-in-out infinite}
@keyframes dart{0%,22%{transform:translate(0,0)}26%,48%{transform:translate(-60px,-14px) rotate(-8deg)}52%,70%{transform:translate(-20px,8px) rotate(4deg)}74%,96%{transform:translate(-90px,-4px)}100%{transform:translate(0,0)}}
.orb{position:absolute;width:0;height:0;animation:spin 5s linear infinite}
.orb>div{position:absolute;left:calc(14px*var(--s));top:0;width:calc(13px*var(--s));height:calc(10px*var(--s));animation:bob .4s ease-in-out infinite alternate}
.o1{left:33%;bottom:calc(46px*var(--s))}.o2{left:77%;bottom:calc(40px*var(--s));animation-duration:6.5s;animation-direction:reverse}.o3{left:10%;bottom:calc(50px*var(--s));animation-duration:4.2s}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{to{transform:translateY(-2px)}}
.leaf-fall{position:absolute;inset:0;animation:fall 12s linear infinite;opacity:0}
.leaf-fall.lf2{animation-duration:15s;animation-delay:-7s}
@keyframes fall{0%{transform:translate(0,0) rotate(0);opacity:0}8%,88%{opacity:1}50%{transform:translate(30px,30vh) rotate(200deg)}100%{transform:translate(-14px,62vh) rotate(380deg);opacity:0}}
.climber{width:100%;height:100%;animation:climb 10s ease-in-out infinite}
.climber .u{transform:rotate(-90deg)}
@keyframes climb{0%,100%{transform:translateY(0)}45%,55%{transform:translateY(-34vh)}}
.nutw{width:100%;height:100%;animation:ndown 16s ease-in-out infinite}
.nutw .u{transform:rotate(90deg)}
@keyframes ndown{0%{transform:translateY(0)}10%,18%{transform:translateY(20px)}28%,36%{transform:translateY(46px)}46%,54%{transform:translateY(80px)}64%,72%{transform:translateY(104px)}90%{transform:translateY(130px);opacity:1}95%{opacity:0;transform:translateY(130px)}96%{transform:translateY(0)}100%{opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* tap / hover toys: a tap makes the animal hop, wiggle, spin or pop */
.pk[data-p=hop]{animation:pkhop .6s cubic-bezier(.3,1.6,.5,1)!important}
.pk[data-p=wig]{animation:pkwig .6s ease-in-out!important}
.pk[data-p=spin]{animation:pkspin .7s ease-in-out!important}
.pk[data-p=pop]{animation:pkpop .5s ease-out!important}
@media (hover:hover){.stage [data-p]:hover:not(.pk){animation:pkwig .7s ease-in-out}}
@keyframes pkhop{0%,100%{transform:translateY(0) scale(1)}15%{transform:translateY(0) scale(1.1,.85)}50%{transform:translateY(-35%) scale(.95,1.08)}}
@keyframes pkwig{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}}
@keyframes pkspin{to{transform:rotate(360deg)}}
@keyframes pkpop{0%,100%{transform:scale(1)}40%{transform:scale(1.25)}}

/* phones: hide the desktop-only extras, keep the mobile-only ones */
.stage .m{display:block}
@media(min-width:600px){
  .stage{--s:1;--side:24px;border-radius:0 0 48px 48px}
  .stage .d{display:block}.stage .m{display:none}
  .live{width:min(100%,46vh);border-width:7px;border-radius:36px}
  .side{width:calc((100% - min(100% - 48px,46vh))/2)}
  .side.l{--tx:16%}.side.r{--tx:calc(84% - 44px)}
  .side .trunk{width:44px}
  .side.r .kobB{left:calc(var(--tx) - 92px);top:12%}
  .live:not(:hover){}
}
@media (prefers-reduced-motion: reduce){
  .stage *,.badge .dot{animation:none!important}
  .walker{transform:translateX(30%)}.w-hedgehog{transform:translateX(70%)}.w-rabbit{transform:translateX(52%)}.w-fox{transform:translateX(95%)}.w-robin{transform:translateX(15%)}
  .flyer{transform:translateX(40%)}.f2{transform:translateX(75%)}
  .leaf-fall,.vcrawl{display:none}.peek{transform:none}.mpk,.kpeek{transform:none}
  .crawl{opacity:1}
}
/* stop everything while the forest is scrolled out of view (battery) */
.stage.zz *{animation-play-state:paused!important}
.side .vine{position:absolute;top:0;bottom:0;left:calc(var(--tx) + 1px);width:10px;height:100%;z-index:1;opacity:.85}
@media (min-width:600px){.side .vine{left:calc(var(--tx) + 12px);width:20px}}