/* Motion do fluxo de workshops. Apenas opacity/transform. */
:root {
    --ws-ease-in: cubic-bezier(.2, .8, .2, 1);
    --ws-ease-out: ease-out;
}

@view-transition { navigation: auto; }

@keyframes ws-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ws-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ws-scale { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ws-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-2px); } 50% { transform: translateX(2px); } 75% { transform: translateX(-2px); } }
@keyframes ws-pulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes ws-draw { to { stroke-dashoffset: 0; } }
@keyframes ws-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.ws-fade-in { animation: ws-fade .22s var(--ws-ease-in) both; }
.ws-slide-up { animation: ws-up .22s var(--ws-ease-in) both; }
.ws-scale-in { animation: ws-scale .2s var(--ws-ease-in) both; }
.ws-shake { animation: ws-shake .25s ease-out 1; }

/* Catalogo e lista do cliente */
.ws-grid > .ws-card,
.ws-stagger > * {
    animation: ws-up .26s var(--ws-ease-in) both;
    animation-delay: calc(var(--i, 0) * 40ms);
}
.ws-card { transition: transform .2s var(--ws-ease-in), box-shadow .2s var(--ws-ease-in); }
.ws-card:hover { transform: translateY(-2px); }
.wsi-btn, .ws-btn { transition: transform .15s ease-out, opacity .15s ease-out; }
.wsi-btn:active, .ws-btn:active, .ws-card .ws-btn:active { transform: scale(.98); }

/* Stepper */
.wsb-stepper__line--filled::after { animation: ws-line .5s var(--ws-ease-in) both; }
.wsb-stepper__circle--done i { animation: ws-scale .2s var(--ws-ease-in) .15s both; }

/* Wizard: CPF */
#wsb-cpf { transition: border-color .2s ease-out, box-shadow .2s ease-out; }
#wsb-cpf.ws-ok { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .15); }
#wsb-cpf.ws-bad { border-color: #dc2626; animation: ws-shake .25s ease-out 1; }
.wsb-result:not(.hidden) { animation: ws-up .22s var(--ws-ease-in) both; }

/* Campos: foco suave */
.wsi-input, .wsc-field { transition: border-color .15s ease-out, box-shadow .15s ease-out; }
.wsi-input:focus, .wsc-field:focus-within { box-shadow: 0 0 0 3px rgba(209, 143, 49, .2); }

/* Metodo de pagamento */
.wsb-method { transition: border-color .2s ease-out, box-shadow .2s ease-out, background-color .2s ease-out; }
#wsi-card:not(.hidden), #wsi-pix:not(.hidden), #wsi-expired:not(.hidden), #wsi-paid:not(.hidden) { animation: ws-up .22s var(--ws-ease-in) both; }

/* PIX */
#wsi-pix:not(.hidden) #wsi-qr { animation: ws-scale .24s var(--ws-ease-in) .05s both; }
.ws-pix-wait { animation: ws-pulse 1.6s ease-in-out infinite; }
#wsi-timer.ws-tick { animation: ws-fade .12s ease-out both; }
.ws-copied-icon { animation: ws-scale .2s var(--ws-ease-in) both; }

/* Cartao: campo a campo */
#form-checkout:not(.hidden) > * { animation: ws-up .22s var(--ws-ease-in) both; }
#form-checkout:not(.hidden) > *:nth-child(1) { animation-delay: 0ms; }
#form-checkout:not(.hidden) > *:nth-child(2) { animation-delay: 30ms; }
#form-checkout:not(.hidden) > *:nth-child(3) { animation-delay: 60ms; }
#form-checkout:not(.hidden) > *:nth-child(4) { animation-delay: 90ms; }
#form-checkout:not(.hidden) > *:nth-child(5) { animation-delay: 120ms; }
#form-checkout:not(.hidden) > *:nth-child(6) { animation-delay: 150ms; }
#form-checkout:not(.hidden) > *:nth-child(n+7) { animation-delay: 180ms; }
#wsc-pay-label { transition: opacity .15s ease-out; }

/* Sucesso */
.ws-check { width: 64px; height: 64px; display: block; margin: 0 auto .75rem; }
.ws-check circle, .ws-check path { fill: none; stroke: #D18F31; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ws-check circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: ws-draw .5s var(--ws-ease-in) forwards; }
.ws-check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: ws-draw .3s var(--ws-ease-in) .35s forwards; }
#wsi-paid:not(.hidden) h2 { animation: ws-fade .25s ease-out .6s both; }
#wsi-paid:not(.hidden) p, #wsi-paid:not(.hidden) a.wsi-btn { animation: ws-up .25s var(--ws-ease-in) .75s both; }

/* Erro */
#wsi-modal:not(.hidden) .wsb-modal__box { animation: ws-scale .18s var(--ws-ease-in) both, ws-shake .25s ease-out .18s 1; }

/* Badge de status */
.ws-badge { transition: color .3s ease-out, background-color .3s ease-out, border-color .3s ease-out; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .ws-card:hover { transform: none; }
    .ws-check circle, .ws-check path { stroke-dashoffset: 0; }
    @view-transition { navigation: none; }
}