/* the drawn words of lesson 1: how their parts move (see art1.js) */
/* CSS-BEGIN */
/* == b1 == */
.t-act .bl { animation: blspin 2.5s cubic-bezier(.3, 0, .6, 1) both; } @keyframes blspin { to { transform: rotate(1440deg); } }
/* == /b1 == */
/* == generic == */
/* generic parts, driven by custom properties on the element (so a word needs no CSS of its own):
   .tg  moves to --o when the item is open (toggle words), back when tapped again
   .sh  shown only when open;  .hd  hidden when open
   .ac  moves to --a and back when the word is tapped (t-act):  --d duration, --dl delay, --n repeats
   .fx2 appears, drifts to --a and fades while the word is acting
   .lg  a leg: swings while the creature walks in (lg.b swings the other way) */
.tg { transition: transform .6s ease-in-out; } .item.open .tg { transform: var(--o); }
.sh { opacity: 0; transition: opacity .35s; } .item.open .sh { opacity: 1; }
.hd { transition: opacity .35s; } .item.open .hd { opacity: 0; }
.t-act .ac { animation: acx var(--d, 1.2s) ease-in-out var(--dl, 0s) var(--n, 1) both; }
@keyframes acx { 0%, 100% { transform: none; } 35%, 65% { transform: var(--a); } }
.t-act .ac2 { animation: acx2 var(--d, 1.2s) ease-in-out var(--dl, 0s) var(--n, 1) both; }
@keyframes acx2 { 0%, 100% { transform: none; } 35%, 65% { transform: var(--a); } }
.fx2 { opacity: 0; } .t-act .fx2 { animation: fxx var(--d, 1.2s) ease-out var(--dl, 0s) var(--n, 1) both; }
@keyframes fxx { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: var(--a, none); } }
.lg { animation: none; }
.a-walk .lg, .a-stroll .lg, .a-crawl .lg, .walking .lg, .t-walk .lg { animation: lgs .34s ease-in-out infinite alternate; }
.a-walk .lg.b, .a-stroll .lg.b, .a-crawl .lg.b, .walking .lg.b, .t-walk .lg.b { animation-direction: alternate-reverse; }
@keyframes lgs { from { transform: rotate(-17deg); } to { transform: rotate(17deg); } }
.a-walk .bd, .a-crawl .bd, .t-walk .bd { animation: bdb .34s ease-in-out infinite alternate; } @keyframes bdb { from { transform: translateY(0); } to { transform: translateY(-1.4px); } }
.tw { animation: none; } .t-act .tw, .a-walk .tw { animation: tws .5s ease-in-out infinite alternate; } @keyframes tws { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
/* == /generic == */
/* == generic2 == */
/* .gone: hidden while the word acts;  .come: shown only while it acts */
.t-act .gone { animation: gonex var(--d, 1.4s) steps(1, end) var(--dl, 0s) both; } @keyframes gonex { 0%, 100% { opacity: 1; } 8%, 92% { opacity: 0; } }
.come { opacity: 0; } .t-act .come { animation: comex var(--d, 1.4s) steps(1, end) var(--dl, 0s) both; } @keyframes comex { 0%, 100% { opacity: 0; } 8%, 92% { opacity: 1; } }
.t-peak .gone { opacity: 0; } .t-peak .come { opacity: 1; }
/* == /generic2 == */
/* == generic3 == */
/* .lg2: a tentacle that waves while the word acts;  .draw: a line that is drawn while the word acts */
.t-act .lg2, .a-rise .lg2 { animation: lg2x .55s ease-in-out infinite alternate; } .t-act .lg2.b, .a-rise .lg2.b { animation-direction: alternate-reverse; }
@keyframes lg2x { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
.draw { opacity: 0; } .t-act .draw { animation: drawx var(--d, 1.4s) linear both; }
@keyframes drawx { 0% { opacity: 1; stroke-dashoffset: 1; } 40%, 92% { opacity: 1; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 0; } }
.t-peak .draw { opacity: 1; stroke-dashoffset: 0; }
/* == /generic3 == */
/* CSS-END */