/* Camada de movimento do Dimensol, compartilhada por todas as páginas.
   Regras: só transform/opacity/filter animam; entrada mais marcada que a saída;
   curvas próprias (nunca `ease`); tudo respeita prefers-reduced-motion. */

:root{
  --m-out:cubic-bezier(.22,1,.36,1);      /* entradas: chega rápido e assenta */
  --m-in:cubic-bezier(.4,0,1,1);          /* saídas: acelera para fora */
  --m-fast:.15s; --m-base:.22s; --m-slow:.42s;
  --sk-base:#f1e6d8; --sk-hi:rgba(255,255,255,.7);
}

@keyframes m-fade-in{ from{opacity:0} to{opacity:1} }
@keyframes m-fade-out{ from{opacity:1} to{opacity:0} }
@keyframes m-enter{ from{opacity:0;transform:translateY(8px);filter:blur(4px)} to{opacity:1;transform:none;filter:blur(0)} }
@keyframes m-enter-s{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
@keyframes m-pop-in{ from{opacity:0;transform:translateY(8px) scale(.96);filter:blur(3px)} to{opacity:1;transform:none;filter:blur(0)} }
@keyframes m-pop-out{ from{opacity:1;transform:none} to{opacity:0;transform:translateY(-6px) scale(.98)} }
@keyframes m-drop-in{ from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} }
@keyframes m-drop-out{ from{opacity:1;transform:none} to{opacity:0;transform:translateY(-4px)} }
@keyframes m-shimmer{ to{ transform:translateX(100%) } }
@keyframes m-spin{ to{ transform:rotate(360deg) } }
@keyframes m-indet{ 0%{ transform:translateX(-100%) } 100%{ transform:translateX(260%) } }
@keyframes m-bg{ from{ background-position:200% 0 } to{ background-position:-200% 0 } }

.m-sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- esqueleto (estado de carregamento; some quando o conteúdo chega) ---------- */
.sk{
  position:relative; overflow:hidden; background:var(--sk-base); border-radius:8px;
  color:transparent!important; border-color:transparent!important; box-shadow:none!important; pointer-events:none; user-select:none;
}
.sk > *{ visibility:hidden; }
.sk::after{
  content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, var(--sk-hi), transparent); animation:m-shimmer 1.5s linear infinite;
}
.sk-line{ height:12px; border-radius:6px; }
.sk-title{ height:22px; width:55%; border-radius:6px; }
.sk-btn{ height:42px; border-radius:10px; }
.sk-circle{ width:44px; height:44px; border-radius:50%; }
.sk-card{
  display:flex; flex-direction:column; gap:12px; padding:22px 20px; border:1px solid var(--line,#E4D3C0);
  border-radius:var(--radius,16px); background:var(--bg,#fff);
}
.sk-row{ display:flex; align-items:center; gap:12px; }

/* ---------- barra de progresso global (navegação e requisições) ---------- */
#m-progress{
  position:fixed; left:0; top:0; height:3px; width:100%; z-index:2147483000; pointer-events:none;
  background:linear-gradient(90deg,#fe6d30,#fec62f); transform-origin:0 50%; transform:scaleX(0); opacity:0;
  transition:transform .35s var(--m-out), opacity .25s linear;
}
#m-progress.on{ opacity:1; }

/* barra de progresso dentro de telas de carregamento (indeterminada ou com valor em --p) */
.m-bar{ position:relative; height:4px; border-radius:4px; background:var(--sk-base); overflow:hidden; }
.m-bar > i{
  position:absolute; inset:0; width:40%; border-radius:inherit;
  background:linear-gradient(90deg,#fe6d30,#fec62f); animation:m-indet 1.3s var(--m-out) infinite;
}
.m-bar > i.det{ width:100%; transform-origin:0 50%; transform:scaleX(var(--p,0)); animation:none; transition:transform .3s var(--m-out); }

/* ---------- botão ocupado (requisição em andamento) ---------- */
.is-busy{ pointer-events:none; }
.is-busy::before{
  content:''; display:inline-block; width:.9em; height:.9em; margin-right:8px; vertical-align:-.12em;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:m-spin .7s linear infinite;
}

/* ---------- selects carregando ---------- */
.m-loading-select{
  background-image:linear-gradient(90deg,transparent 0,rgba(255,255,255,.75) 50%,transparent 100%)!important;
  background-size:200% 100%; background-repeat:no-repeat; animation:m-bg 1.4s linear infinite;
}

/* ---------- imagens com carregamento tardio ---------- */
.m-js .m-img{ opacity:0; transition:opacity .35s var(--m-out); }
.m-js .m-img.is-loaded{ opacity:1; }

/* ---------- porta de acesso (verificando sessão) ---------- */
.m-gate-card{ width:min(320px,80vw); display:flex; flex-direction:column; gap:12px; }
#auth-gate.m-gate-out{ animation:m-fade-out .22s var(--m-in) both; pointer-events:none; }

/* ---------- feedback de toque e foco (Emil: imediato e discreto) ---------- */
.btn:active:not(:disabled){ transform:scale(.97); }
input, select, textarea{ transition:border-color var(--m-fast) var(--m-out), box-shadow var(--m-fast) var(--m-out), background-color var(--m-fast) var(--m-out); }

/* ---------- entrada de conteúdo trocado por JS ---------- */
.m-in{ animation:m-enter-s .28s var(--m-out) backwards; animation-delay:calc(var(--i,0) * 45ms); }
.m-page{ animation:m-enter .38s var(--m-out) backwards; }

/* ---------- modais e sobreposições: entrada e saída ---------- */
.modal-backdrop.open, .checkout-overlay.show{ animation:m-fade-in var(--m-base) var(--m-out) both; }
.modal-backdrop.open > .modal, .checkout-overlay.show > .checkout-modal{ animation:m-pop-in .26s var(--m-out) both; }
.modal-backdrop.m-closing, .checkout-overlay.m-closing{ display:flex; pointer-events:none; animation:m-fade-out .16s var(--m-in) both; }
.modal-backdrop.m-closing > .modal, .checkout-overlay.m-closing > .checkout-modal{ animation:m-pop-out .16s var(--m-in) both; }

/* ---------- etapas, abas e painéis que aparecem ao trocar de estado ---------- */
.stage.active, .view.active, .view-pane.active{ animation:m-enter-s .2s var(--m-out) both; }
.qty-panel, .collector-spec, .chart-wrap, .status-banner.show, .msg.ok, .msg.err{ animation:m-enter-s .24s var(--m-out) backwards; }

/* resultado do dimensionamento: cartões chegam em sequência curta */
.stage[data-stage="result"].active .result-hero{ animation:m-enter .38s var(--m-out) backwards; }
.stage[data-stage="result"].active .result-card{ animation:m-enter-s .34s var(--m-out) backwards; }
.result-grid > :nth-child(2){ animation-delay:.04s!important; }
.result-grid > :nth-child(3){ animation-delay:.08s!important; }
.result-grid > :nth-child(4){ animation-delay:.12s!important; }
.result-grid > :nth-child(5){ animation-delay:.16s!important; }
.result-grid > :nth-child(6){ animation-delay:.2s!important; }
.result-grid > :nth-child(n+7){ animation-delay:.24s!important; }

/* ---------- tabelas: esqueleto enquanto carrega, linhas novas entram em sequência ---------- */
tr.sk-tr td{ padding-top:14px; padding-bottom:14px; }
.m-row{ animation:m-enter-s .28s var(--m-out) backwards; animation-delay:calc(var(--i,0) * 35ms); }

/* ---------- avisos (toast): entra de baixo, sai para baixo ---------- */
@keyframes m-toast-out{ from{opacity:1;transform:none} to{opacity:0;transform:translateY(6px)} }
.toast.show{ animation:m-enter-s .24s var(--m-out) both; }
.toast.m-closing{ display:block; pointer-events:none; animation:m-toast-out .16s var(--m-in) both; }

/* ---------- planos: esqueleto dos cartões ---------- */
.sk-plan{ min-height:300px; }
.sk-plans{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; text-align:left; }

/* ---------- ferramentas do painel: cartões entram em sequência ---------- */
.grid > .tool-card.m-in{ animation-name:m-enter; }

/* ---------- perguntas frequentes: abre e fecha suave ---------- */
details.faq-item[open] > :not(summary){ animation:m-drop-in .26s var(--m-out) both; }
details.faq-item.is-closing > :not(summary){ animation:m-drop-out .16s var(--m-in) both; }
.faq-extra:not([hidden]){ animation:m-drop-in .26s var(--m-out) both; }

/* ---------- barra de progresso das etapas (linha que vai enchendo) ---------- */
.steps.m-steps::after{
  content:''; position:absolute; top:15px; left:24px; right:24px; height:2px; background:var(--copper,#fe6d30);
  transform-origin:0 50%; transform:scaleX(var(--steps-p,0)); transition:transform .3s var(--m-out); z-index:0; pointer-events:none;
}

/* prévia em esqueleto do resultado, mostrada enquanto o dimensionamento é calculado */
.sk-preview{ max-width:640px; margin:26px auto 0; }
.sk-preview-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:560px){ .sk-preview-grid{ grid-template-columns:1fr 1fr; } }

/* ---------- revelar ao rolar (só liga quando o JS marca o elemento) ---------- */
@media (prefers-reduced-motion:no-preference){
  .m-js [data-reveal]{
    opacity:0; transform:translateY(12px); filter:blur(3px);
    transition:opacity .5s var(--m-out), transform .5s var(--m-out), filter .5s var(--m-out);
    transition-delay:calc(var(--i,0) * 70ms);
  }
  .m-js [data-reveal].is-in{ opacity:1; transform:none; filter:none; }
  @view-transition{ navigation:auto; }
  ::view-transition-old(root){ animation:m-fade-out .14s var(--m-in) both; }
  ::view-transition-new(root){ animation:m-fade-in .22s var(--m-out) both; }
}

/* ---------- movimento reduzido: sem deslocamento; indicadores continuam legíveis ---------- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
  .sk::after{ display:none; }
  .is-busy::before{ border-style:dotted; }
  .m-bar > i{ width:100%; opacity:.5; transform:none; }
}