/* ============================================================================
   TESTKAV SKILLS — HOME STATS v2 ("at a glance" ledger)
   Four counters in one quiet band. Each number is a set of rolling digit reels
   (built by home-stats.js; static digits without it) over a tick rule where
   every lit tick is one unit, so the picture stays honest for small counts.
   Motion: hairlines draw, reels roll and settle, ticks light in sequence, the
   last tick keeps a slow pulse, numbers drift a little with the scroll.
   Scoped to .tkst; light and dark through the site tokens.
   ============================================================================ */
.tkst{--tkst-gold:#8a6500;position:relative;background:var(--tk-surface);border-bottom:1px solid var(--tk-line);
  padding:clamp(48px,5.4vw,80px) 0 clamp(44px,5vw,72px);overflow:hidden}
[data-theme="dark"] .tkst{--tkst-gold:var(--tk-amber)}

.tkst::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 38%,rgba(255,194,24,.13) 50%,transparent 62%);transform:translateX(130%)}
.tkst.is-in::after{animation:tkst-sheen 2.2s .35s cubic-bezier(.4,0,.2,1) forwards}
@keyframes tkst-sheen{to{transform:translateX(-130%)}}
.tkst>.pub-container{position:relative;z-index:1}

.tkst-kicker{display:flex;align-items:center;gap:14px;margin:0 0 clamp(26px,3vw,40px);font-family:var(--tk-font-heading);
  font-size:14px;font-weight:600;line-height:1.6;color:var(--tkst-gold)}
.tkst-kicker::after{content:"";flex:0 1 96px;height:1px;border-top:1px solid var(--tk-amber);opacity:.7;transform-origin:100% 50%;
  -webkit-mask-image:linear-gradient(to left,#000,transparent);mask-image:linear-gradient(to left,#000,transparent)}

.tkst-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none}
.tkst-item{position:relative;padding:8px clamp(18px,2.4vw,40px) 6px;min-width:0;perspective:900px}
.tkst-item:first-child{padding-inline-start:0}
.tkst-item:last-child{padding-inline-end:0}
.tkst-item::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:1px;background:var(--tk-line-strong);transform-origin:50% 0}
.tkst-item:first-child::before{display:none}

.tkst-index{display:block;font-family:var(--tk-font-heading);font-size:13px;font-weight:600;line-height:1;color:var(--tkst-gold);letter-spacing:.02em}

.tkst-num{display:flex;align-items:flex-start;justify-content:flex-end;height:1.5em;margin:6px 0 -.2em;font-family:var(--tk-font-heading);
  font-size:clamp(52px,5.6vw,80px);line-height:1;font-weight:900;color:var(--tk-ink);unicode-bidi:isolate;
  transform:translateY(var(--drift,0px)) rotateX(calc(var(--ry,0) * -7deg)) rotateY(calc(var(--rx,0) * 9deg));transform-style:preserve-3d;
  will-change:transform;transition:transform .5s var(--tk-ease)}
.tkst-reel{position:relative;display:block;height:1.5em;min-width:.56em;overflow:hidden;text-align:center;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent)}
.tkst-reel__strip{display:block;transform:translateY(calc(-1.5em * var(--to,0)));
  transition:transform 1.7s cubic-bezier(.16,.9,.22,1);transition-delay:var(--delay,0s)}
.tkst-reel__strip span{display:block;height:1.5em;line-height:1.5}
.tkst.is-armed .tkst-reel__strip{transform:translateY(0);transition:none}

.tkst-label{display:block;margin-top:4px;font-size:15px;font-weight:600;line-height:1.7;color:var(--tk-ink-soft)}

.tkst-ticks{display:flex;align-items:flex-end;gap:4px;height:14px;margin-top:22px}
.tkst-ticks i{flex:1 1 0;min-width:0;max-width:7px;height:8px;border-radius:1px;background:var(--tk-line-strong);
  transform-origin:50% 100%;transition:background .35s var(--tk-ease),height .35s var(--tk-ease),transform .35s var(--tk-ease);transition-delay:var(--td,0s)}
.tkst-ticks i.on{height:14px;background:var(--tk-amber)}
.tkst.is-in .tkst-ticks i.on{animation:tkst-wave 7s ease-in-out calc(3s + var(--k,0) * .07s) infinite}
.tkst.is-in .tkst-ticks i.is-last{animation:tkst-wave 7s ease-in-out calc(3s + var(--k,0) * .07s) infinite,tkst-pulse 2.6s var(--tk-ease) 2.2s infinite}
@keyframes tkst-wave{0%,14%,100%{filter:brightness(1);transform:scaleY(1)}7%{filter:brightness(1.18);transform:scaleY(1.3)}}
@keyframes tkst-pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* ---------- reveal choreography (JS adds .is-armed first, then .is-in) ---------- */
.tkst.is-armed .tkst-item::before{transform:scaleY(0)}
.tkst.is-armed .tkst-kicker::after{transform:scaleX(0)}
.tkst.is-armed .tkst-index,.tkst.is-armed .tkst-label{opacity:0;transform:translateY(10px)}
.tkst.is-armed .tkst-num{opacity:0}
.tkst.is-armed .tkst-ticks i{height:8px;background:var(--tk-line-strong)}
.tkst.is-in .tkst-item::before{transform:scaleY(1);transition:transform .9s var(--tk-ease) calc(var(--i) * .12s)}
.tkst.is-in .tkst-kicker::after{transform:scaleX(1);transition:transform .9s var(--tk-ease)}
.tkst.is-in .tkst-index,.tkst.is-in .tkst-label{opacity:1;transform:none;transition:opacity .7s var(--tk-ease) calc(.15s + var(--i) * .12s),transform .7s var(--tk-ease) calc(.15s + var(--i) * .12s)}
.tkst.is-in .tkst-num{opacity:1;transition:opacity .6s var(--tk-ease) calc(.1s + var(--i) * .12s),transform .5s var(--tk-ease)}
.tkst.is-in .tkst-ticks i.on{height:14px;background:var(--tk-amber)}

/* ---------- hover (pointer devices): the column answers the cursor ---------- */
@media (hover:hover) and (pointer:fine){
  .tkst-item:hover .tkst-num{transform:translateY(calc(var(--drift,0px) - 3px)) rotateX(calc(var(--ry,0) * -7deg)) rotateY(calc(var(--rx,0) * 9deg))}
  .tkst-item:hover .tkst-ticks i.on{transform:scaleY(1.18)}
  .tkst-item:hover .tkst-index{color:var(--tk-amber-deep)}
}

@media (prefers-reduced-motion:reduce){
  .tkst.is-in::after{animation:none}
  .tkst-reel__strip,.tkst-ticks i,.tkst-num,.tkst-index,.tkst-label,.tkst-item::before,.tkst-kicker::after{transition:none!important}
  .tkst-ticks i.on,.tkst-ticks i.is-last{animation:none}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .tkst-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
  .tkst-item{padding:0 clamp(14px,3vw,28px);text-align:center}
  .tkst-item:first-child,.tkst-item:last-child{padding-inline:clamp(14px,3vw,28px)}
  .tkst-item:nth-child(3)::before{display:none}
  .tkst-item:nth-child(n+3){padding-top:34px}
  .tkst-item:nth-child(n+3)::after{content:"";position:absolute;top:0;inset-inline:clamp(14px,3vw,28px);height:1px;background:var(--tk-line)}
  .tkst-num{justify-content:center;margin-top:2px;font-size:clamp(44px,12vw,56px)}
  .tkst-ticks{justify-content:center;height:12px;margin-top:16px}
  .tkst-ticks i{flex:0 0 4px;max-width:4px;height:6px}
  .tkst-ticks i.on,.tkst.is-in .tkst-ticks i.on{height:12px}
  .tkst.is-armed .tkst-ticks i{height:6px}
  .tkst-ticks i:nth-child(n+21){display:none}
  .tkst-label{font-size:14px;margin-top:10px}
}
@media (max-width:640px){
  .tkst{padding:40px 0 36px}
  .tkst-kicker{justify-content:center;margin-bottom:24px}
  .tkst-kicker::before,.tkst-kicker::after{content:"";flex:0 0 34px;height:1px;border-top:1px solid var(--tk-amber);opacity:.7}
  .tkst-kicker::before{-webkit-mask-image:linear-gradient(to right,#000,transparent);mask-image:linear-gradient(to right,#000,transparent);transform-origin:0 50%}
  .tkst.is-armed .tkst-kicker::before{transform:scaleX(0)}
  .tkst.is-in .tkst-kicker::before{transform:scaleX(1);transition:transform .9s var(--tk-ease)}
}