/* A dor: barras que enchem com a rolagem, relógio que soma, fecho que aparece no fim. */
.js .dor-barra li { --enche: 0; }
.dor-barra li::before { will-change: transform; }
.dor-barra li span { transition: color 200ms ease; }
.dor-barra li.cheio span { color: #ffb4a8; }
.dor-relogio { transition: border-color 400ms var(--sai), box-shadow 400ms var(--sai); }
.dor-relogio.estourou { border-color: rgba(255,138,122,.35); box-shadow: 0 0 0 1px rgba(255,138,122,.08), 0 30px 80px -30px rgba(255,90,70,.35); }
.dor-relogio.estourou .tc-grande { color: #ffb4a8; }
/* o fecho: primeiro "tudo isso à mão"; depois que vira, "você aprova, ele faz" */
.dor-fecho { display: grid; }
.dor-fecho > span { grid-area: 1 / 1; transition: opacity 400ms var(--sai), transform 400ms var(--sai); }
.dor-depois { opacity: 0; transform: translateY(8px); color: var(--t1); }
.dor-depois strong { color: var(--ok); }
.js .dor-fecho .dor-antes { opacity: .3; }
.js .dor-fecho.on .dor-antes { opacity: 1; }
.dor-relogio.virou .dor-antes { opacity: 0 !important; transform: translateY(-8px); }
.dor-relogio.virou .dor-depois { opacity: 1; transform: none; transition-delay: 820ms; }

/* a virada: cada linha fica verde com ✓, uma atrás da outra (tu, tu, tu), e o relógio é riscado */
.dor-barra li::after { content: "✓"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%) scale(.4); opacity: 0; color: var(--ok); font-size: 15px; font-weight: 500;
  transition: opacity 220ms var(--sai), transform 320ms var(--ease-bounce, cubic-bezier(.34,1.36,.64,1)); transition-delay: calc(var(--n, 0) * 85ms); }
.dor-barra li::before { transition: transform 420ms var(--sai), background 300ms ease, border-color 300ms ease; transition-delay: calc(var(--n, 0) * 85ms); }
.dor-barra li span { transition: opacity 200ms ease, color 200ms ease; transition-delay: calc(var(--n, 0) * 85ms); }
.dor-relogio.virou .dor-barra li::before { background: linear-gradient(90deg, rgba(120,217,176,.26), rgba(120,217,176,.08)); border-color: rgba(120,217,176,.35); transform: scaleX(1); }
.dor-relogio.virou .dor-barra li::after { opacity: 1; transform: translateY(-50%) scale(1); }
.dor-relogio.virou .dor-barra li span { opacity: 0; }
.dor-relogio.virou { border-color: rgba(120,217,176,.35) !important; box-shadow: 0 0 0 1px rgba(120,217,176,.08), 0 30px 80px -30px rgba(70,200,140,.35) !important; transition-delay: 600ms; }
.dor-tc .tc-grande { position: relative; transition: color 300ms ease; }
.dor-tc .tc-grande::after { content: ""; position: absolute; left: -4px; right: -4px; top: 52%; height: 3px; border-radius: 2px; background: var(--ok); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--sai) 700ms; }
.dor-relogio.virou .tc-grande { color: var(--t3) !important; }
.dor-relogio.virou .tc-grande::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .dor-barra li::before, .dor-barra li::after, .dor-barra li span, .dor-fecho > span, .dor-tc .tc-grande::after { transition: none !important; } }