/* Motion — Suíte VAX v1.0
 * Requer: tokens.css
 */

@view-transition {
  navigation: auto;
}

.suite-page {
  view-transition-name: suite-content;
}

::view-transition-old(suite-content) {
  animation: suite-page-exit var(--suite-duration-fast) var(--mo-ease-in) both;
}

::view-transition-new(suite-content) {
  animation: suite-page-enter var(--suite-duration-normal) var(--mo-ease-out) both;
}

::view-transition-old(suite-sidebar),
::view-transition-new(suite-sidebar),
::view-transition-old(suite-header),
::view-transition-new(suite-header) {
  animation: none;
}

@keyframes suite-page-exit {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(var(--mo-page-exit-y, -4px));
  }
}

@keyframes suite-page-enter {
  from {
    opacity: 0;
    transform: translateY(var(--mo-enter-y, 8px));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes mo-enter {
  from {
    opacity: 0;
    transform: translateY(var(--mo-enter-y));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes mo-enter-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Fallback quando View Transitions indisponível */
html:not(.suite-vt) body .suite-page > main,
html:not(.suite-vt) body .layout-main > main {
  animation: suite-page-enter var(--suite-duration-normal) var(--mo-ease-out) both;
  animation-delay: 20ms;
}

html:not(.suite-vt) body .suite-page > .ph-shell,
html:not(.suite-vt) body .layout-main > .ph-shell {
  animation: suite-page-enter var(--suite-duration-normal) var(--mo-ease-out) both;
}

/* Mesma rota, só query (filtros / ?emp=): sem animação de entrada */
html.suite-soft-nav body .suite-page > main,
html.suite-soft-nav body .layout-main > main,
html.suite-soft-nav body .suite-page > .ph-shell,
html.suite-soft-nav body .layout-main > .ph-shell {
  animation: none !important;
}

html.suite-soft-nav .mo-stagger > * {
  animation: none !important;
}

.mo-stagger > * {
  animation: mo-enter var(--suite-duration-normal) var(--mo-ease-out) both;
}
.mo-stagger > *:nth-child(1) { animation-delay: 0ms; }
.mo-stagger > *:nth-child(2) { animation-delay: 24ms; }
.mo-stagger > *:nth-child(3) { animation-delay: 48ms; }
.mo-stagger > *:nth-child(4) { animation-delay: 72ms; }
.mo-stagger > *:nth-child(5) { animation-delay: 96ms; }
.mo-stagger > *:nth-child(6) { animation-delay: 120ms; }
.mo-stagger > *:nth-child(7) { animation-delay: 144ms; }
.mo-stagger > *:nth-child(8) { animation-delay: 168ms; }

/* A View Transition já move o conteúdo como uma unidade. */
html.suite-vt .mo-stagger > * {
  animation: none;
}

.mo-card,
.cartao,
.kpi-card,
.db-kpi,
.od-card,
.bd-card,
[data-suite-interactive-card] {
  transition:
    box-shadow var(--suite-duration-fast) var(--mo-ease-standard),
    border-color var(--suite-duration-fast) var(--mo-ease-standard),
    background-color var(--suite-duration-fast) var(--mo-ease-standard),
    transform var(--suite-duration-fast) var(--mo-ease-standard);
}

a.cartao,
.cartao.mo-clickable,
.db-trend-link {
  cursor: pointer;
}

a.cartao:hover,
.cartao.mo-clickable:hover,
.db-trend-link:hover,
[data-suite-interactive-card]:hover {
  box-shadow: 0 2px 6px rgba(47, 49, 54, 0.08), 0 6px 18px rgba(47, 49, 54, 0.06);
  transform: translateY(-1px);
}

tbody tr td {
  transition: background-color var(--suite-duration-fast) var(--mo-ease-standard);
}

.suite-row-enter {
  animation: suite-row-in var(--suite-duration-normal) var(--mo-ease-out) both;
}

@keyframes suite-row-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Microinterações Lucide opt-in automático em controles interativos. */
.suite-motion-icon {
  transform-origin: center;
  transition: transform var(--suite-duration-icon, 180ms) var(--mo-ease-out);
}

:is(button, a, .botao, [role="button"], summary):not(.suite-action-btn):hover .suite-motion-icon.lucide-filter {
  transform: translateY(-1px) scaleX(0.96);
}

:is(button, a, .botao, [role="button"], summary):not(.suite-action-btn):hover .suite-motion-icon.lucide-download {
  transform: translateY(2px);
}

:is(button, a, .botao, [role="button"], summary):not(.suite-action-btn):hover .suite-motion-icon.lucide-calendar {
  transform: translateY(-1px);
}

:is(button, a, .botao, [role="button"], summary):not(.suite-action-btn):hover
  :is(.suite-motion-icon.lucide-chevron-down, .suite-motion-icon.lucide-chevron-right) {
  transform: rotate(4deg);
}

:is(button, a, .botao, [role="button"], summary):not(.suite-action-btn):hover
  :is(.suite-motion-icon.lucide-refresh-cw, .suite-motion-icon.lucide-rotate-cw) {
  transform: rotate(24deg);
}

/* Press feedback */
button,
.botao {
  transition:
    background-color var(--suite-duration-fast) var(--mo-ease-standard),
    border-color var(--suite-duration-fast) var(--mo-ease-standard),
    box-shadow var(--suite-duration-fast) var(--mo-ease-standard),
    transform var(--suite-duration-fast) var(--mo-ease-standard),
    opacity var(--suite-duration-fast) var(--mo-ease-standard);
}

button:active:not(:disabled),
.botao:active:not(:disabled) {
  transform: scale(var(--suite-press-scale, 0.985));
}

.modal-fundo {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--suite-duration-normal) var(--mo-ease-standard),
    visibility var(--suite-duration-normal) var(--mo-ease-standard);
  display: flex !important;
  pointer-events: none;
}

.modal-fundo.aberto {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-fundo > .modal {
  opacity: 0;
  transform: scale(var(--mo-modal-scale)) translateY(6px);
  transition:
    opacity var(--suite-duration-normal) var(--mo-ease-out),
    transform var(--suite-duration-normal) var(--mo-ease-out);
}

.modal-fundo.aberto > .modal {
  opacity: 1;
  transform: none;
}

#toast .suite-toast,
#toast > div {
  transition:
    opacity var(--suite-duration-normal) var(--mo-ease-out),
    transform var(--suite-duration-normal) var(--mo-ease-out);
}

.ph-filtro-sel,
.ph-ctrl select {
  transition:
    border-color var(--suite-duration-fast) var(--mo-ease-standard),
    box-shadow var(--suite-duration-fast) var(--mo-ease-standard);
}

.ph-filtro-sel:focus,
.ph-ctrl select:focus {
  border-color: var(--mo-primary);
  box-shadow: 0 0 0 2px var(--mo-primary-ring);
}

.mo-bar-fill {
  transition: width var(--suite-duration-slow) var(--mo-ease-out);
  width: 0;
}

.mo-bar-fill.mo-ready {
  width: var(--mo-bar-target, 100%);
}

.flash {
  animation: mo-enter-fade var(--suite-duration-normal) var(--mo-ease-out);
}

button.mo-loading,
.botao.mo-loading {
  opacity: 0.75;
  pointer-events: none;
  position: relative;
}

.ph-shell .botao,
.ph-shell a.botao,
.ph-toolbar .botao,
.ph-toolbar a.botao {
  transition:
    background-color var(--suite-duration-fast) var(--mo-ease-standard),
    border-color var(--suite-duration-fast) var(--mo-ease-standard),
    box-shadow var(--suite-duration-fast) var(--mo-ease-standard),
    transform var(--suite-duration-fast) var(--mo-ease-standard);
}

.ph-actions .botao,
.ph-actions a.botao,
.ph-toolbar .botao,
.ph-toolbar a.botao {
  animation: mo-enter var(--suite-duration-normal) var(--mo-ease-out) both;
  animation-delay: 24ms;
}

.ph-shell .ph-btn-action:hover,
.ph-toolbar .botao.sec:hover,
.ph-toolbar .botao.cinza:hover,
.ph-shell .botao.sec:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(47, 49, 54, 0.08), 0 4px 12px rgba(47, 49, 54, 0.06);
}

.ph-shell .botao:active,
.ph-shell a.botao:active,
.ph-toolbar .botao:active,
.ph-toolbar a.botao:active {
  transform: scale(var(--suite-press-scale, 0.985));
}

/* ---- Ícones de módulo: preenchimento em "tijolos" (hover + 1ª entrada pós-login) ---- */
.mo-icon-fx {
  position: relative;
  overflow: hidden;
}

.mo-icon-fx-mask {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.mo-icon-fx-brick {
  position: absolute;
  background: #fff;
  border-radius: 1px;
  transform: scale(1);
  opacity: 1;
}

.mo-icon-fx-mask.mo-icon-fx-dissolve .mo-icon-fx-brick {
  animation-name: mo-icon-brick-out;
  animation-duration: var(--suite-duration-icon);
  animation-timing-function: var(--mo-ease-out);
  animation-fill-mode: both;
}

@keyframes mo-icon-brick-out {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(0); opacity: 0; }
}

.mo-icon-fx svg {
  position: relative;
  z-index: 2;
}

.mo-icon-fx.mo-icon-drawing svg > * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.mo-icon-fx.mo-icon-draw-go svg > * {
  animation: mo-icon-draw 520ms ease forwards;
}

@keyframes mo-icon-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

.mo-icon-fx.mo-icon-fx-pop svg {
  animation: mo-icon-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes mo-icon-pop {
  0% { transform: scale(1) rotate(0); }
  40% { transform: scale(1.28) rotate(-8deg); }
  70% { transform: scale(0.94) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --suite-duration-fast: 0.01ms;
    --suite-duration-icon: 0.01ms;
    --suite-duration-normal: 0.01ms;
    --suite-duration-slow: 0.01ms;
  }

  .mo-icon-fx-mask {
    display: none !important;
  }

  .mo-icon-fx.mo-icon-fx-pop svg {
    animation: none !important;
  }

  .layout-main > .ph-shell,
  .layout-main > main,
  .mo-stagger > *,
  .flash {
    animation: none !important;
  }

  #toast .suite-toast,
  #toast > div {
    transform: none !important;
  }

  ::view-transition-old(suite-content),
  ::view-transition-new(suite-content) {
    animation: none !important;
  }

  .modal-fundo > .modal {
    transform: none;
  }

  .suite-motion-icon,
  :is(button, a, .botao, [role="button"], summary):hover .suite-motion-icon {
    transition: none;
    transform: none;
  }

  .mo-bar-fill {
    transition: none;
    width: var(--mo-bar-target, 100%);
  }

  .ph-actions .botao,
  .ph-actions a.botao,
  .ph-toolbar .botao,
  .ph-toolbar a.botao {
    animation: none;
  }

  button:active,
  .botao:active {
    transform: none;
  }
}