/* Movimento das ilustrações (ilustras.js). Por tempo; pausa fora da tela e "menos movimento" vêm do carimbo.css. */
.il * { transform-box: fill-box; }
/* troféu */
.tr-corpo { transform-origin: 50% 100%; animation: tr-sobe 3.2s ease-in-out infinite; }
@keyframes tr-sobe { 0%, 60%, 100% { transform: translateY(0) rotate(0); } 70% { transform: translateY(-3px) rotate(-4deg); } 80% { transform: translateY(-3px) rotate(4deg); } }
.tr-est { transform-origin: 50% 50%; animation: pisca 1.8s ease-in-out infinite; }
.tr-est.e2 { animation-delay: -.6s; } .tr-est.e3 { animation-delay: -1.2s; }
@keyframes pisca { 0%, 100% { transform: scale(.3) rotate(0); opacity: .2; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
/* prancheta */
.pr-l { stroke-dasharray: 12; animation: risca 3.6s ease-in-out infinite; }
.pr-l.l2 { animation-delay: .35s; } .pr-l.l3 { animation-delay: .7s; }
@keyframes risca { 0% { stroke-dashoffset: 12; } 30%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 12; } }
.pr-lapis { transform-origin: 0% 100%; animation: escreve 3.6s ease-in-out infinite; }
@keyframes escreve { 0%, 100% { transform: translate(0, 0); } 15% { transform: translate(-14px, 10px); } 30% { transform: translate(-8px, 16px); } 45% { transform: translate(-14px, 21px); } 60% { transform: translate(0, 0); } }
.pr-nota { transform-origin: 50% 50%; animation: bate 3.6s cubic-bezier(.3,1.6,.5,1) infinite; }
@keyframes bate { 0%, 45% { transform: scale(0); opacity: 0; } 55% { transform: scale(1.35); opacity: 1; } 65%, 92% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
/* máquina */
.mq-corpo { transform-origin: 50% 50%; animation: vibra .12s linear infinite; }
@keyframes vibra { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(.6px, -.4px); } 75% { transform: translate(-.6px, .4px); } }
.mq-gota { transform-origin: 50% 0; animation: gota 1.6s ease-in infinite; }
@keyframes gota { 0% { transform: translateY(-4px) scale(.4); opacity: 0; } 30% { opacity: 1; transform: translateY(0) scale(1); } 100% { transform: translateY(5px) scale(1); opacity: 0; } }
.mq-vib { animation: tremor .5s ease-in-out infinite alternate; } .mq-vib.v2 { animation-delay: -.25s; }
@keyframes tremor { from { opacity: .2; transform: translateX(-1px); } to { opacity: 1; transform: translateX(1px); } }
/* balão */
.bl-p { animation: digita 1.2s ease-in-out infinite; } .bl-p.p2 { animation-delay: .15s; } .bl-p.p3 { animation-delay: .3s; }
@keyframes digita { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-2px); } }
.bl-cor { transform-origin: 50% 60%; animation: coracao 2.4s ease-in-out infinite; }
@keyframes coracao { 0%, 100% { transform: scale(0); opacity: 0; } 35%, 75% { transform: scale(1); opacity: 1; } 45% { transform: scale(1.25); } }
/* lápis */
.lp-traco { stroke-dasharray: 1; animation: desenha 3.4s ease-in-out infinite; }
@keyframes desenha { 0% { stroke-dashoffset: 1; } 60%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
.lp-lapis { animation: lapis 3.4s ease-in-out infinite; }
@keyframes lapis { 0%, 100% { transform: translate(-14px, 8px); } 20% { transform: translate(-8px, -2px); } 40% { transform: translate(-2px, 6px); } 60% { transform: translate(4px, -4px); } 85% { transform: translate(4px, -4px); } }
/* agulha */
.ag-maq { animation: vibra .1s linear infinite, desce 3s ease-in-out infinite; }
@keyframes desce { 0%, 100% { translate: 0 -3px; } 50% { translate: 0 1px; } }
.ag-mancha { transform-origin: 50% 70%; animation: espalha 3s ease-out infinite; }
@keyframes espalha { 0% { transform: scale(.2); opacity: 0; } 40%, 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.05); opacity: 0; } }
/* brilho */
.br-e { transform-origin: 50% 50%; animation: pisca 2.2s ease-in-out infinite; }
.br-e.e2 { animation-delay: -.7s; } .br-e.e3 { animation-delay: -1.4s; }