/* Stepper de progresso "tesoura" — Telas 2/3/4/5. Duolingo-style segmented
   "cut line": a pílula ativa preenche da esquerda pra direita enquanto uma
   tesoura cruza, corta e derruba cabelo na chegada; o preenchimento pisca um
   brilho. Pílulas completas ficam douradas; pílulas futuras mostram um guia
   de corte tracejado. */
@property --p{syntax:'<number>';inherits:true;initial-value:0;}
.track{display:flex;gap:6px;align-items:center;height:7px;background:none;overflow:visible;}
.seg{position:relative;flex:1;height:7px;border-radius:999px;}
.seg.done{
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent-deep) 100%);
  box-shadow:inset 0 0 0 1px rgba(169,134,63,.28);
}
/* barber-pole: continuous diagonal stripe scrolling through the filled gold */
.seg.done::after,.seg.active .seg-fill::before{
  content:'';position:absolute;inset:0;border-radius:999px;pointer-events:none;
  background:repeating-linear-gradient(118deg,rgba(255,255,255,.20) 0 3.5px,rgba(255,255,255,0) 3.5px 10px);
  background-size:21px 100%;animation:barber 1.6s linear infinite;
}
@keyframes barber{to{background-position:21px 0;}}
.seg.todo{background:var(--cream-deep);box-shadow:inset 0 0 0 1px var(--line);}
.seg.todo::before,.seg.active::before{
  content:'';position:absolute;left:5px;right:5px;top:50%;height:0;
  border-top:2px dashed color-mix(in srgb,var(--accent-deep) 26%, transparent);
  transform:translateY(-50%);pointer-events:none;
}
/* active pill drives --p 0→100; fill width + scissor position both read it */
.seg.active{
  background:var(--cream-deep);box-shadow:inset 0 0 0 1px var(--line);
  z-index:2;--p:100;
  animation:fillSeg .8s cubic-bezier(.2,.7,.15,1) var(--adv-delay,.5s) both;
}
@keyframes fillSeg{from{--p:0;}to{--p:100;}}
.seg.active .seg-fill{
  position:absolute;left:0;top:0;height:100%;width:calc(var(--p)*1%);
  border-radius:999px;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent-deep) 100%);
  box-shadow:0 0 9px -1px color-mix(in srgb,var(--accent) 75%, transparent);
  overflow:hidden;
}
.seg.active .seg-fill::after{
  content:'';position:absolute;inset:0;border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  opacity:0;animation:segShine 1s ease-out var(--snip-delay,1.3s) 1;z-index:1;
}
@keyframes segShine{0%{opacity:0;transform:translateX(-45%);}40%{opacity:.85;}100%{opacity:0;transform:translateX(45%);}}
.scissor{
  position:absolute;top:50%;left:calc(var(--p)*1%);
  width:22px;height:22px;margin:-11px 0 0 -11px;z-index:3;
  color:var(--accent-deep);pointer-events:none;
  filter:drop-shadow(0 2px 3px rgba(120,90,30,.32));
}
.scissor svg{display:block;width:100%;height:100%;}
.scissor .blade{transform-box:view-box;transform-origin:11px 12px;}
.scissor .b-top{animation:snipT .42s ease-in-out var(--snip-delay,1.3s) 2 both;}
.scissor .b-bot{animation:snipB .42s ease-in-out var(--snip-delay,1.3s) 2 both;}
/* hair clippings — direct children of .seg.active so the scissor's drop-shadow filter can't clip them */
.seg.active .clip{position:absolute;top:50%;margin-top:2px;width:6px;height:2px;border-radius:2px;background:#4a4236;opacity:0;z-index:4;pointer-events:none;}
.seg.active .c1{left:calc(var(--p)*1% - 2px);animation:fall 1s ease-in var(--snip-delay,1.3s) both;}
.seg.active .c2{left:calc(var(--p)*1% - 6px);width:5px;animation:fall 1.12s ease-in calc(var(--snip-delay,1.3s) + .1s) both;--dx:-7px;--rot:-55deg;}
.seg.active .c3{left:calc(var(--p)*1% + 2px);width:7px;animation:fall .95s ease-in calc(var(--snip-delay,1.3s) + .18s) both;--dx:8px;--rot:60deg;}
.seg.active .c4{left:calc(var(--p)*1% - 1px);width:4px;animation:fall 1.05s ease-in calc(var(--snip-delay,1.3s) + .28s) both;--dx:-2px;--rot:32deg;}
@keyframes fall{0%{opacity:0;transform:translate(0,0) rotate(0);}10%{opacity:.95;}65%{opacity:.9;}100%{opacity:0;transform:translate(var(--dx,3px),20px) rotate(var(--rot,40deg));}}
@keyframes snipT{0%,100%{transform:rotate(0);}45%{transform:rotate(12deg);}}
@keyframes snipB{0%,100%{transform:rotate(0);}45%{transform:rotate(-12deg);}}
@media (prefers-reduced-motion:reduce){
  .seg.active{animation:none;--p:100;}
  .seg.active .seg-fill::after,.seg.done::after,.seg.active .seg-fill::before,.scissor .blade,.seg.active .clip{animation:none;}
  .seg.active .clip{opacity:0;}
}