/* ============================================================
   WUNDERBAR · project reveal — "riso number" grammar
   Reference: eian-riso-broll / templates/number.html
   03 · 信息量 | 03 / 10  →  01 / KITTENS | 01 / 07
   big numeral prints through a halftone screen while it counts up,
   hairline sets, label rises, key word gets a solid ink bar.
   Recoloured to the site's own language: mono ink on #070707,
   Archivo 900 for the numeral, IBM Plex Mono for rails. No colour.
   ============================================================ */

.rv-shell{
  max-width:var(--max);margin:0 auto;
  padding:clamp(50px,7vw,90px) clamp(18px,4vw,48px) 0;
}
.rv-shell .section-head{padding:0;max-width:none;margin:0}

/* ---- rail: left NN / LABEL · right NN / 07 ---- */
.rv-rail{
  position:relative;display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;padding-bottom:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.26em;
  color:var(--ink-dim);text-transform:uppercase;white-space:nowrap;
}
.rv-rail::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--line2) 0%,var(--line2) 42%,rgba(44,44,44,0) 100%);
  transform:scaleX(0);transform-origin:left center;
}
.rv-label b{color:var(--ink);font-weight:500}
.rv-count{color:var(--ink-faint);font-variant-numeric:tabular-nums;font-size:10px}

/* registration tick, left of the rail — print-shop detail */
.rv-reg{
  position:absolute;left:0;top:-13px;width:9px;height:9px;opacity:0;
}
.rv-reg::before,.rv-reg::after{content:"";position:absolute;background:var(--ink-faint)}
.rv-reg::before{left:0;right:0;top:4px;height:1px}
.rv-reg::after{top:0;bottom:0;left:4px;width:1px}

/* ---- body row: giant numeral + existing head ---- */
.rv-row{
  display:flex;align-items:flex-start;
  gap:clamp(18px,3.4vw,52px);margin-top:clamp(20px,3vw,36px);
}
.rv-num{
  flex:0 0 auto;
  font-family:var(--disp);font-weight:900;
  font-size:clamp(84px,12.5vw,182px);line-height:.72;letter-spacing:-.05em;
  color:var(--ink);font-variant-numeric:tabular-nums;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 46%,rgba(0,0,0,0) 52%);
  mask-image:radial-gradient(circle at 50% 50%,#000 46%,rgba(0,0,0,0) 52%);
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
  -webkit-mask-size:2px 2px;mask-size:2px 2px;
}
.rv-num--dash{color:var(--ink)}

/* the divider already carries max-width + padding — don't double it */
.projects-divider .rv-shell{max-width:none;padding:0}
.projects-divider .rv-row{align-items:baseline;gap:clamp(16px,2.6vw,40px)}
.projects-divider .rv-num{font-size:clamp(96px,15vw,230px)}

/* ---- key word gets a solid ink bar (riso 荧光压条 → site ink) ---- */
.rv-bar{position:relative;display:inline-block;isolation:isolate}
.rv-bar>.rv-bar-fill{
  position:absolute;left:-.06em;right:-.06em;top:50%;
  height:.62em;margin-top:-.31em;background:var(--ink);
  transform:scaleX(0);transform-origin:left center;z-index:-1;
}
.rv-bar.rv-on{color:var(--bg)}

/* ---- initial states (before reveal) ---- */
.rv-shell .rv-label,
.rv-shell .rv-count,
.rv-shell .rv-num,
.rv-shell .section-head h2,
.rv-shell .section-head .section-lead{opacity:0}
.rv-shell .rv-label{transform:translateX(-14px)}
.rv-shell .rv-num{
  -webkit-mask-size:260px 260px;mask-size:260px 260px;
}
.rv-shell .section-head h2,.rv-shell .section-head .section-lead{transform:translateY(22px)}
.rv-shell .rv-reg{opacity:0}

/* ---- transitions (delays = the reference timeline) ---- */
.rv-rail::after,
.rv-label,.rv-count,.rv-num,.rv-reg,
.rv-shell .section-head h2,.rv-shell .section-head .section-lead,
.rv-bar-fill{
  transition-property:opacity,transform,color,mask-size,-webkit-mask-size;
  transition-duration:.5s;
  transition-timing-function:cubic-bezier(.22,.61,.36,1);
}
.rv-num{transition-duration:.66s}
.rv-rail::after{transition-property:transform;transition-duration:.5s}

/* ---- revealed ---- */
.rv-shell.rv-in .rv-rail::after{transform:scaleX(1)}
.rv-shell.rv-in .rv-label,.rv-shell.rv-in .rv-count{opacity:1;transform:none;transition-delay:.02s}
.rv-shell.rv-in .rv-num{
  opacity:1;transition-delay:.05s;
  -webkit-mask-size:1.5px 1.5px;mask-size:1.5px 1.5px;
}
.rv-shell.rv-in .rv-reg{opacity:1;transition:opacity .3s ease .72s}
.rv-shell.rv-in .section-head h2{opacity:1;transform:none;transition-delay:.9s}
.rv-shell.rv-in .section-head .section-lead{opacity:1;transform:none;transition-delay:1.06s}
.rv-shell.rv-in .rv-bar.rv-on{transition:color .18s ease 1.34s}
.rv-shell.rv-in .rv-bar-fill{transform:scaleX(1);transition:transform .5s cubic-bezier(.22,.61,.36,1) 1.32s}

/* mobile: numeral above the head, still big */
@media (max-width:640px){
  .rv-row{flex-direction:column;gap:10px;align-items:flex-start}
  .rv-num{font-size:clamp(76px,26vw,132px);line-height:.8}
  .rv-shell{padding-top:clamp(40px,9vw,70px)}
}

@media (prefers-reduced-motion:reduce){
  .rv-rail::after,.rv-label,.rv-count,.rv-num,.rv-reg,
  .rv-shell .section-head h2,.rv-shell .section-head .section-lead,.rv-bar-fill{
    transition:none !important;
  }
}