/* Animacije nalaganja učilnice: meni, pozdrav, beli okvirji, pasica igre Znamko svet.
   Vse je samo vizualno; ob prefers-reduced-motion ali umirjenem načinu (body.calm) se nič ne premika. */

/* ---------- okostje med nalaganjem ---------- */
.jz-skel{display:flex;flex-direction:column;gap:18px;padding:6px 0 30px}
.jz-skel[hidden]{display:none}
.jz-skel i{display:block;border-radius:30px;background:#ece6f7;position:relative;overflow:hidden}
.jz-skel i:after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,#ffffffb3,transparent);animation:jz-shimmer 1.3s ease-in-out infinite}
.jz-skel .s-hero{height:190px;border-radius:36px;background:linear-gradient(115deg,#d9ccfb,#ecd3f1)}
.jz-skel .s-row{display:flex;gap:18px}
.jz-skel .s-row i{height:210px;flex:2}.jz-skel .s-row i+i{flex:1}
.jz-skel .s-wide{height:120px}
.jz-skel-txt{text-align:center;color:var(--muted,#7b718b);font-weight:800;margin:0}
@keyframes jz-shimmer{to{transform:translateX(100%)}}
@media(max-width:700px){.jz-skel .s-row{flex-direction:column}.jz-skel .s-row i{height:150px}}

/* ---------- meni ---------- */
.jz-anim .top>.menu a.jz-menu-in{animation:jz-menu-drop .55s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(var(--i,0)*55ms)}
@keyframes jz-menu-drop{from{opacity:0;transform:translateY(-18px) scale(.85)}to{opacity:1;transform:none}}
.top>.menu{position:relative}
.jz-pill{position:absolute;z-index:0;border-radius:999px;background:linear-gradient(180deg,#8857fa,#6e3be8);box-shadow:0 4px 0 #4f27c4;pointer-events:none;transition:left .38s cubic-bezier(.3,1.3,.5,1),width .38s cubic-bezier(.3,1.3,.5,1),opacity .2s .3s}
.top>.menu a{position:relative;z-index:1}
.jz-anim .top>.menu a.jz-pop{animation:jz-pop .42s cubic-bezier(.2,1.6,.4,1)}
@keyframes jz-pop{0%{transform:scale(.9)}60%{transform:scale(1.08)}100%{transform:none}}

/* ---------- pozdrav »Živjo« ---------- */
.jz-anim .hero.jz-in{animation:jz-hero-in .6s cubic-bezier(.2,1.1,.3,1) both}
@keyframes jz-hero-in{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.jz-anim .hero.jz-in .hero-mascot{animation:jz-mascot-in .9s cubic-bezier(.2,1.5,.4,1) .15s both}
@keyframes jz-mascot-in{0%{opacity:0;transform:translate(-60px,40px) rotate(-25deg) scale(.6)}70%{opacity:1;transform:translate(4px,-6px) rotate(6deg) scale(1.05)}100%{transform:none}}
.hero h1 .jz-ch{display:inline-block;white-space:pre}
.jz-anim .hero.jz-in h1 .jz-ch{animation:jz-letter .5s cubic-bezier(.2,1.8,.4,1) both;animation-delay:calc(.25s + var(--i)*38ms)}
@keyframes jz-letter{0%{opacity:0;transform:translateY(24px) scale(.6)}60%{opacity:1;transform:translateY(-7px) scale(1.12)}100%{transform:none}}
.jz-anim .hero.jz-in .hero-text p{animation:jz-fade-up .5s ease .7s both}
.jz-anim .hero.jz-in .hero-text .btn{animation:jz-fade-up .5s cubic-bezier(.2,1.5,.4,1) .85s both}
.jz-anim .hero.jz-in .ring{animation:jz-ring-in .7s cubic-bezier(.2,1.5,.4,1) .3s both}
@keyframes jz-ring-in{from{opacity:0;transform:scale(.5) rotate(-40deg)}to{opacity:1;transform:none}}
.hero .ring .arc.jz-fill{transition:stroke-dashoffset 1.4s cubic-bezier(.3,.9,.3,1) .5s}
@keyframes jz-fade-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- beli okvirji ---------- */
.jz-anim .jz-rise{opacity:0;transform:translateY(34px) scale(.98)}
.jz-anim .jz-rise.jz-on{opacity:1;transform:none;transition:opacity .5s ease,transform .65s cubic-bezier(.2,1.25,.35,1);transition-delay:calc(var(--d,0)*90ms)}
.jz-anim .jz-rise.jz-on .mission,.jz-anim .jz-rise.jz-on .stop,.jz-anim .jz-rise.jz-on .day,.jz-anim .jz-rise.jz-on .plant,.jz-anim .jz-rise.jz-on .module{animation:jz-fade-up .45s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(var(--d,0)*90ms + .2s + var(--k,0)*60ms)}

/* ---------- igra Znamko svet ---------- */
.world-banner.jz-wb{background-image:none!important}
.world-banner .jz-wb-bg{position:absolute;inset:0;z-index:-2;background:inherit;background-image:var(--wb-img);border-radius:inherit}
.jz-anim .world-banner.jz-wb-go .jz-wb-bg{animation:jz-island 1.6s cubic-bezier(.2,.9,.25,1) both}
@keyframes jz-island{from{transform:scale(1.25) translateY(40px);filter:saturate(.6) brightness(1.15)}to{transform:none;filter:none}}
.jz-cloud{position:absolute;z-index:3;top:-15%;bottom:-15%;width:70%;pointer-events:none}
.jz-cloud b{position:absolute;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff 0 55%,#eaf6ff 100%);box-shadow:0 10px 24px #4f9cc455}
.jz-cloud.l{left:-12%}.jz-cloud.r{right:-12%;transform:scaleX(-1)}
.jz-anim .world-banner.jz-wb-go .jz-cloud.l{animation:jz-cloud-l 1.3s cubic-bezier(.6,0,.3,1) .25s both}
.jz-anim .world-banner.jz-wb-go .jz-cloud.r{animation:jz-cloud-r 1.3s cubic-bezier(.6,0,.3,1) .25s both}
@keyframes jz-cloud-l{to{transform:translateX(-115%) scale(1.3);opacity:0}}
@keyframes jz-cloud-r{to{transform:scaleX(-1) translateX(-115%) scale(1.3);opacity:0}}
.jz-anim .world-banner.jz-wb-go .world-banner-tag{animation:jz-fade-up .5s ease .9s both}
.jz-anim .world-banner.jz-wb-go h2{animation:jz-title-slam .7s cubic-bezier(.2,1.6,.4,1) 1s both}
@keyframes jz-title-slam{0%{opacity:0;transform:scale(1.8) rotate(-4deg)}60%{opacity:1;transform:scale(.95)}100%{transform:none}}
.jz-anim .world-banner.jz-wb-go p,.jz-anim .world-banner.jz-wb-go small{animation:jz-fade-up .5s ease 1.2s both}
.jz-anim .world-banner.jz-wb-go .btn{animation:jz-fade-up .5s cubic-bezier(.2,1.5,.4,1) 1.3s both}
.jz-anim .world-banner.jz-wb-go .world-banner-mascot{animation:jz-owl-jump 1s cubic-bezier(.2,1.4,.4,1) 1.1s both}
@keyframes jz-owl-jump{0%{opacity:0;transform:translateY(120%) rotate(6deg)}60%{opacity:1;transform:translateY(-14%) rotate(-4deg)}100%{transform:rotate(6deg)}}
.jz-anim .world-banner.jz-wb-go .world-banner-label{animation:jz-label .6s cubic-bezier(.2,1.8,.4,1) 1.7s both}
@keyframes jz-label{from{opacity:0;transform:rotate(-4deg) scale(.3)}to{opacity:1;transform:rotate(-4deg)}}
.world-banner .btn{position:relative;overflow:hidden}
.world-banner .btn:after{content:'';position:absolute;top:-20%;bottom:-20%;width:40%;left:-60%;background:linear-gradient(100deg,transparent,#ffffffd9,transparent);transform:skewX(-20deg)}
.jz-anim .world-banner.jz-wb-go .btn:after{animation:jz-shine 5s ease-in-out 2s infinite}
@keyframes jz-shine{0%{left:-60%}18%,100%{left:130%}}
.jz-coin{position:absolute;z-index:2;width:22px;height:22px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 35% 30%,#fff6c2 0 18%,#ffd23f 19% 62%,#e0a800 63%);box-shadow:0 0 0 2px #fff3 inset,0 0 12px #ffe08599}
.jz-anim .world-banner.jz-wb-go .jz-coin{animation:jz-coin 1.5s cubic-bezier(.2,.8,.4,1) both;animation-delay:calc(1.2s + var(--i)*90ms)}
@keyframes jz-coin{0%{opacity:0;transform:translate(0,0) scale(.3) rotateY(0)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1) rotateY(720deg)}}
.jz-spark{position:absolute;z-index:2;width:10px;height:10px;pointer-events:none;opacity:0;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.jz-anim .world-banner.jz-wb-go .jz-spark{animation:jz-spark 2.4s ease-in-out infinite;animation-delay:calc(1.6s + var(--i)*.45s)}
@keyframes jz-spark{0%,100%{opacity:0;transform:scale(.2) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(90deg)}}

@media(prefers-reduced-motion:reduce){.jz-skel i:after{animation:none}.jz-cloud,.jz-coin,.jz-spark,.jz-pill{display:none}}
body.calm .jz-cloud,body.calm .jz-coin,body.calm .jz-spark{display:none}