/* Camada de motion do Dentro do Round (View Transitions entre documentos: card e troca).
   Regras e decisões: docs/sistema-visual/INTEGRACAO_NO_SITE.md ("Camada de motion"); notas de cada etapa: docs/motion/reconciliacao/NOTAS-DA-CAMADA.md. */

/* ===== etapa: card ===== */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  /* O snapshot da página longa já reserva a barra vertical. A página curta
     precisa da mesma geometria: sem isso, a composição centrada salta meia
     largura de scrollbar entre os dois documentos (inclusive o cabeçalho). */
  html[data-motion~="card"] { scrollbar-gutter: stable; }
  html[data-motion~="card"]::view-transition { background-color: #181818; }
  html[data-motion~="card"].ddr-mt-cab::view-transition-group(ddr-header),
  html[data-motion~="card"].ddr-mt-cab::view-transition-new(ddr-header) { animation: none; }
  html[data-motion~="card"].ddr-mt-cab::view-transition-old(ddr-header) { animation: none; opacity: 0; }
  html[data-motion~="card"].ddr-mt-cab::view-transition-group(ddr-header) { z-index: 4; }

  html[data-motion~="card"]:not(.ddr-mt-card)::view-transition-old(ddr-card):only-child,
  html[data-motion~="card"]:not(.ddr-mt-card)::view-transition-old(ddr-card-titulo):only-child,
  html[data-motion~="card"]:not(.ddr-mt-card)::view-transition-old(ddr-card-capa):only-child { animation: 120ms cubic-bezier(.4, 0, 1, 1) both ddr-motion-transicoes-card-fora; }

  html[data-motion~="card"].ddr-mt-card::view-transition-group(root) { animation: none; }
  html[data-motion~="card"].ddr-mt-card::view-transition-image-pair(root) { isolation: isolate; }
  html[data-motion~="card"].ddr-mt-card::view-transition-old(root) { animation: 480ms linear both ddr-motion-transicoes-card-raiz-sai; mix-blend-mode: plus-lighter; }
  html[data-motion~="card"].ddr-mt-card::view-transition-new(root) { animation: 480ms linear both ddr-motion-transicoes-card-raiz-entra; mix-blend-mode: plus-lighter; }

  html[data-motion~="card"].ddr-mt-card::view-transition-group(ddr-card) { z-index: 1; }
  html[data-motion~="card"].ddr-mt-card::view-transition-group(ddr-card-capa) { z-index: 2; animation-duration: 480ms; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  html[data-motion~="card"].ddr-mt-card::view-transition-group(ddr-card-titulo) { z-index: 3; animation-duration: 480ms; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  html[data-motion~="card"].ddr-mt-card::view-transition-old(ddr-card-capa),
  html[data-motion~="card"].ddr-mt-card::view-transition-new(ddr-card-capa) { animation-duration: 480ms; }

  html[data-motion~="card"].ddr-mt-card.ddr-mt-ida::view-transition-old(ddr-card-titulo) { animation: 480ms linear both ddr-motion-transicoes-card-t-sai; }
  html[data-motion~="card"].ddr-mt-card.ddr-mt-ida::view-transition-new(ddr-card-titulo) { animation: 480ms linear both ddr-motion-transicoes-card-t-entra; }
  html[data-motion~="card"].ddr-mt-card.ddr-mt-ida::view-transition-group(ddr-card) { animation: 480ms cubic-bezier(.2, .8, .2, 1) both ddr-motion-transicoes-card-sup-ida; background-color: #F6F4EF; transform-origin: 0 0; }
  html[data-motion~="card"].ddr-mt-card.ddr-mt-ida::view-transition-image-pair(ddr-card) { animation: 480ms linear both ddr-motion-transicoes-card-par-ida; background-color: var(--ddr-mt-bg, transparent); border-radius: var(--ddr-mt-raio, 0); }
  html[data-motion~="card"].ddr-mt-card.ddr-mt-ida::view-transition-old(ddr-card) { animation: 80ms linear both ddr-motion-transicoes-card-fora; }

  html[data-motion~="card"].ddr-mt-card.ddr-mt-volta::view-transition-old(root) { animation: 480ms linear both ddr-motion-transicoes-card-volta-sai; mix-blend-mode: normal; }
  html[data-motion~="card"].ddr-mt-card.ddr-mt-volta::view-transition-new(root) { animation: 480ms linear both ddr-motion-transicoes-card-volta-entra; mix-blend-mode: normal; }
  html[data-motion~="card"].ddr-mt-card.ddr-mt-volta::view-transition-group(ddr-card) { animation: 480ms linear both ddr-motion-transicoes-card-sup-volta; background-color: #F6F4EF; transform-origin: 0 0; }
  html[data-motion~="card"].ddr-mt-card.ddr-mt-volta::view-transition-new(ddr-card) { animation: 480ms linear both ddr-motion-transicoes-card-chega; }
  html[data-motion~="card"].ddr-mt-card.ddr-mt-volta::view-transition-group(ddr-card-titulo),
  html[data-motion~="card"].ddr-mt-card.ddr-mt-volta::view-transition-group(ddr-card-capa) { animation-duration: 360ms; animation-delay: 120ms; }
  html[data-motion~="card"].ddr-mt-card.ddr-mt-volta::view-transition-old(ddr-card-capa),
  html[data-motion~="card"].ddr-mt-card.ddr-mt-volta::view-transition-new(ddr-card-capa) { animation-duration: 360ms; }
  html[data-motion~="card"].ddr-mt-card.ddr-mt-volta::view-transition-old(ddr-card-titulo) { animation: 480ms linear both ddr-motion-transicoes-card-tv-sai; }
  html[data-motion~="card"].ddr-mt-card.ddr-mt-volta::view-transition-new(ddr-card-titulo) { animation: 480ms linear both ddr-motion-transicoes-card-tv-entra; }

  html[data-motion~="card"].ddr-mt-card.ddr-mt-ida::view-transition-old(ddr-card-titulo):only-child,
  html[data-motion~="card"].ddr-mt-card.ddr-mt-ida::view-transition-old(ddr-card-capa):only-child,
  html[data-motion~="card"].ddr-mt-card.ddr-mt-ida::view-transition-old(ddr-header):only-child { animation: 480ms linear both ddr-motion-transicoes-card-raiz-sai; }
  html[data-motion~="card"].ddr-mt-card.ddr-mt-ida::view-transition-new(ddr-card-titulo):only-child,
  html[data-motion~="card"].ddr-mt-card.ddr-mt-ida::view-transition-new(ddr-card-capa):only-child { animation: 480ms linear both ddr-motion-transicoes-card-raiz-entra; }
  html[data-motion~="card"].ddr-mt-card.ddr-mt-volta::view-transition-old(ddr-card-titulo):only-child,
  html[data-motion~="card"].ddr-mt-card.ddr-mt-volta::view-transition-old(ddr-card-capa):only-child,
  html[data-motion~="card"].ddr-mt-card.ddr-mt-volta::view-transition-old(ddr-header):only-child { animation: 480ms linear both ddr-motion-transicoes-card-cobre; }
  html[data-motion~="card"].ddr-mt-card.ddr-mt-volta::view-transition-new(ddr-card-titulo):only-child,
  html[data-motion~="card"].ddr-mt-card.ddr-mt-volta::view-transition-new(ddr-card-capa):only-child { animation: 480ms linear both ddr-motion-transicoes-card-volta-entra; }

  @keyframes ddr-motion-transicoes-card-fora { to { opacity: 0; } }
  @keyframes ddr-motion-transicoes-card-raiz-sai { 0%, 30% { opacity: 1; } 55%, 100% { opacity: 0; } }
  @keyframes ddr-motion-transicoes-card-raiz-entra { 0%, 30% { opacity: 0; } 55%, 100% { opacity: 1; } }
  @keyframes ddr-motion-transicoes-card-t-sai { 0% { opacity: 1; } 35%, 100% { opacity: 0; } }
  @keyframes ddr-motion-transicoes-card-t-entra { 0%, 18% { opacity: 0; } 58%, 100% { opacity: 1; } }
  @keyframes ddr-motion-transicoes-card-tv-sai { 0% { opacity: 1; } 70%, 100% { opacity: 0; } }
  @keyframes ddr-motion-transicoes-card-tv-entra { 0%, 30% { opacity: 0; } 100% { opacity: 1; } }
  @keyframes ddr-motion-transicoes-card-sup-ida {
    55% { opacity: 1; }
    to { transform: translate(0px, var(--ddr-mt-top)) scale(var(--ddr-mt-sx), var(--ddr-mt-sy)); opacity: 0; } }
  @keyframes ddr-motion-transicoes-card-par-ida { 0%, 17% { opacity: 1; } 55%, 100% { opacity: 0; } }
  @keyframes ddr-motion-transicoes-card-sup-volta {
    0% { transform: translate(0px, var(--ddr-mt-top)) scale(var(--ddr-mt-sx), var(--ddr-mt-sy)); opacity: 0; }
    25% { transform: translate(0px, var(--ddr-mt-top)) scale(var(--ddr-mt-sx), var(--ddr-mt-sy)); opacity: 1; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
    100% { opacity: 1; } }
  @keyframes ddr-motion-transicoes-card-volta-sai { 0%, 24.9% { opacity: 1; } 25%, 100% { opacity: 0; } }
  @keyframes ddr-motion-transicoes-card-volta-entra { 0%, 24.9% { opacity: 0; } 25%, 100% { opacity: 1; } }
  @keyframes ddr-motion-transicoes-card-chega { 0%, 75% { opacity: 0; } 100% { opacity: 1; } }
  @keyframes ddr-motion-transicoes-card-cobre { 0% { opacity: 1; } 25%, 100% { opacity: 0; } }
}
/* ===== fim: card ===== */

/* ===== etapa: troca ===== */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  html[data-motion~="troca"] { scrollbar-gutter: stable; }
  html[data-motion~="troca"]::view-transition { background-color: #181818; }
  html[data-motion~="troca"].ddr-mt-cab::view-transition-group(ddr-header),
  html[data-motion~="troca"].ddr-mt-cab::view-transition-new(ddr-header) { animation: none; }
  html[data-motion~="troca"].ddr-mt-cab::view-transition-old(ddr-header) { animation: none; opacity: 0; }
  html[data-motion~="troca"].ddr-mt-cab::view-transition-group(ddr-header) { z-index: 4; }
  html[data-motion~="troca"]::view-transition-group(root) { animation: none; }
  html[data-motion~="troca"]::view-transition-old(root),
  html[data-motion~="troca"]::view-transition-old(ddr-header):only-child { animation: 120ms cubic-bezier(.4, 0, 1, 1) both ddr-motion-transicoes-troca-sai; }
  html[data-motion~="troca"]::view-transition-new(root) { animation: 200ms cubic-bezier(.2, .8, .2, 1) 120ms both ddr-motion-transicoes-troca-entra; }
  @keyframes ddr-motion-transicoes-troca-sai { from { opacity: 1; } to { opacity: 0; } }
  @keyframes ddr-motion-transicoes-troca-entra { from { opacity: 0; } to { opacity: 1; } }
}
/* ===== fim: troca ===== */