/* Motion compartilhado — receitas transitions.dev + helper js/motion.js (window.ntMotion).
   Regras: só o :root de cada receita (nunca o bloco de escala do _root.css, que colide com
   --ease-out/--duration-* do tema); *-ease sempre com fallback literal (tokens.css é assíncrono
   fora da home); sem bounce/overshoot. Documentação: docs/architecture/motion.md. */

/* ── 06 Modal open / close ───────────────────────────────────────────── */
:root {
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-open-dur) var(--modal-ease),
    opacity   var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-close-dur) var(--modal-ease),
    opacity   var(--modal-close-dur) var(--modal-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-modal { transition: none !important; }
}

/* <dialog class="t-modal">: o fundo acompanha o diálogo. ::backdrop não herda custom
   properties em todos os navegadores (valores literais) e a guarda global (*) do base.css
   não o cobre (guarda própria abaixo). */
dialog.t-modal::backdrop {
  opacity: 0;
  transition: opacity 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
dialog.t-modal.is-open::backdrop {
  opacity: 1;
  transition-duration: 250ms;
}
@media (prefers-reduced-motion: reduce) {
  dialog.t-modal::backdrop { transition: none !important; }
}

/* ── 05 Menu dropdown ────────────────────────────────────────────────── */
:root {
  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.t-dropdown {
  transform-origin: top left;
  transform: scale(var(--dropdown-pre-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-open-dur) var(--dropdown-ease),
    opacity   var(--dropdown-open-dur) var(--dropdown-ease);
  will-change: transform, opacity;
}
.t-dropdown[data-origin="top-right"]     { transform-origin: top right; }
.t-dropdown[data-origin="top-center"]    { transform-origin: top center; }
.t-dropdown[data-origin="bottom-left"]   { transform-origin: bottom left; }
.t-dropdown[data-origin="bottom-center"] { transform-origin: bottom center; }
.t-dropdown[data-origin="bottom-right"]  { transform-origin: bottom right; }

.t-dropdown.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-dropdown.is-closing {
  transform: scale(var(--dropdown-closing-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-close-dur) var(--dropdown-ease),
    opacity   var(--dropdown-close-dur) var(--dropdown-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-dropdown { transition: none !important; }
}

/* ── 07 Panel reveal — só tempos e easing: a gaveta mobile (components.css) desliza em X,
   sem o blur da receita. ───────────────────────────────────────────────── */
:root {
  --panel-open-dur: 400ms;
  --panel-close-dur: 350ms;
  --panel-ease: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

/* ── 01 Card resize — largura da sidebar do DS (ds-app.css) ───────────── */
:root {
  --resize-dur: 300ms;
  --resize-ease: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

/* ── 17 Tooltip — rótulo da sidebar recolhida (ds-app.css). Só tempos e escala:
   as cores vêm dos tokens do tema (claro/escuro). ─────────────────────── */
:root {
  --tt-in-dur: 150ms;
  --tt-out-dur: 50ms;
  --tt-scale: 0.98;
  --tt-delay: 80ms;
  --tt-in-ease: ease-out;
  --tt-out-ease: ease-out;
}

/* ── 07 Panel reveal (receita completa) — painéis das abas de planos (internet e telefonia).
   Os tempos e o easing estão no :root da 07 acima. ─────────────────────── */
:root {
  --panel-translate-y: 100px;
  --panel-blur: 2px;
}

.t-panel-slide {
  transform: translateY(var(--panel-translate-y));
  opacity: 0;
  filter: blur(var(--panel-blur));
  pointer-events: none;
  transition:
    transform var(--panel-close-dur) var(--panel-ease),
    opacity   var(--panel-close-dur) var(--panel-ease),
    filter    var(--panel-close-dur) var(--panel-ease);
  will-change: transform, opacity, filter;
}
.t-panel-slide[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transition:
    transform var(--panel-open-dur) var(--panel-ease),
    opacity   var(--panel-open-dur) var(--panel-ease),
    filter    var(--panel-open-dur) var(--panel-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-panel-slide { transition: none !important; }
}

/* Abas de planos: deslocamento curto (a grade troca no mesmo lugar). */
.nt-plans-grid.t-panel-slide { --panel-translate-y: 8px; }