/* ============================================================
   Cadastro do prestador — animações
   O layout estático fica em styles.css
   ============================================================ */

/* ---- loader de entrada ----
   Sai quando o JS adiciona .is-hidden (no evento load). O keyframe
   loaderFailsafe é a rede de segurança: se o JS não rodar, o loader
   se apaga sozinho aos 8s em vez de travar a página. */
.page-loader {
    transition: opacity .55s ease, visibility .55s ease;
    animation: loaderFailsafe 0s 8s forwards;
}

.page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-loader__logo {
    animation: loaderLogoIn .7s cubic-bezier(.22, 1, .36, 1) both;
}

.page-loader__route {
    animation: riseIn .5s .15s both;
}

.loader-route-line {
    animation: loaderDraw 1.8s cubic-bezier(.45, 0, .25, 1) infinite;
}

.loader-route-car {
    animation: loaderCarFade 1.8s linear infinite;
}

.page-loader__label {
    animation: riseIn .5s .3s both, loaderLabelPulse 1.8s ease-in-out infinite .8s;
}

@keyframes loaderFailsafe {
    to { opacity: 0; visibility: hidden; pointer-events: none; }
}

@keyframes loaderLogoIn {
    0%   { opacity: 0; transform: translateY(14px) scale(.94); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes loaderDraw {
    0%   { stroke-dashoffset: 100; opacity: 1; }
    70%  { stroke-dashoffset: 0; opacity: 1; }
    90%  { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes loaderCarFade {
    0%, 5% { opacity: 0; }
    12%    { opacity: 1; }
    70%    { opacity: 1; }
    85%    { opacity: 0; }
    100%   { opacity: 0; }
}

@keyframes loaderLabelPulse {
    0%, 100% { opacity: .65; }
    50%      { opacity: 1; }
}

/* ---- entrada do conteúdo, disparada quando o loader sai ---- */
body.is-loaded .wiz-panel {
    animation: panelReveal .7s cubic-bezier(.22, 1, .36, 1) both;
}

/* Reexecuta a cada troca de etapa: os filhos passam a casar com
   .wiz-step.active no momento em que a etapa é exibida. */
body.is-loaded .wiz-step.active > * {
    animation: stepItemIn .5s cubic-bezier(.22, 1, .36, 1) both;
}

body.is-loaded .wiz-step.active > *:nth-child(1) { animation-delay: .06s; }
body.is-loaded .wiz-step.active > *:nth-child(2) { animation-delay: .10s; }
body.is-loaded .wiz-step.active > *:nth-child(3) { animation-delay: .14s; }
body.is-loaded .wiz-step.active > *:nth-child(4) { animation-delay: .18s; }
body.is-loaded .wiz-step.active > *:nth-child(5) { animation-delay: .22s; }
body.is-loaded .wiz-step.active > *:nth-child(6) { animation-delay: .26s; }
body.is-loaded .wiz-step.active > *:nth-child(7) { animation-delay: .30s; }
body.is-loaded .wiz-step.active > *:nth-child(n + 8) { animation-delay: .34s; }

body.is-loaded .wiz-footer {
    animation: stepItemIn .5s .38s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes panelReveal {
    0%   { opacity: 0; transform: translateX(-24px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes stepItemIn {
    0%   { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ---- rotação das manchetes do painel (ciclo de 15s) ---- */
.hl-rot .hl {
    opacity: 0;
    transform: translateY(6px);
    animation: hlCycle 15s ease-in-out infinite;
}

.hl-rot .hl2 { animation-delay: 5s; }
.hl-rot .hl3 { animation-delay: 10s; }

@keyframes hlCycle {
    0%   { opacity: 0; transform: translateY(6px); }
    3%   { opacity: 1; transform: translateY(0); }
    28%  { opacity: 1; transform: translateY(0); }
    33%  { opacity: 0; transform: translateY(-6px); }
    100% { opacity: 0; }
}

/* ---- palco do painel: chamado cai → aceite → carro percorre a rota → chegada (ciclo de 10s) ---- */
.notif-card {
    animation: cardIn 10s cubic-bezier(.22, 1, .36, 1) infinite;
}

.accept-btn .press { animation: btnPress 10s ease infinite; }
.accept-btn .lbl-go { animation: swapGo 10s ease infinite; }
.accept-btn .lbl-ok { animation: swapOk 10s ease infinite; }

.route-path {
    stroke-dasharray: 100;
    animation: drawRoute 10s cubic-bezier(.4, 0, .2, 1) infinite;
}

.pin-o-ring { animation: originPulse 10s ease infinite; }
.pin-d-ring { animation: destPulse 10s ease infinite; }
.car-svg { animation: carShow 10s linear infinite; }
.arrive-toast { animation: toastPop 10s ease infinite; }

@keyframes cardIn {
    0%   { opacity: 0; transform: translateY(-26px) scale(.94); }
    4%   { opacity: 1; transform: translateY(3px) scale(1); }
    7%   { transform: translateY(0) scale(1); }
    34%  { opacity: 1; transform: translateY(0); }
    39%  { opacity: 0; transform: translateY(-10px) scale(.96); }
    100% { opacity: 0; }
}

@keyframes btnPress {
    0%, 20% { transform: scale(0); opacity: .6; }
    24%     { transform: scale(6); opacity: 0; }
    100%    { transform: scale(6); opacity: 0; }
}

@keyframes swapGo {
    0%, 21%   { opacity: 1; }
    24%, 100% { opacity: 0; }
}

@keyframes swapOk {
    0%, 21%   { opacity: 0; }
    25%       { opacity: 1; }
    34%       { opacity: 1; }
    39%, 100% { opacity: 0; }
}

@keyframes drawRoute {
    0%, 30% { opacity: 0; stroke-dashoffset: 100; }
    34%     { opacity: 1; }
    62%     { stroke-dashoffset: 0; opacity: 1; }
    90%     { opacity: 1; stroke-dashoffset: 0; }
    96%     { opacity: 0; }
    100%    { opacity: 0; stroke-dashoffset: 100; }
}

@keyframes originPulse {
    0%, 32%   { opacity: 0; transform: scale(.5); }
    38%       { opacity: 1; transform: scale(1.4); }
    46%       { opacity: 0; transform: scale(1.8); }
    92%, 100% { opacity: 0; }
}

@keyframes destPulse {
    0%, 70%   { opacity: 0; transform: scale(.4); }
    78%       { opacity: 1; transform: scale(1.5); }
    88%       { opacity: 0; transform: scale(2); }
    92%, 100% { opacity: 0; }
}

@keyframes carShow {
    0%, 39% { opacity: 0; }
    42%     { opacity: 1; }
    74%     { opacity: 1; }
    78%     { opacity: 0; }
    100%    { opacity: 0; }
}

@keyframes toastPop {
    0%, 72% { opacity: 0; transform: translateX(-50%) translateY(10px); }
    78%     { opacity: 1; transform: translateX(-50%) translateY(0); }
    90%     { opacity: 1; transform: translateX(-50%) translateY(0); }
    95%     { opacity: 0; transform: translateX(-50%) translateY(-6px); }
    100%    { opacity: 0; }
}

/* ---- pino do mapa de endereço ---- */
.map-pin {
    transform-origin: center bottom;
    animation: pinDrop 1.2s cubic-bezier(.34, 1.56, .64, 1) both;
}

.map-pin-shadow {
    animation: shadowGrow 1.2s ease both;
}

@keyframes pinDrop {
    0%   { transform: translateY(-46px) scale(.8); opacity: 0; }
    50%  { opacity: 1; }
    70%  { transform: translateY(4px) scale(1); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes shadowGrow {
    0%, 55% { opacity: 0; transform: scale(.3); }
    100%    { opacity: 1; transform: scale(1); }
}

/* ---- tela de cadastro finalizado ---- */
.done-ring .halo { animation: haloPulse 2s ease-out infinite; }
.done-ring .disc { animation: discPop .6s cubic-bezier(.34, 1.56, .64, 1) both; }

.done-ring .tick {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: tickDraw .5s .45s ease forwards;
}

.login-btn { animation: riseIn .5s .7s both; }
.login-hint { animation: riseIn .5s .85s both; }

@keyframes haloPulse {
    0%   { transform: scale(.8); opacity: .25; }
    70%  { opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}

@keyframes discPop {
    0%   { transform: scale(0) rotate(-30deg); }
    100% { transform: scale(1) rotate(0); }
}

@keyframes tickDraw {
    to { stroke-dashoffset: 0; }
}

@keyframes riseIn {
    0%   { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes confettiFly {
    0%   { opacity: 0; transform: translate(0, 0) rotate(0); }
    15%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--cx), var(--cy)) rotate(var(--cr)); }
}

/* ---- acessibilidade ---- */
@media (prefers-reduced-motion: reduce) {
    .page-loader__logo,
    .page-loader__route,
    .page-loader__label,
    .loader-route-line,
    .loader-route-car,
    body.is-loaded .wiz-panel,
    body.is-loaded .wiz-step.active > *,
    body.is-loaded .wiz-footer,
    .notif-card,
    .accept-btn .press,
    .accept-btn .lbl-go,
    .accept-btn .lbl-ok,
    .route-path,
    .pin-o-ring,
    .pin-d-ring,
    .car-svg,
    .arrive-toast,
    .map-pin,
    .map-pin-shadow,
    .done-ring .halo,
    .done-ring .disc,
    .done-ring .tick,
    .login-btn,
    .login-hint,
    .confetti,
    .hl-rot .hl {
        animation: none;
    }

    .page-loader__logo,
    .page-loader__route,
    .page-loader__label,
    body.is-loaded .wiz-panel,
    body.is-loaded .wiz-step.active > *,
    body.is-loaded .wiz-footer {
        opacity: 1;
        transform: none;
    }

    .loader-route-line { stroke-dashoffset: 0; }
    .notif-card { opacity: 1; }
    .route-path { stroke-dashoffset: 0; opacity: 1; }
    .car-svg { opacity: 1; }
    .accept-btn .lbl-ok { opacity: 0; }
    .arrive-toast { display: none; }
    .map-pin, .map-pin-shadow { opacity: 1; transform: none; }
    .done-ring .tick { stroke-dashoffset: 0; }
    .hl-rot .hl1 { opacity: 1; transform: none; }
    .hl-rot .hl2, .hl-rot .hl3 { opacity: 0; }
}