/* ---------- likovi sa strane: male zgode u praznom prostoru lijevo i desno od sadržaja ---------- */
.side { position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.side.off { display: none; }
.sc { position: absolute; width: 200px; height: 200px; margin: -100px 0 0 -100px; transform: scale(var(--u, 1)); }
.sc .a, .sc .bub, .sc .tap { pointer-events: auto; }
.sc .a { position: absolute; display: block; }
.sc .a > .bub { width: 100%; height: 100%; }
.sc svg { position: absolute; overflow: visible; }
.sc * { animation-play-state: paused !important; }
.sc.run * { animation-play-state: running !important; }
.sc .bub { cursor: pointer; }

/* spajanje: dva ista se približe i postanu veći */
.mg .a1, .mg .a2 { width: 54px; height: 54px; top: 112px; }
.mg .a1 { left: 18px; animation: mgA 5.2s var(--spring) infinite; }
.mg .a2 { left: 128px; animation: mgB 5.2s var(--spring) infinite; }
.mg .a3 { width: 74px; height: 74px; left: 63px; top: 92px; animation: mgC 5.2s var(--spring) infinite; }
.mg .sp { position: absolute; left: 92px; top: 120px; width: 16px; height: 16px; animation: mgS 5.2s ease-out infinite; }
.mg .sp:nth-of-type(2) { --dx: -58px; --dy: -46px; } .mg .sp:nth-of-type(3) { --dx: 56px; --dy: -50px; }
.mg .sp:nth-of-type(4) { --dx: -52px; --dy: 30px; } .mg .sp:nth-of-type(5) { --dx: 60px; --dy: 26px; }
@keyframes mgA { 0% { transform: scale(0); } 8%, 16% { transform: translateX(0) scale(1); } 40% { transform: translateX(46px) scale(1); } 44%, 100% { transform: translateX(46px) scale(0); } }
@keyframes mgB { 0% { transform: scale(0); } 8%, 16% { transform: translateX(0) scale(1); } 40% { transform: translateX(-46px) scale(1); } 44%, 100% { transform: translateX(-46px) scale(0); } }
@keyframes mgC { 0%, 42% { transform: scale(0); } 52% { transform: scale(1.18, .86); } 58% { transform: scale(.94, 1.08); } 64%, 86% { transform: scale(1); } 94%, 100% { transform: scale(0); } }
@keyframes mgS { 0%, 43% { transform: scale(0); opacity: 0; } 48% { transform: scale(1); opacity: 1; } 66%, 100% { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; } }

/* spavalica: diše polako, iznad nje plove z */
.zz .a1 { width: 72px; height: 72px; left: 64px; top: 108px; transform-origin: 50% 100%; animation: zzB 3.8s ease-in-out infinite; }
.zz .a1 .face b { transform: scaleY(.14) !important; }
.zz .z { left: 118px; top: 92px; width: 18px; height: 18px; opacity: 0; animation: zzZ 3.6s linear infinite; }
.zz .z:nth-of-type(3) { animation-delay: -1.2s; } .zz .z:nth-of-type(4) { animation-delay: -2.4s; }
.zz .moon { left: 30px; top: 34px; width: 34px; height: 34px; }
.zz.awake .a1 { animation: zzHop .7s var(--spring); }
.zz.awake .a1 .face b { transform: none !important; }
.zz.awake .z { display: none; }
@keyframes zzB { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.04, .96); } }
@keyframes zzZ { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(34px, -70px) scale(1.15); opacity: 0; } }
@keyframes zzHop { 30% { transform: translateY(-26px) scale(.94, 1.06); } 60% { transform: translateY(0) scale(1.06, .94); } 100% { transform: none; } }

/* balon: lik visi s balona; dodir na balon ga probuši */
.bl .g { position: absolute; left: 0; top: 0; width: 200px; height: 200px; animation: blF 4.4s ease-in-out infinite; transform-origin: 100px 40px; }
.bl .ball { left: 72px; top: 8px; width: 56px; height: 72px; pointer-events: auto; cursor: pointer; }
.bl .a1 { width: 54px; height: 54px; left: 73px; top: 116px; }
.bl .pop { left: 70px; top: 8px; width: 60px; height: 60px; display: none; }
.bl.popped .ball, .bl.popped .str { display: none; }
.bl.popped .pop { display: block; animation: blP .4s ease-out forwards; }
.bl.popped .a1 { animation: blDrop .9s cubic-bezier(.5, 0, .6, 1.4) forwards; }
.bl.popped .g { animation: none; }
@keyframes blF { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(4deg); } }
@keyframes blP { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
@keyframes blDrop { to { transform: translateY(26px); } }

/* klackalica */
.ss .plank { position: absolute; left: 14px; top: 150px; width: 172px; height: 10px; background: #e3b27a; border: 3px solid var(--ink); border-radius: 6px; transform-origin: 50% 50%; animation: ssR 3.2s ease-in-out infinite alternate; }
.ss .plank .a { width: 46px; height: 46px; top: -46px; }
.ss .plank .a1 { left: 2px; } .ss .plank .a2 { right: 2px; }
.ss .piv { left: 84px; top: 158px; width: 32px; height: 30px; }
@keyframes ssR { from { transform: rotate(-13deg); } to { transform: rotate(13deg); } }

/* toranj: tri lika padnu jedan na drugog */
.st .a { left: 50%; animation: stD 6s var(--spring) infinite; }
.st .a1 { width: 62px; height: 62px; margin-left: -31px; top: 132px; }
.st .a2 { width: 50px; height: 50px; margin-left: -25px; top: 85px; animation-delay: .5s; }
.st .a3 { width: 40px; height: 40px; margin-left: -20px; top: 48px; animation-delay: 1s; }
@keyframes stD { 0% { transform: translateY(-260px); opacity: 0; } 4% { opacity: 1; } 14% { transform: translateY(0) scale(1.1, .9); } 18% { transform: scale(.96, 1.04); } 22%, 78% { transform: none; opacity: 1; } 88%, 100% { transform: translateY(8px) scale(.7); opacity: 0; } }

/* skrivač: mačka proviri iza brežuljka */
.sc.pk { overflow: hidden; }
.pk .a1 { width: 70px; height: 70px; left: 65px; top: 104px; animation: pkP 5.6s var(--spring) infinite; }
.pk .hill { left: 0; top: 130px; width: 200px; height: 70px; }
@keyframes pkP { 0%, 12% { transform: translateY(72px); } 24%, 62% { transform: translateY(0); } 34% { transform: translateY(0) rotate(-10deg); } 46% { transform: translateY(0) rotate(10deg); } 56% { transform: none; } 74%, 100% { transform: translateY(72px); } }

/* loptica preko glave */
.bb .a1 { width: 60px; height: 60px; left: 70px; top: 128px; animation: bbH 1.2s ease-in-out infinite; transform-origin: 50% 100%; }
.bb .bx { position: absolute; left: 44px; top: 0; width: 24px; height: 24px; animation: bbX 2.4s ease-in-out infinite alternate; }
.bb .by { position: absolute; left: 0; top: 104px; width: 24px; height: 24px; animation: bbY 1.2s ease-out infinite alternate; }
@keyframes bbH { 0%, 100% { transform: scale(1.06, .94); } 50% { transform: translateY(-6px); } }
@keyframes bbX { from { transform: translateX(0); } to { transform: translateX(88px); } }
@keyframes bbY { from { transform: translateY(0); } to { transform: translateY(-84px); } }

/* ljuljačka */
.sw .g { position: absolute; left: 0; top: 0; width: 200px; height: 200px; transform-origin: 100px 18px; animation: swR 2.8s ease-in-out infinite alternate; }
.sw .branch { left: 6px; top: 6px; width: 188px; height: 26px; }
.sw .ropes { left: 60px; top: 18px; width: 80px; height: 150px; }
.sw .a1 { width: 54px; height: 54px; left: 73px; top: 112px; }
@keyframes swR { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }

/* šetnja: mačka ide tamo-amo po travi */
.wk .gr { left: 0; top: 168px; width: 200px; height: 20px; }
.wk .w { position: absolute; left: 14px; top: 112px; width: 58px; height: 58px; animation: wkX 9s linear infinite; }
.wk .a1 { width: 58px; height: 58px; left: 0; top: 0; animation: wkB .6s ease-in-out infinite alternate; }
@keyframes wkX { 0% { transform: translateX(0) scaleX(1); } 44% { transform: translateX(114px) scaleX(1); } 50% { transform: translateX(114px) scaleX(-1); } 94% { transform: translateX(0) scaleX(-1); } 100% { transform: translateX(0) scaleX(1); } }
@keyframes wkB { from { transform: translateY(0); } to { transform: translateY(-7px); } }

/* kiša: oblačić zalijeva klicu dok ne postane cvijet */
.rn .cloud { left: 40px; top: 6px; width: 120px; height: 56px; animation: rnC 7s ease-in-out infinite; }
.rn .d { left: 80px; top: 58px; width: 10px; height: 14px; opacity: 0; animation: rnD 1s linear infinite; }
.rn .d:nth-of-type(3) { left: 100px; animation-delay: -.35s; } .rn .d:nth-of-type(4) { left: 118px; animation-delay: -.7s; }
.rn .a1 { width: 54px; height: 54px; left: 73px; top: 136px; animation: rnA 7s var(--spring) infinite; }
.rn .a2 { width: 70px; height: 70px; left: 65px; top: 120px; animation: rnB 7s var(--spring) infinite; }
@keyframes rnD { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(66px); opacity: 0; } }
@keyframes rnA { 0%, 50% { transform: scale(1); } 56%, 92% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes rnB { 0%, 52% { transform: scale(0); } 62% { transform: scale(1.15, .88); } 68%, 88% { transform: scale(1); } 94%, 100% { transform: scale(0); } }
@keyframes rnC { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
.rn:not(.run) .d { display: none; }

/* avion od papira s putnikom */
.pl .px { position: absolute; left: 10px; top: 0; width: 70px; height: 50px; animation: plX 3.6s ease-in-out infinite alternate; }
.pl .py { position: absolute; left: 0; top: 40px; width: 70px; height: 50px; animation: plY 2.3s ease-in-out infinite alternate; }
.pl .plane { left: 0; top: 18px; width: 70px; height: 34px; }
.pl .a1 { width: 30px; height: 30px; left: 22px; top: -4px; }
@keyframes plX { from { transform: translateX(0) rotate(-6deg); } to { transform: translateX(110px) rotate(6deg); } }
@keyframes plY { from { transform: translateY(0); } to { transform: translateY(90px); } }

@media (prefers-reduced-motion: reduce) { .side { display: none; } }