/* Kako deluje: naslovna slika kot pot "koledar -> današnji korak -> napredek" okoli Znamka (2026-11-09) */
.how-page .how-orbit{display:none}
.how-hero-art:before{left:44%;top:6%}
.hf{position:absolute;inset:0;z-index:2;pointer-events:none;--c:10s}
.hf-path{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0}
.hf-path path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.hf-path .base{stroke:#ffffffb3;stroke-width:2.5;stroke-dasharray:2 9}
.hf-path .run{stroke:#fff27a;stroke-width:5;stroke-dasharray:9 120;stroke-dashoffset:9;filter:drop-shadow(0 0 6px #fff27a)}
.hf-path .r1{animation:hfRun1 var(--c) linear infinite}
.hf-path .r2{animation:hfRun2 var(--c) linear infinite}
@keyframes hfRun1{0%,9%{stroke-dashoffset:9;opacity:0}10%{opacity:1}24%{stroke-dashoffset:-100;opacity:1}25%,100%{stroke-dashoffset:-100;opacity:0}}
@keyframes hfRun2{0%,50%{stroke-dashoffset:9;opacity:0}51%{opacity:1}65%{stroke-dashoffset:-100;opacity:1}66%,100%{stroke-dashoffset:-100;opacity:0}}

.hf-card{position:absolute;z-index:3;width:206px;padding:13px 14px 14px;border-radius:18px;background:#fffffff2;color:#2e2645;box-shadow:0 16px 38px #2f19523a;font-family:inherit;scale:1;opacity:1;animation:hfIn .7s cubic-bezier(.2,1.4,.4,1) both,hfFloat 5.4s ease-in-out infinite}
.hf-card:after{content:"";position:absolute;inset:-3px;border-radius:21px;border:3px solid #fff27a;opacity:0;pointer-events:none}
.hf-card>i{position:absolute;top:-11px;left:-11px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#7042ef;color:#fff;font-style:normal;font-size:13px;font-weight:900;box-shadow:0 5px 12px #4a23a855;border:2px solid #fff}
.hf-card>b{display:block;font-size:14px;font-weight:850;letter-spacing:-.01em;color:#2e2645}
.hf-card>small{display:block;margin-top:1px;font-size:10px;color:#7d7590}
.hf-cal{left:1%;top:15%;--r:-4deg;animation-delay:.25s,1s}
.hf-task{left:0;bottom:11%;--r:3deg;animation-delay:.5s,1.6s}
.hf-prog{right:5%;bottom:29%;--r:-3deg;animation-delay:.75s,.4s}
.hf-cal:after{animation:hfGlowA var(--c) ease-in-out infinite}
.hf-task:after{animation:hfGlowB var(--c) ease-in-out infinite}
.hf-prog:after{animation:hfGlowC var(--c) ease-in-out infinite}
@keyframes hfIn{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
@keyframes hfFloat{0%,100%{transform:translateY(0) rotate(var(--r))}50%{transform:translateY(-8px) rotate(calc(var(--r)*.5))}}
@keyframes hfGlowA{0%,1%{opacity:0}4%,10%{opacity:1}16%,100%{opacity:0}}
@keyframes hfGlowB{0%,24%{opacity:0}27%,48%{opacity:1}53%,100%{opacity:0}}
@keyframes hfGlowC{0%,65%{opacity:0}68%,88%{opacity:1}94%,100%{opacity:0}}

/* 1 koledar */
.hf-week{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:9px}
.hf-week span{display:grid;place-items:center;height:34px;border-radius:9px;background:#f2edff;color:#6d6386;font-size:9px;font-weight:800}
.hf-week span.on{position:relative;background:#7042ef;color:#fff;animation:hfDay var(--c) ease-in-out infinite}
.hf-week span em{position:absolute;bottom:-9px;left:50%;translate:-50% 0;padding:2px 5px;border-radius:6px;background:#ffd84d;color:#3b2764;font-size:7.5px;font-style:normal;font-weight:900;white-space:nowrap}
@keyframes hfDay{0%,2%{scale:1}5%{scale:1.16}8%,100%{scale:1}}

/* 2 današnji korak */
.hf-task ul{list-style:none;margin:9px 0 0;padding:0;display:grid;gap:6px}
.hf-task li{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;color:#4b4360}
.hf-task li:before{content:"";flex:0 0 auto;width:16px;height:16px;border-radius:50%;border:2px solid #d9d0ec;background:#fff center/10px no-repeat}
.hf-task li:after{content:"";position:absolute}
.hf-task li:nth-child(1):before{animation:hfTick1 var(--c) step-end infinite}
.hf-task li:nth-child(2):before{animation:hfTick2 var(--c) step-end infinite}
.hf-task li:nth-child(3):before{animation:hfTick3 var(--c) step-end infinite}
.hf-task li:nth-child(1){animation:hfPop1 var(--c) ease-out infinite}
.hf-task li:nth-child(2){animation:hfPop2 var(--c) ease-out infinite}
.hf-task li:nth-child(3){animation:hfPop3 var(--c) ease-out infinite}
@keyframes hfTick1{0%{border-color:#d9d0ec;background-color:#fff;background-image:none}29%,100%{border-color:#2b9f7b;background-color:#2b9f7b;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}96%{border-color:#d9d0ec;background-color:#fff;background-image:none}}
@keyframes hfTick2{0%{border-color:#d9d0ec;background-color:#fff;background-image:none}37%,100%{border-color:#2b9f7b;background-color:#2b9f7b;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}96%{border-color:#d9d0ec;background-color:#fff;background-image:none}}
@keyframes hfTick3{0%{border-color:#d9d0ec;background-color:#fff;background-image:none}45%,100%{border-color:#2b9f7b;background-color:#2b9f7b;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}96%{border-color:#d9d0ec;background-color:#fff;background-image:none}}
@keyframes hfPop1{0%,28%{translate:0}30%{translate:4px}33%,100%{translate:0}}
@keyframes hfPop2{0%,36%{translate:0}38%{translate:4px}41%,100%{translate:0}}
@keyframes hfPop3{0%,44%{translate:0}46%{translate:4px}49%,100%{translate:0}}

/* 3 napredek */
.hf-bars{display:grid;gap:7px;margin-top:10px}
.hf-bars span{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:7px;font-size:9.5px;font-weight:750;color:#4b4360}
.hf-bars u{position:relative;display:block;height:8px;border-radius:9px;background:#eee8f8;overflow:hidden;text-decoration:none}
.hf-bars u:before{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:9px;background:linear-gradient(90deg,#7042ef,#b26af0);transform-origin:left;animation:hfBar var(--c) cubic-bezier(.3,.8,.3,1) infinite}
.hf-bars span:nth-child(1) u:before{background:linear-gradient(90deg,#2b9f7b,#5fd0a5)}
.hf-bars span:nth-child(3) u:before{background:linear-gradient(90deg,#e59a16,#ffd84d)}
@keyframes hfBar{0%,66%{transform:scaleX(.42)}82%,94%{transform:scaleX(1)}100%{transform:scaleX(.42)}}
.hf-star{position:absolute;right:12px;top:11px;font-size:15px;color:#ffc31f;opacity:0;animation:hfStar var(--c) ease-out infinite}
@keyframes hfStar{0%,80%{opacity:0;scale:.3;rotate:-30deg}84%{opacity:1;scale:1.25;rotate:10deg}88%,93%{opacity:1;scale:1;rotate:0deg}98%,100%{opacity:0;scale:.6}}

@media(max-width:1250px){.hf-card{width:180px;padding:11px 12px 12px}.hf-cal{left:-2%}.hf-task{left:-3%}.hf-prog{right:4%}.hf-week span{height:30px}}
@media(max-width:1050px){.hf-card{width:156px}.hf-card>small{display:none}.hf-cal{top:12%}.hf-prog{bottom:34%}.hf-task li{font-size:9.5px}.hf-bars span{grid-template-columns:44px 1fr;font-size:8.5px}}
@media(max-width:760px){.hf{display:none}}
@media(prefers-reduced-motion:reduce){.hf *,.hf *:before,.hf *:after,.hf-card,.hf-path path{animation:none!important}.hf-path .run{display:none}.hf-bars u:before{transform:none}.hf-task li:before{border-color:#2b9f7b;background:#2b9f7b}}

/* zaslon za Znamkom: učilnica <-> igra (2026-11-09 b) */
.hs{position:absolute;z-index:0;left:3%;top:31%;width:66%;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 26px 60px #2a124f55,0 0 0 6px #ffffff2e;transform:perspective(1100px) rotateY(18deg) rotate(-3deg);transform-origin:left center;animation:hsIn .9s cubic-bezier(.2,1,.3,1) .1s both}
.hs-bar{position:relative;display:flex;align-items:center;gap:5px;height:24px;padding:0 10px;background:#f3effb;border-bottom:1px solid #e6def3}
.hs-bar i{width:7px;height:7px;border-radius:50%;background:#d8cdea}
.hs-bar i:nth-child(1){background:#ff8a7a}.hs-bar i:nth-child(2){background:#ffd166}.hs-bar i:nth-child(3){background:#6fd3a0}
.hs-bar b{position:absolute;left:44px;font-size:9.5px;font-weight:850;color:#5d39bd;letter-spacing:.01em}
.hs-view{position:relative;aspect-ratio:760/352}
.hs-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hs-b,.hs-l2{animation:hsSwapB var(--c,10s) ease-in-out infinite}
.hs-a,.hs-l1{animation:hsSwapA var(--c,10s) ease-in-out infinite}
.hs-b{animation-name:hsSwapB,hsZoom}
@keyframes hsIn{from{opacity:0;translate:-40px 20px}to{opacity:1;translate:0 0}}
@keyframes hsSwapA{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}
@keyframes hsSwapB{0%,45%{opacity:0}50%,95%{opacity:1}100%{opacity:0}}
@keyframes hsZoom{0%,45%{scale:1}95%{scale:1.04}100%{scale:1}}
.hf{--c:10s}
@media(max-width:1250px){.hs{left:0;width:70%}}
@media(max-width:1050px){.hs{top:30%;width:76%;left:-4%}.hs-bar b{font-size:8px}}
@media(max-width:760px){.hs{display:none}}
@media(prefers-reduced-motion:reduce){.hs,.hs *{animation:none!important}.hs-b,.hs-l2{opacity:0}}