/* ==========================================================
   KIT DE MOVIMENTO · motion.css
   Par do motion.js. Regra da casa: o JS só troca classe e
   atributo; toda curva, tempo e pose mora aqui.
   O HTML nasce na pose final: sem JS ou com "reduzir
   movimento" a página aparece pronta, nunca vazia.
   ========================================================== */

:root {
  /* curvas */
  --mv-chega:  cubic-bezier(0.22, 1, 0.36, 1);    /* entrada padrão */
  --mv-calmo:  cubic-bezier(0.4, 0, 0.2, 1);      /* mudança neutra, acordeão, hover */
  --mv-sai:    cubic-bezier(0.5, 0, 0.9, 0.35);   /* saída: acelera e some */
  --mv-pouso:  cubic-bezier(0.5, 0, 0.25, 1);     /* objeto grande pousando */
  --mv-balao:  cubic-bezier(0.175, 0.885, 0.32, 1.1); /* mensagem de chat */
  --mv-abrir:  cubic-bezier(0.34, 0.28, 0.18, 1); /* algo se abrindo do próprio tamanho */
  --mv-slot:   cubic-bezier(0.5, 0.05, 0.2, 1);   /* troca de texto em slot */

  /* tempos */
  --mv-t-sai: 200ms;
  --mv-t-entra: 400ms;
  --mv-t-hover: 300ms;
}

/* Quadro mudo: zera transições para rearmar uma cena sem animar a volta */
.is-mudo, .is-mudo * { transition: none !important; animation: none !important; }

/* Pausa genérica de animações CSS em laço (fora da tela ou aba oculta) */
.is-parado, .is-parado * , .is-pausado, .is-pausado * { animation-play-state: paused !important; }


/* ---------- 01 · Faixa infinita ---------- */
[data-mv="faixa"] {
  --mv-vao: 32px;
  --mv-fade: 80px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--mv-fade), #000 calc(100% - var(--mv-fade)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--mv-fade), #000 calc(100% - var(--mv-fade)), transparent 100%);
}
.mv-faixa-fita {
  display: flex;
  width: max-content;
  animation: mv-anda var(--mv-dur, 40s) linear infinite;
}
[data-sentido="volta"] > .mv-faixa-fita { animation-direction: reverse; }
.mv-faixa-fila { display: flex; flex: none; align-items: center; }
/* o vão vai no item, inclusive no último, nunca em gap: é o que apaga a emenda */
.mv-faixa-fila > * { flex: none; margin-right: var(--mv-vao); }
@keyframes mv-anda { to { transform: translate3d(calc(-100% / var(--mv-copias, 2)), 0, 0); } }


/* ---------- 02 · Header que troca de tema ---------- */
[data-mv="header"] {
  transition: background-color var(--mv-t-hover) ease, color var(--mv-t-hover) ease,
              border-color var(--mv-t-hover) ease, box-shadow var(--mv-t-hover) ease;
}
/* o visual de .is-claro é de cada página */


/* ---------- 03 · Montagem em cascata ---------- */
.mv-js [data-mv="monta"]:not(.is-vivo) .mv-peca { opacity: 0; }
[data-mv="monta"].is-vivo .mv-peca {
  animation: mv-entra 520ms var(--mv-chega)
             calc(var(--mv-base, 120ms) + var(--i, 0) * var(--mv-passo, 90ms)) backwards;
}
[data-mv="monta"].is-vivo .mv-peca.mv-cresce-x { animation-name: mv-cresce-x; animation-duration: 700ms; transform-origin: left center; }
[data-mv="monta"].is-vivo .mv-peca.mv-cresce-y { animation-name: mv-cresce-y; animation-duration: 700ms; transform-origin: center bottom; }
.mv-traca { stroke-dasharray: 1; }
[data-mv="monta"].is-vivo .mv-peca.mv-traca { animation-name: mv-traca; animation-duration: 1100ms; animation-timing-function: var(--mv-calmo); }
@keyframes mv-entra    { from { opacity: 0; transform: translateY(10px); } }
@keyframes mv-cresce-x { from { transform: scaleX(0); } }
@keyframes mv-cresce-y { from { transform: scaleY(0); } }
@keyframes mv-traca    { from { stroke-dashoffset: 1; } }


/* ---------- 04 · Máquina de escrever ---------- */
[data-mv="escreve"] { white-space: nowrap; }
[data-mv="escreve"]::after {
  content: "";
  display: inline-block;
  width: 2px; height: 1.1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: currentColor;
  animation: mv-pisca 1s steps(1) infinite;
}
@keyframes mv-pisca { 50% { opacity: 0; } }


/* ---------- 05 · Chat que se escreve ---------- */
.mv-js [data-mv="chat"] .mv-msg:not(.is-vista) { display: none; }
[data-mv="chat"] .mv-digitando:not(.is-vista) { display: none; }
[data-mv="chat"] .mv-msg.is-vista { animation: mv-balao 400ms var(--mv-balao) backwards; }
[data-mv="chat"] .mv-rolo { overflow: hidden; }
@keyframes mv-balao { from { opacity: 0; transform: translateY(15px); } }
.mv-pontos { display: inline-flex; gap: 4px; }
.mv-pontos i {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  animation: mv-ponto 1.4s infinite;
}
.mv-pontos i:nth-child(2) { animation-delay: .2s; }
.mv-pontos i:nth-child(3) { animation-delay: .4s; }
@keyframes mv-ponto { 0%, 100% { opacity: .3; } 40% { opacity: 1; } }


/* ---------- 06 · Utilidades para relógio de fases ---------- */
/* Abrir a partir do próprio retângulo: defina --mv-de no elemento */
.mv-abre {
  clip-path: inset(var(--mv-de, 40% 10% 40% 10% round 14px));
  transition: clip-path 620ms var(--mv-abrir);
}
.is-aberto .mv-abre { clip-path: inset(0 round var(--mv-raio, 18px)); }
.is-saindo .mv-abre { transition-duration: 340ms; }

/* Troca de texto em slot: dois filhos, o segundo assume */
.mv-slot { display: inline-grid; overflow: hidden; vertical-align: bottom; }
.mv-slot > * { grid-area: 1 / 1; transition: transform 380ms var(--mv-slot); }
.mv-slot > :last-child { transform: translateY(105%); }
.is-trocado .mv-slot > :first-child { transform: translateY(-105%); }
.is-trocado .mv-slot > :last-child { transform: none; }


/* ---------- 07 · Palco com cenas ---------- */
[data-mv="palco"] .mv-cenas { display: grid; }
[data-mv="palco"] .mv-cena { grid-area: 1 / 1; opacity: 0; transition: opacity 550ms ease; }
[data-mv="palco"] .mv-cena.is-ativa { opacity: 1; }
.mv-js [data-mv="palco"] .mv-cena:not(.is-ativa) .mv-peca { opacity: 0; }
[data-mv="palco"] .mv-cena.is-ativa .mv-peca {
  animation: mv-entra 560ms var(--mv-chega) calc(var(--mv-base, 450ms) + var(--i, 0) * var(--mv-passo, 600ms)) backwards;
}
[data-mv="palco"] .mv-cena.is-ativa .mv-zoom { animation: mv-zoom calc(var(--mv-dur, 4600ms) + 800ms) linear forwards; }
@keyframes mv-zoom { from { transform: scale(1.06); } }
/* lista de passos: acordeão sem medir altura + barra que dura o mesmo que a cena */
.mv-corpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 450ms var(--mv-chega); }
.mv-corpo > * { min-height: 0; overflow: hidden; }
[data-ir].is-ativa .mv-corpo { grid-template-rows: 1fr; }
.mv-progresso { transform: scaleX(0); transform-origin: left center; }
.mv-js [data-ir].is-ativa .mv-progresso { animation: mv-enche var(--mv-dur, 4600ms) linear forwards; }
@keyframes mv-enche { from { transform: scaleX(0); } to { transform: scaleX(1); } }


/* ---------- 08 · Cartão que segue o mouse ---------- */
[data-mv="tilt"] { perspective: 1200px; }
[data-mv="tilt"] .mv-tilt { transform-style: preserve-3d; will-change: transform; }
.mv-flutua { animation: mv-flutua 4.8s ease-in-out infinite alternate; }
@keyframes mv-flutua { from { transform: translateY(8px) rotate(1deg); } to { transform: translateY(-8px) rotate(-0.8deg); } }


/* ---------- 10 · Acordeão nativo que anima a altura ---------- */
.mv-faq { interpolate-size: allow-keywords; }
.mv-faq details::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 340ms var(--mv-calmo), content-visibility 340ms allow-discrete;
}
.mv-faq details[open]::details-content { block-size: auto; }


/* ---------- Reduzir movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mv-faixa-fita { animation: none; transform: translate3d(calc(var(--mv-pose, 0px) * -1), 0, 0); }
  [data-mv] *, [data-mv] *::before, [data-mv] *::after,
  .mv-flutua, .mv-faq details::details-content {
    animation: none !important;
    transition: none !important;
  }
  .mv-js [data-mv="monta"]:not(.is-vivo) .mv-peca,
  .mv-js [data-mv="palco"] .mv-cena:not(.is-ativa) .mv-peca { opacity: 1; }
  [data-ir].is-ativa .mv-progresso { transform: none; }
}