/* Zirva – pass 8: learning path, lesson step, combo, unit done, welcome back, live quiz.
   Motion vocabulary stays the same: transform + opacity only, springs land once, nothing loops. */

/* ---------- page to page: the shell stays, the page slides in ---------- */
@view-transition{navigation:auto}
.tabbar{view-transition-name:tabbar}
.side{view-transition-name:side}
::view-transition-old(root){animation:vt-out 160ms var(--ease-out) both}
::view-transition-new(root){animation:vt-in 260ms var(--ease-out) both}
@keyframes vt-out{to{opacity:0;transform:translateX(-16px)}}
@keyframes vt-in{from{opacity:0;transform:translateX(24px)}}

/* active tab: icon lands with a small hop when the screen opens */
.tab.on i{animation:hop 420ms var(--ease-spring) 120ms both}
@keyframes hop{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-5px) scale(1.12)}100%{transform:none}}

/* answers press down like a key */
.ans{transition:transform 90ms ease,box-shadow 90ms ease}
.ans:active{transform:translateY(3px);box-shadow:inset 0 0 0 1.5px var(--color-border-strong),inset 0 -1px 0 #D6D0C3}

/* ---------- segmented step progress (lessons) ---------- */
.segp{flex:1;display:flex;gap:6px}
.segp i{flex:1;height:10px;border-radius:5px;background:var(--color-border);overflow:hidden;position:relative}
.segp i.on{background:var(--color-success)}
.segp i.now::after{content:"";position:absolute;inset:0;border-radius:5px;background:var(--color-success);transform-origin:left;animation:segfill 600ms var(--ease-out) 200ms both;transform:scaleX(.5)}
@keyframes segfill{from{transform:scaleX(0)}}

/* ---------- learning path ---------- */
.ph-h{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:24px;background:var(--g);color:#fff;box-shadow:inset 0 -5px 0 rgba(0,0,0,.18)}
.ph-h>div{flex:1;min-width:0}
.ph-h small{display:block;font:var(--type-label-sm);opacity:.85}
.ph-h h1{font:600 24px/30px var(--font-family-display);letter-spacing:-.015em;margin-top:2px}
.ph-h b{flex:none;font:600 15px/1 var(--font-family-display);padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.18)}
.path{display:flex;flex-direction:column;align-items:center;gap:20px;padding:34px 0 24px;height:auto}
.pn{--x:0px;position:relative;flex:none;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-size:30px;transform:translateX(var(--x));animation:pnin 460ms var(--ease-spring) var(--d,0ms) both;text-decoration:none}
@keyframes pnin{from{opacity:0;transform:translateX(var(--x)) translateY(10px) scale(.85)}}
.pn.done{background:var(--color-success);color:#fff;box-shadow:inset 0 -6px 0 rgba(0,0,0,.22)}
.pn.lock{background:var(--color-surface-sunken);color:var(--color-text-tertiary);box-shadow:inset 0 -6px 0 rgba(0,0,0,.07)}
.pn.test{border-radius:22px}
.pn.now{width:100px;height:100px;background:none}
.pn.now svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.pn.now circle{fill:none;stroke-width:7;stroke-linecap:round}
.pn.now .trk{stroke:var(--color-border)}
.pn.now .val{stroke:var(--g);stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--v));animation:gnfill 800ms var(--ease-out) 600ms both}
.pn-in{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:var(--g);color:#fff;font-size:34px;box-shadow:inset 0 -6px 0 rgba(0,0,0,.22);transition:transform 90ms ease,box-shadow 90ms ease}
.pn.now:active .pn-in{transform:translateY(3px);box-shadow:inset 0 -2px 0 rgba(0,0,0,.22)}
.pn-tip{position:absolute;bottom:calc(100% + 8px);left:50%;padding:10px 16px;border-radius:14px;background:var(--color-surface);box-shadow:inset 0 0 0 2px var(--color-border-strong),inset 0 -4px 0 var(--color-surface-sunken);font:600 16px/20px var(--font-family-ui);color:var(--g);white-space:nowrap;transform:translateX(-50%);animation:tip 560ms var(--ease-spring) 900ms both}
.pn-tip::after{content:"";position:absolute;left:50%;top:100%;width:12px;height:12px;margin:-7px 0 0 -6px;background:var(--color-surface);box-shadow:2px 2px 0 0 var(--color-border-strong);transform:rotate(45deg)}
@keyframes tip{from{opacity:0;transform:translateX(-50%) translateY(-12px) scale(.9)}}
.path-unit{display:flex;align-items:center;gap:12px;width:100%;max-width:420px;margin:10px 0 4px;font:var(--type-label-md);color:var(--color-text-secondary);animation:rise2 360ms var(--ease-out) var(--d,0ms) both}
.path-unit::before,.path-unit::after{content:"";flex:1;height:2px;border-radius:1px;background:var(--color-border)}
.gx-unit{display:flex;align-items:center;gap:14px;margin-top:10px;padding:14px 16px;border-radius:20px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border);color:var(--color-text);text-decoration:none}
.gx-unit .ic{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;background:var(--color-success);color:#fff;font-size:20px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.gx-unit>div{flex:1;min-width:0}
.gx-unit b{display:block;font:var(--type-label-lg)}
.gx-unit .bar{display:block;height:8px;margin-top:8px;border-radius:4px;background:var(--color-surface-sunken);overflow:hidden}
.gx-unit .bar i{display:block;height:100%;width:100%;border-radius:4px;background:var(--color-success);transform-origin:left;transform:scaleX(.6);animation:segfill 700ms var(--ease-out) 300ms both}
.gx-unit em{font:600 14px/1 var(--font-family-display);font-style:normal;color:var(--color-text-secondary)}

/* ---------- interactive lesson step (timeline) ---------- */
.tl{margin-top:36px;padding:28px 20px 18px;border-radius:24px;background:var(--color-surface);box-shadow:inset 0 0 0 1.5px var(--color-border-strong),inset 0 -5px 0 var(--color-surface-sunken)}
.tl-track{position:relative;height:96px}
.tl-axis{position:absolute;left:0;right:0;top:58px;height:4px;border-radius:2px;background:var(--color-border)}
.tl-bar{position:absolute;left:0;right:0;top:52px;height:16px;border-radius:8px;background:var(--group-cobalt);transform-origin:right;transform:scaleX(calc(1 - var(--p) / 100));transition:transform 160ms var(--ease-out)}
.tl-in .tl-bar{animation:tlgrow 700ms var(--ease-out) 300ms both}
@keyframes tlgrow{from{transform:scaleX(0)}}
.tl-mk{position:absolute;left:0;right:0;top:0;height:100%;transform:translateX(calc(var(--p) * 1%));transition:transform 160ms var(--ease-out);pointer-events:none}
.tl-mk>span{position:absolute;left:0;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;font:600 15px/18px var(--font-family-ui);color:var(--group-cobalt);white-space:nowrap}
.tl-mk>span::after{content:"";width:4px;height:28px;border-radius:2px;background:var(--group-cobalt)}
.tl-now{position:absolute;right:0;top:40px;transform:translateX(50%);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--color-text);color:var(--color-text-inverse);font-size:20px}
.tl-years{display:flex;justify-content:space-between;margin-top:4px;font:var(--type-caption);color:var(--color-text-secondary);font-variant-numeric:tabular-nums}
.tl-range{width:100%;margin-top:18px;height:44px;accent-color:var(--group-cobalt);cursor:grab}
.ls-say{margin-top:28px;font:500 22px/32px var(--font-family-ui);color:var(--color-text)}
.ls-say .s{color:var(--group-cobalt);font-weight:600}
.ls-say .f{color:var(--color-success);font-weight:600}
.ls-eq{margin-top:6px;font:var(--type-body-lg);color:var(--color-text-secondary)}
.ls-eq b{color:var(--color-success);font-weight:600}
.ls-say span,.ls-eq span{display:inline-block}
.bump{animation:bump 260ms var(--ease-spring)}
@keyframes bump{40%{transform:translateY(-3px) scale(1.08)}}

/* ---------- combo moment ---------- */
.cb-disc{width:132px;height:132px;border-radius:50%;display:grid;place-items:center;background:var(--color-success);color:#fff;box-shadow:inset 0 -8px 0 rgba(0,0,0,.2),0 0 0 10px var(--color-success-tint);animation:medal 700ms var(--ease-spring) 150ms both}
.cb-disc b{font:600 64px/1 var(--font-family-display);letter-spacing:-.03em}
.cb-dots{display:flex;gap:10px;margin-top:28px}
.cb-dots i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--color-success);color:#fff;font-size:18px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2);animation:pop 380ms var(--ease-spring) var(--d) both}

/* ---------- unit done ---------- */
.ud-seal{width:128px;height:128px;border-radius:36px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--color-success);color:#fff;box-shadow:inset 0 -8px 0 rgba(0,0,0,.2),0 0 0 10px var(--color-success-tint);animation:medal 700ms var(--ease-spring) 150ms both}
.ud-seal small{font:var(--type-label-sm);opacity:.85}
.ud-seal b{font:600 60px/1 var(--font-family-display);letter-spacing:-.03em}
.ud-track{position:relative;display:flex;justify-content:space-between;width:100%;max-width:300px;margin-top:30px}
.ud-line{position:absolute;left:14px;right:14px;top:13px;height:4px;border-radius:2px;background:var(--color-border)}
.ud-line i{position:absolute;inset:0;border-radius:2px;background:var(--color-success);transform-origin:left;animation:segfill 800ms var(--ease-out) 450ms both}
.ud-n{position:relative;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--color-success);color:#fff;font-size:15px;box-shadow:0 0 0 4px var(--color-canvas);animation:pop 360ms var(--ease-spring) var(--d) both}
.ud-n.star{background:var(--color-accent);color:var(--color-text)}

/* ---------- welcome back ---------- */
.wb-card{display:flex;align-items:center;gap:14px;width:100%;margin-top:28px;padding:16px;border-radius:20px;background:var(--color-surface);box-shadow:inset 0 0 0 1.5px var(--color-border-strong),inset 0 -4px 0 var(--color-surface-sunken);text-align:left}
.wb-card .ic{width:48px;height:48px;border-radius:14px;flex:none;display:grid;place-items:center;background:var(--color-accent);font-size:24px;color:var(--color-text)}
.wb-card b{display:block;font:600 17px/22px var(--font-family-ui)}
.wb-card small{font:var(--type-body-sm);color:var(--color-text-secondary)}

/* ---------- teacher: live quiz ---------- */
.lv-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.live{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;border-radius:999px;background:var(--color-danger-tint);color:var(--color-danger);font:var(--type-label-md);flex:none}
.live i{width:8px;height:8px;border-radius:50%;background:var(--color-danger)}
.lv-list{display:flex;flex-direction:column;gap:8px}
.lv{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:64px;padding:10px 14px;border-radius:16px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border)}
.lv .av{width:40px;height:40px}
.lv b{display:block;font:var(--type-label-lg)}
.lv-seg{display:flex;gap:3px;margin-top:8px}
.lv-seg i{flex:1;height:8px;border-radius:4px;background:var(--color-surface-sunken)}
.lv-seg i.y{background:var(--color-success);animation:segpop 300ms var(--ease-spring) both}
.lv-seg i.n{background:var(--color-surface);box-shadow:inset 0 0 0 2px var(--color-danger);animation:segpop 300ms var(--ease-spring) both}
@keyframes segpop{from{opacity:0;transform:scaleY(.3)}}
.lv-r{font:600 15px/1 var(--font-family-display);font-variant-numeric:tabular-nums;color:var(--color-text-secondary);display:flex;align-items:center;gap:6px}
.lv.fin .lv-r{color:var(--color-success)}
.lv.fin .lv-r i{font-size:20px;animation:pop 380ms var(--ease-spring) 900ms both}
.lv-foot{margin-top:24px}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .tab.on i,.segp i.now::after,.pn,.pn.now .val,.pn-tip,.path-unit,.gx-unit .bar i,.tl-in .tl-bar,.bump,.cb-disc,.cb-dots i,.ud-seal,.ud-line i,.ud-n,.lv-seg i.y,.lv-seg i.n,.lv.fin .lv-r i{animation:none}
  .tl-bar,.tl-mk{transition:none}
}

/* fixes after first look */
.pn.now{margin-top:40px}
.bdg b .cu,.bdg b .cu span{display:inline;padding:0;background:none;color:inherit;font:inherit}
.tl-mk em{font-style:normal}
.tl{overflow:hidden}
.tl-track,.tl-years{margin-right:20px}