/* Movimento progressivo: conteúdo e navegação funcionam mesmo sem JavaScript. */
.abre { position: relative; isolation: isolate; overflow: clip; }
.abre::before { content: ''; position: absolute; z-index: -1; width: min(760px, 70vw); aspect-ratio: 1; border-radius: 50%; right: -12%; top: -18%; background: radial-gradient(circle, color-mix(in srgb, var(--gelo) 60%, transparent), transparent 68%); pointer-events: none; }
.mov-enfase { position: relative; display: inline-block; }
.mov-enfase::after { content: ''; position: absolute; bottom: .015em; left: 0; width: 100%; height: .07em; border-radius: 20px; background: var(--marca); transform-origin: left; }
.mov-faixa { overflow: hidden; padding: 23px 0; border-block: 1px solid var(--linha); background: var(--petroleo); color: var(--gelo); }
.mov-faixa__trilho { display: flex; width: max-content; }
.mov-faixa ul { display: flex; align-items: center; list-style: none; flex-shrink: 0; }
.mov-faixa ul[aria-hidden] { display: none; }
.mov-faixa li { display: flex; align-items: center; gap: 38px; padding-right: 38px; white-space: nowrap; font: 24px var(--display); }
.mov-faixa li span { color: var(--azul); font: 16px var(--corpo); }
.mov-faixa:not(.mov-ativa) .mov-faixa__trilho { width: auto; }
.mov-faixa:not(.mov-ativa) ul { flex-wrap: wrap; justify-content: center; gap: 16px 0; }
.mov-leitura { position: fixed; top: 0; left: 0; z-index: 90; width: 100%; height: 3px; background: var(--marca); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.mov-ready .abre::before { animation: mov-halo 12s ease-in-out infinite alternate; }
.mov-ready .mov-enfase::after { animation: mov-sublinhar 1.2s .25s cubic-bezier(.22,1,.36,1) both; }
.mov-ready .mov-enfase:last-child::after { animation-delay: .5s; }
.mov-ativa .mov-faixa__trilho { animation: mov-faixa 36s linear infinite; }
.mov-ativa ul[aria-hidden] { display: flex; }
.mov-ready .onda rect { transform-box: fill-box; transform-origin: center; animation: mov-onda 1.1s ease-in-out infinite alternate; }
.mov-ready .onda rect:nth-child(3n) { animation-delay: -.4s; }
.mov-ready .onda rect:nth-child(3n + 1) { animation-delay: -.8s; }
.mov-ready #plataforma .slot:nth-child(1) .bloco { animation: mov-soap 9s ease-in-out infinite; }
.mov-ready #plataforma .slot:nth-child(2) .bloco { animation: mov-soap 9s -4.5s ease-in-out infinite; }
.mov-ready .figura { --mov-tilt: 0deg; perspective: 1400px; }
.mov-ready .figura .mock { transform: rotateX(var(--mov-tilt, 0deg)); transform-origin: center; }
.mov-ready .botao { transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.mov-ready .botao svg { transition: transform .2s ease; }
@media (hover: hover) {
  .mov-ready .botao:hover { transform: translateY(-3px); box-shadow: 0 8px 20px color-mix(in srgb, var(--petroleo) 9%, transparent); }
  .mov-ready .botao:hover svg { transform: translateX(4px); }
  .mov-faixa:hover .mov-faixa__trilho { animation-play-state: paused; }
}
.mov-hidden *, .mov-hidden *::before, .mov-hidden *::after,
.mov-offscreen, .mov-offscreen *, .mov-offscreen::before, .mov-offscreen *::after { animation-play-state: paused !important; }
@keyframes mov-halo { to { transform: translate(-8%, 8%) scale(1.15); } }
@keyframes mov-sublinhar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mov-ponto { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--azul) 13%, transparent); } }
@keyframes mov-faixa { to { transform: translateX(-50%); } }
@keyframes mov-onda { to { transform: scaleY(.3); } }
@keyframes mov-soap { 5%, 20% { background: color-mix(in srgb, var(--gelo) 47%, transparent); } 0%, 25%, 100% { background: transparent; } }
@media (max-width: 760px) {
  .mov-faixa { padding-block: 18px; }
  .mov-faixa li { font-size: 20px; gap: 24px; padding-right: 24px; }
}
/* A cópia invisível reserva as linhas: digitar não desloca os blocos seguintes. */
.mov-digitacao { display: grid; }
.mov-texto-reserva, .mov-texto-vivo { grid-area: 1 / 1; min-width: 0; }
.mov-texto-vivo { display: none; }
.mov-ready .mov-texto-reserva { visibility: hidden; }
.mov-ready .mov-texto-vivo { display: block; }
.mov-escrevendo::after { content: ''; display: inline-block; height: 1em; width: 2px; margin-left: 2px; vertical-align: -.12em; background: var(--azul-fundo); animation: mov-cursor .8s ease-in-out infinite; }
.mov-ready .soap-item.mov-preenchendo { background: color-mix(in srgb, var(--gelo) 47%, transparent); }
.mov-ready .grava .ponto { animation: mov-ponto 1.8s ease-in-out infinite; }
.onda g { fill: var(--azul-fundo); }
.onda g:last-child { fill: var(--azul); }
@keyframes mov-cursor { 50% { opacity: .15; } }
/* Espera da entrada: igual ao primeiro quadro da animação de movimento.js, para o elemento nunca
   aparecer inteiro por um quadro e só então cair para 20%. Só vale com JS e sem movimento reduzido. */
.mov-ready .mov-espera { opacity: .2; transform: translateY(32px); }
.mov-ready .sec__num.mov-espera { transform: translateX(-20px); }
@media print { .mov-espera { opacity: 1 !important; transform: none !important; } }
@media (max-width: 760px) {
  #ia .grava { display: block; padding: 14px; }
  #ia .grava .rot, #ia .grava .fala { display: none; }
  #ia .onda { height: 40px; margin: 12px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .mov-ready .figura .mock { transform: none; }
  .mov-texto-reserva { visibility: visible !important; }
  .mov-texto-vivo { display: none !important; }
  .mov-faixa__trilho { transform: none !important; width: auto !important; }
  .mov-faixa ul { flex-wrap: wrap; justify-content: center; gap: 16px 0; }
  .mov-faixa ul[aria-hidden] { display: none; }
}