/* * A troca do fim da demo interativa (/demo-interativa). * * O formulario nao fica embaixo da demo: ele entra no lugar dela quando a * jornada termina. Quem liga e desliga e o /demo-interativa.js, por classe no * -- o unico no que o runtime x-dc nao redesenha, entao a troca nao se * desfaz quando a pagina renderiza de novo (passar o mouse na barra basta). * * html.di-saindo a abertura e a demo desbotam (0,35s) * html.di-fim as duas saem do fluxo e o fecho aparece, subindo de leve */ .di-palco { transition: opacity 350ms cubic-bezier(.2,0,.2,1); } html.di-saindo .di-palco { opacity: 0; } html.di-fim .di-palco { display: none; } .di-fecho { display: none; } html.di-fim .di-fecho { display: block; animation: di-entra 450ms cubic-bezier(.2,0,.2,1) both; } @keyframes di-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .di-palco { transition: none; } html.di-fim .di-fecho { animation: none; } }