/* cena "roteiro" (app/cenas/roteiro.js) */

/* overflow: clip (e não hidden) deixa o palco grudar (position: sticky) ao rolar; hidden prende o sticky dentro da própria seção */
#roteiro { overflow: clip; }
#roteiro .cena-palco { min-height: clamp(400px, 112vw, 460px); }

/* a instrução curta, escrita em cima da cena; some no primeiro toque */
#roteiro .roteiro-dica { position: absolute; left: clamp(16px, 5vw, 72px); bottom: 12px; margin: 0; font: 500 14px/1.2 var(--fonte); letter-spacing: .02em;
  color: var(--tinta); opacity: .72; pointer-events: none; transition: opacity .6s var(--suave); }
#roteiro .roteiro-dica.some { opacity: 0; }

/* o item que a Cuca está visitando: o texto dá um passo para a frente, com mola */
#roteiro .linha-tempo > li > * { transition: translate .5s var(--mola); }
#roteiro .linha-tempo > li.ativo > *, #roteiro .linha-tempo > li:hover > * { translate: 10px 0; }
#roteiro .linha-tempo > li.ativo, #roteiro .linha-tempo > li:hover { border-top-color: var(--tinta); }
#roteiro .linha-tempo > li:focus-visible { outline: 3px solid var(--tinta); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { #roteiro .linha-tempo > li > * { transition: none; } }