/* Movimento Percurso (Nítido, Cadência e Pulso), adaptado de app-lab/ritmos/motion.css e experiencia.css.
   Só efeitos: nada aqui esconde conteúdo. preferencias.js põe data-ritmo; movimento.js liga .effects-off quando não pode animar. */

/* Nítido e efeitos desligados: estado muda na hora, sem transição, animação nem rolagem suave. */
html[data-ritmo="nitido"], html[data-ritmo="nitido"] *, html[data-ritmo="nitido"] *::before, html[data-ritmo="nitido"] *::after,
html[data-ritmo].effects-off, html[data-ritmo].effects-off *, html[data-ritmo].effects-off *::before, html[data-ritmo].effects-off *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
html[data-ritmo="nitido"] :active, html[data-ritmo].effects-off :active { transform: none !important; }
html[data-ritmo].effects-off :is(button, a, summary) { translate: none !important; scale: none !important; }

/* A pressão é do controlador (scale 140 ms): sem duas escalas concorrentes. */
html[data-ritmo]:not(.effects-off) :is(.btn, .btn-sec, main button):active:not(:disabled) { transform: none; }
html[data-ritmo="cadencia"]:not(.effects-off) .day-track::before { background: var(--line-strong); }

/* Pulso: hover curto (150 ms) e magnético; nunca onda nem anel. */
html[data-ritmo="pulso"]:not(.effects-off) :is(main a, main button, main summary, .abas a, .mais > summary) {
  translate: var(--mag-x, 0px) var(--mag-y, 0px);
  transition: translate 150ms var(--ease-out), background-color 120ms, color 120ms, border-color 120ms;
}
html[data-ritmo="pulso"] :is(main a, main button, main summary, .abas a) > svg.ico { transition: transform 150ms var(--ease-out); }
@media (hover: hover) {
  html[data-ritmo="pulso"]:not(.effects-off) :is(.other-actions > a, .cartao-dia):hover > svg.ico:last-child { transform: translateX(6px); }
  html[data-ritmo="pulso"]:not(.effects-off) .next-action .btn:hover > svg.ico { transform: rotate(90deg); }
  html[data-ritmo="pulso"]:not(.effects-off) .abas a:hover > svg.ico { transform: translateY(-4px) rotate(-7deg); }
  html[data-ritmo="pulso"]:not(.effects-off) .marca:hover b { display: inline-block; transform: translateY(-4px); transition: transform 150ms var(--ease-out); }
}

/* Algarismos que rolam (180 ms + 12 ms por dígito). */
.motion-digit { display: inline-block; overflow: clip; vertical-align: bottom; line-height: 1.2; perspective: 200px; }
.motion-digit > span { display: inline-block; transform-origin: center 75%; }
.barra-progresso rect { transform-box: fill-box; transform-origin: left; }

/* Trilha do assistente: o passo atual chega em 240 ms. */
html[data-ritmo="pulso"]:not(.effects-off) .trilha .step-arrived::after { animation: percurso-passo 240ms var(--ease-out) backwards; }
@keyframes percurso-passo { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Corrente: canvas só no Pulso e só depois do primeiro desenho; antes disso, linha e ponto em CSS. */
.app-current { position: absolute; bottom: -6px; left: 0; width: 100%; height: 18px; overflow: clip; pointer-events: none; border-radius: 0 0 var(--radius) var(--radius); color: var(--brand); }
.scroll-thread { position: absolute; bottom: 0; height: 2px; width: 100%; background: var(--brand); transform: scaleX(var(--scroll-progress, 0)); transform-origin: left; }
html:not([data-ritmo]) .scroll-thread, html.effects-off .scroll-thread { display: none; }
html[data-ritmo="pulso"] .flow-shader { display: block; width: 100%; height: 18px; visibility: hidden; }
html[data-ritmo="pulso"] .app-current.shader-ready .flow-shader { visibility: visible; }
html[data-ritmo="pulso"] .day-shader { display: block; position: relative; width: 100%; height: 96px; visibility: hidden; pointer-events: none; }
html[data-ritmo="pulso"] .day-track { height: 96px; margin-top: 4px; }
html[data-ritmo="pulso"] .day-track::before { top: 47px; }
html[data-ritmo="pulso"] .track-dot { top: 44px; }
html[data-ritmo="pulso"] .day-track.shader-ready .day-shader { visibility: visible; }
html[data-ritmo="pulso"] .day-track.shader-ready::before, html[data-ritmo="pulso"] .day-track.shader-ready .track-dot { visibility: hidden; }
html[data-ritmo].effects-off .day-shader, html[data-ritmo].effects-off .flow-shader { visibility: hidden !important; }
html[data-ritmo].effects-off .day-track::before, html[data-ritmo].effects-off .track-dot { visibility: visible !important; }

@media (max-width: 520px) {
  html[data-ritmo="pulso"] .day-track, html[data-ritmo="pulso"] .day-shader { height: 76px; }
  html[data-ritmo="pulso"] .day-track::before { top: 37px; }
  html[data-ritmo="pulso"] .track-dot { top: 34px; }
}
/* O aparelho pediu menos movimento: tudo parado, a menos que a pessoa tenha ligado o movimento completo em Aparência. */
@media (prefers-reduced-motion: reduce) {
  html[data-ritmo]:not(.motion-opt-in) *, html[data-ritmo]:not(.motion-opt-in) *::before, html[data-ritmo]:not(.motion-opt-in) *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
}
/* Cores forçadas sempre vencem o opt-in. */
@media (forced-colors: active) {
  .day-shader, .flow-shader, .scroll-thread { display: none !important; }
  .app-current::before { background: CanvasText; }
  html[data-ritmo] *, html[data-ritmo] *::before, html[data-ritmo] *::after { animation: none !important; transition: none !important; }
}
@media print { .app-current, .day-shader, .day-track { display: none !important; } }