:root {
  --m-char-dur: 1.2s; --m-char-stagger: 34ms;
  --m-word-dur: 1s; --m-word-stagger: 35ms;
  --m-block-dur: 1.1s; --m-block-stagger: 140ms;
  --m-draw-dur: 2s;
}

/* Letra a letra: só o título da entrada */
.js-motion [data-split='chars'] .letra {
  display: inline-block; opacity: 0; transform: translate(-.1em, .06em); filter: blur(.07em);
  transition: opacity var(--m-char-dur) var(--ease-out-quart), transform var(--m-char-dur) var(--ease-out-quart), filter var(--m-char-dur) var(--ease-out-quart);
  transition-delay: calc(150ms + var(--i) * var(--m-char-stagger));
}
.js-motion [data-split='chars'].is-in .letra { opacity: 1; transform: none; filter: none; }
.palavra-n { display: inline-block; white-space: nowrap; }

/* Palavras em máscara: títulos de secção */
.js-motion [data-split='words'] .mascara { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em .04em .16em; margin: -.12em -.04em -.16em; }
.js-motion [data-split='words'] .mascara > span {
  display: inline-block; transform: translateY(112%);
  transition: transform var(--m-word-dur) var(--ease-out-quint); transition-delay: calc(var(--i) * var(--m-word-stagger));
}
.js-motion [data-split='words'].is-in .mascara > span { transform: none; }

/* Blocos */
.js-motion [data-reveal='up'] {
  opacity: 0; translate: 0 20px; filter: blur(8px);
  transition: opacity var(--m-block-dur) var(--ease-out-quart), translate var(--m-block-dur) var(--ease-out-quart), filter var(--m-block-dur) var(--ease-out-quart);
  transition-delay: calc(var(--i, 0) * var(--m-block-stagger));
}
.js-motion [data-reveal='up'].is-in { opacity: 1; translate: none; filter: none; }

/* Passos do agente: entram um a um, como na app */
.js-motion [data-passos] li { opacity: 0; translate: 0 8px; transition: opacity .5s var(--ease-out-quart), translate .5s var(--ease-out-quart); transition-delay: calc(300ms + var(--i) * 260ms); }
.js-motion [data-passos] .ponto { scale: .2; transition: scale .4s var(--ease-out-quint); transition-delay: calc(420ms + var(--i) * 260ms); }
.js-motion [data-passos].is-in li { opacity: 1; translate: none; }
.js-motion [data-passos].is-in .ponto { scale: 1; }
.js-motion [data-passos].is-in .espera .ponto { animation: pulsar 1.6s var(--ease-in-out-cubic) 2s infinite; }
@keyframes pulsar { 0%, 100% { box-shadow: 0 0 0 3px var(--cartao), 0 0 0 3px rgba(90, 124, 168, .0); } 50% { box-shadow: 0 0 0 3px var(--cartao), 0 0 0 7px rgba(90, 124, 168, .28); } }

/* Traço da escada */
.js-motion [data-draw] { stroke-dasharray: 1 2; stroke-dashoffset: 1.01; transition: stroke-dashoffset var(--m-draw-dur) var(--ease-in-out-cubic); }
.js-motion .escada.is-in [data-draw] { stroke-dashoffset: 0; }
.js-motion .escada .degrau { opacity: 0; transition: opacity .7s var(--ease-out-quart); }
.js-motion .escada.is-in .d1 { opacity: 1; transition-delay: .2s; }
.js-motion .escada.is-in .d2 { opacity: 1; transition-delay: .9s; }
.js-motion .escada.is-in .d3 { opacity: 1; transition-delay: 1.6s; }

/* Caixa que se esvazia (estado inicial com JS; sem JS fica o estado final) */
.arrumado { display: none; }
.js-motion .arrumado { display: grid; }
.js-motion .arrumado li { opacity: 0; translate: 0 12px; transition: opacity .6s var(--ease-out-quart), translate .6s var(--ease-out-quart); transition-delay: calc(var(--i) * 120ms); }
.js-motion .caixa.arrumada .arrumado li { opacity: 1; translate: none; }

/* Palavra do rodapé */
.js-motion [data-palavra] {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 50%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 50%, transparent 100%);
  -webkit-mask-size: 250% 100%; mask-size: 250% 100%;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  transition: mask-position 1.9s cubic-bezier(.4, 0, .2, 1), -webkit-mask-position 1.9s cubic-bezier(.4, 0, .2, 1);
}
.js-motion [data-palavra].is-in { -webkit-mask-position: 0 0; mask-position: 0 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
}
@media print {
  .js-motion [data-reveal], .js-motion .letra, .js-motion .mascara > span { opacity: 1 !important; transform: none !important; translate: none !important; filter: none !important; }
}

.js-motion .ecra-hoje { clip-path: inset(0 0 58% 0); }
@media (min-width: 1000px) {
  .js-motion .entrada.com-palco { height: 175vh; }
  .js-motion .entrada.com-palco .entrada-palco { position: sticky; top: 72px; }
}