/* Movimento, Decisão Digital. Só transform e opacity. Sem bibliotecas.
   Tudo o que anima está dentro de no-preference; com reduce o site fica estático. */

/* Barra de progresso: escala em vez de largura (o JS do funil escreve width inline; !important vence). Funil de 3 ecrãs: a barra enche em três etapas.
   Estados por CSS puro, a partir do aria-valuenow que o funil já actualiza. */
.barra span { width: 100% !important; transform-origin: left center; transform: scaleX(.3333); }
#funil-barra[aria-valuenow="2"] span { transform: scaleX(.6667); }
#funil-barra[aria-valuenow="3"] span { transform: scaleX(1); }

/* Código do topo: caixa mais alta (20 linhas a 14px/1.5), só cresce para baixo; desvanece no fundo (mantém a máscara horizontal) */
@media (min-width: 900px) {
  .cod--topo {
    height: 30em;
    -webkit-mask-image: linear-gradient(90deg, transparent, var(--dd-tinta) 40%), linear-gradient(180deg, var(--dd-tinta) 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, var(--dd-tinta) 40%), linear-gradient(180deg, var(--dd-tinta) 90%, transparent);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
}

@media (prefers-reduced-motion: no-preference) {

  /* 1. Entrada de secções (classes postas pelo motion.js só em blocos abaixo da dobra) */
  .mv-pre { opacity: 0; transform: translateY(14px); }
  .mv-pre.mv-on {
    opacity: 1; transform: none;
    transition: opacity 500ms cubic-bezier(.2,.7,.2,1), transform 500ms cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--mv-d, 0ms);
  }

  /* 2. Cartões: elevação (transform) e sombra (opacity de um pseudo-elemento) */
  .cartao { transition: transform 200ms cubic-bezier(.2,.7,.2,1); }
  .cartao::before {
    content: ""; position: absolute; inset: 0; border-radius: var(--dd-r-cartao); pointer-events: none;
    box-shadow: 0 10px 28px rgba(18,24,27,.14); opacity: 0; transition: opacity 200ms ease-out;
  }
  .cartao:active { transform: translateY(-2px); }
  .cartao:active::before { opacity: 1; }
  @media (hover: hover) {
    .cartao:hover { transform: translateY(-4px); }
    .cartao:hover::before { opacity: 1; }
  }

  /* 3. Botões: elevação leve e toque */
  .btn { transition: transform 150ms ease-out; }
  @media (hover: hover) { .btn:not([aria-disabled="true"]):hover { transform: translateY(-2px); } }
  .btn:not([aria-disabled="true"]):active { transform: translateY(1px) scale(.985); }

  /* 4. Barra do funil */
  .barra span { transition: transform 250ms cubic-bezier(.2,.7,.2,1); }

  /* 5. Passos do funil: 200 ms, nunca bloqueia o toque (não há overlay nem pointer-events) */
  .passo:not([hidden]) { animation: mv-passo 200ms ease-out; }
  .erro:not([hidden]) { animation: mv-fade 150ms ease-out; }
  @keyframes mv-passo { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes mv-fade { from { opacity: 0; } to { opacity: 1; } }

  /* 6. Opção escolhida: o visto aparece */
  .opcao input:checked + .marca-op::after { animation: mv-fade 120ms ease-out; }

  /* 7. Confirmação: o visto cresce com um ligeiro excesso */
  .passo--fim:not([hidden]) .visto { animation: mv-visto 320ms cubic-bezier(.3,1.5,.5,1) 60ms both; }
  @keyframes mv-visto { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

  /* 8. Avatar (só se existir): respiração, escala máxima 1% */
  .avatar img { animation: mv-respira 5s ease-in-out infinite alternate; }
  @keyframes mv-respira { from { transform: none; } to { transform: scale(1.01); } }
}