/* cena "apoio" (app/cenas/apoio.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 */
#apoio { overflow: clip; }
#apoio .cena-palco { min-height: clamp(360px, 96vw, 440px); }

/* a instrução curta, escrita em cima da cena; some no primeiro toque */
#apoio .apoio-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: .75; pointer-events: none; transition: opacity .6s var(--suave); }
#apoio .apoio-dica.some { opacity: 0; }

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