/* Generated by tools/learning.py — do not edit by hand.
   One 35s cycle: an employee walks the platform while an admin
   assigns tests, and every finished activity sends one packet to
   reporting. Change the schedule in tools/learning.py and rebuild. */

/* Where each actor is, at every moment of the cycle. */
@keyframes lrn-user {
  0%, 2.50% { left: 33.0%; top: 76.7%; }
  3.33% { left: 33.0%; top: 76.7%; }
  4.20% { left: 36.0%; top: 72.0%; }
  7.50% { left: 48.5%; top: 72.0%; }
  14.17% { left: 48.5%; top: 72.0%; }
  15.60% { left: 36.0%; top: 72.0%; }
  17.21% { left: 36.0%; top: 22.5%; }
  19.17% { left: 19.0%; top: 22.5%; }
  35.00% { left: 19.0%; top: 22.5%; }
  36.37% { left: 36.0%; top: 22.5%; }
  37.50% { left: 36.0%; top: 72.0%; }
  40.00% { left: 67.0%; top: 74.0%; }
  49.58% { left: 67.0%; top: 74.0%; }
  52.50% { left: 36.0%; top: 72.0%; }
  52.99% { left: 36.0%; top: 53.5%; }
  54.58% { left: 19.0%; top: 53.5%; }
  68.33% { left: 19.0%; top: 53.5%; }
  69.93% { left: 36.0%; top: 53.5%; }
  70.42% { left: 36.0%; top: 72.0%; }
  73.33% { left: 67.0%; top: 74.0%; }
  82.92% { left: 67.0%; top: 74.0%; }
  87.92% { left: 48.5%; top: 72.0%; }
  98.33% { left: 48.5%; top: 72.0%; }
  100% { left: 48.5%; top: 72.0%; }
}
@keyframes lrn-admin {
  0%, 0.00% { left: 90.0%; top: 65.0%; }
  25.00% { left: 90.0%; top: 65.0%; }
  25.83% { left: 78.75%; top: 66.5%; }
  26.67% { left: 67.5%; top: 68.0%; }
  33.33% { left: 67.5%; top: 68.0%; }
  34.58% { left: 78.75%; top: 66.5%; }
  35.83% { left: 90.0%; top: 65.0%; }
  100.00% { left: 90.0%; top: 65.0%; }
  100% { left: 90.0%; top: 65.0%; }
}

@keyframes lrn-user-in {
  0%, 1.46% { opacity: 0; }
  2.50%, 98.75% { opacity: 1; }
  100.83%, 100% { opacity: 0; }
}
/* And the star they are given for it, worn until they go. */
@keyframes lrn-star {
  0%, 94.17% { opacity: 0; transform: translateY(4px) scale(.4); }
  95.42% { opacity: 1; transform: none; }
  98.33% { opacity: 1; transform: none; }
  99.58%, 100% { opacity: 0; transform: none; }
}

/* A box lights while it is being used. The lit edge is a real property rather than a custom one: an unregistered custom property does not interpolate, and this has to be reliable. */
@keyframes lrn-lit-mod-1 {
  0% { border-top-color: var(--line); }
  6.88%{ border-top-color: var(--line); }
  7.92%{ border-top-color: var(--c); }
  13.33%{ border-top-color: var(--c); }
  14.79%{ border-top-color: var(--line); }
  87.29%{ border-top-color: var(--line); }
  88.33%{ border-top-color: var(--c); }
  97.50%{ border-top-color: var(--c); }
  98.96%{ border-top-color: var(--line); }
  100% { border-top-color: var(--line); }
}
.lrn-mod--1 { animation-name: lrn-lit-mod-1; }
@keyframes lrn-lit-leg-lms {
  0% { border-color: var(--line); }
  18.54%{ border-color: var(--line); }
  19.58%{ border-color: var(--c); }
  25.00%{ border-color: var(--c); }
  26.46%{ border-color: var(--line); }
  100% { border-color: var(--line); }
}
.lrn-leg--lms { animation-name: lrn-lit-leg-lms; }
@keyframes lrn-lit-mod-2 {
  0% { border-top-color: var(--line); }
  26.04%{ border-top-color: var(--line); }
  27.08%{ border-top-color: var(--c); }
  33.33%{ border-top-color: var(--c); }
  34.79%{ border-top-color: var(--line); }
  39.79%{ border-top-color: var(--line); }
  40.83%{ border-top-color: var(--c); }
  48.75%{ border-top-color: var(--c); }
  50.21%{ border-top-color: var(--line); }
  73.12%{ border-top-color: var(--line); }
  74.17%{ border-top-color: var(--c); }
  82.08%{ border-top-color: var(--c); }
  83.54%{ border-top-color: var(--line); }
  100% { border-top-color: var(--line); }
}
.lrn-mod--2 { animation-name: lrn-lit-mod-2; }
@keyframes lrn-lit-leg-wiki {
  0% { border-color: var(--line); }
  53.96%{ border-color: var(--line); }
  55.00%{ border-color: var(--c); }
  60.42%{ border-color: var(--c); }
  61.88%{ border-color: var(--line); }
  100% { border-color: var(--line); }
}
.lrn-leg--wiki { animation-name: lrn-lit-leg-wiki; }
@keyframes lrn-lit-mod-3 {
  0% { border-top-color: var(--line); }
  21.46%{ border-top-color: var(--line); }
  22.50%{ border-top-color: var(--c); }
  95.42%{ border-top-color: var(--c); }
  96.88%{ border-top-color: var(--line); }
  100% { border-top-color: var(--line); }
}
.lrn-mod--3 { animation-name: lrn-lit-mod-3; }

/* An activity in progress, and the fact it sends. The bar stands in the card and fills; when it is full the block turns over to its label, and the label takes the channel to reporting. One object, four animations: where it is, whether it is there at all, how full it is, and which face is up. */
@keyframes lrn-blk-profile {
  0%, 13.33% { left: 54%; top: 62%; }
  17.24% { left: 54%; top: 94.5%; }
  21.08% { left: 86%; top: 94.5%; }
  23.33% { left: 92.7%; top: 77.0%; }
  100% { left: 92.7%; top: 77.0%; }
}
@keyframes lrn-blkin-profile {
  0%, 7.08% { opacity: 0; }
  7.92% { opacity: 1; }
  23.75% { opacity: 1; }
  25.00%, 100% { opacity: 0; }
}
@keyframes lrn-fill-profile {
  0%, 8.54% { transform: scaleX(0); }
  11.46%, 100% { transform: scaleX(1); }
}
@keyframes lrn-turn-profile {
  0%, 11.88% { transform: rotateY(0deg); }
  13.13%, 100% { transform: rotateY(180deg); }
}
.lrn-blk--profile { animation-name: lrn-blk-profile, lrn-blkin-profile; }
.lrn-blk--profile .lrn-blk__flip { animation-name: lrn-turn-profile; }
.lrn-blk--profile .lrn-blk__face--bar > b { animation-name: lrn-fill-profile; }
@keyframes lrn-blk-course {
  0%, 25.00% { left: 27.5%; top: 22.5%; }
  25.76% { left: 38.8%; top: 22.5%; }
  30.58% { left: 38.8%; top: 94.5%; }
  33.74% { left: 86%; top: 94.5%; }
  35.00% { left: 92.7%; top: 77.0%; }
  100% { left: 92.7%; top: 77.0%; }
}
@keyframes lrn-blkin-course {
  0%, 18.75% { opacity: 0; }
  19.58% { opacity: 1; }
  35.42% { opacity: 1; }
  36.67%, 100% { opacity: 0; }
}
@keyframes lrn-fill-course {
  0%, 20.21% { transform: scaleX(0); }
  23.12%, 100% { transform: scaleX(1); }
}
@keyframes lrn-turn-course {
  0%, 23.54% { transform: rotateY(0deg); }
  24.79%, 100% { transform: rotateY(180deg); }
}
.lrn-blk--course { animation-name: lrn-blk-course, lrn-blkin-course; }
.lrn-blk--course .lrn-blk__flip { animation-name: lrn-turn-course; }
.lrn-blk--course .lrn-blk__face--bar > b { animation-name: lrn-fill-course; }
@keyframes lrn-blk-read {
  0%, 60.42% { left: 27.5%; top: 53.5%; }
  61.37% { left: 38.8%; top: 53.5%; }
  64.84% { left: 38.8%; top: 94.5%; }
  68.83% { left: 86%; top: 94.5%; }
  70.42% { left: 92.7%; top: 77.0%; }
  100% { left: 92.7%; top: 77.0%; }
}
@keyframes lrn-blkin-read {
  0%, 54.17% { opacity: 0; }
  55.00% { opacity: 1; }
  70.83% { opacity: 1; }
  72.08%, 100% { opacity: 0; }
}
@keyframes lrn-fill-read {
  0%, 55.62% { transform: scaleX(0); }
  58.54%, 100% { transform: scaleX(1); }
}
@keyframes lrn-turn-read {
  0%, 58.96% { transform: rotateY(0deg); }
  60.21%, 100% { transform: rotateY(180deg); }
}
.lrn-blk--read { animation-name: lrn-blk-read, lrn-blkin-read; }
.lrn-blk--read .lrn-blk__flip { animation-name: lrn-turn-read; }
.lrn-blk--read .lrn-blk__face--bar > b { animation-name: lrn-fill-read; }

/* The grade: the same object as an activity block, but it goes nowhere — it fills, turns over to the star and waits there until the person it belongs to has gone. */
@keyframes lrn-blk-grade {
  0%, 100% { left: 53.5%; top: 62.0%; }
}
@keyframes lrn-blkin-grade {
  0%, 87.50% { opacity: 0; }
  88.33% { opacity: 1; }
  96.67% { opacity: 1; }
  97.92%, 100% { opacity: 0; }
}
@keyframes lrn-fill-grade {
  0%, 88.96% { transform: scaleX(0); }
  92.29%, 100% { transform: scaleX(1); }
}
@keyframes lrn-turn-grade {
  0%, 92.50% { transform: rotateY(0deg); }
  93.75%, 100% { transform: rotateY(180deg); }
}
.lrn-blk--grade { animation-name: lrn-blk-grade, lrn-blkin-grade; }
.lrn-blk--grade .lrn-blk__flip { animation-name: lrn-turn-grade; }
.lrn-blk--grade .lrn-blk__face--bar > b { animation-name: lrn-fill-grade; }

/* The admin at work: the bar it fills before the tests exist. */
@keyframes lrn-set-in {
  0%, 26.67% { opacity: 0; }
  27.50% { opacity: 1; }
  32.08% { opacity: 1; }
  33.33%, 100% { opacity: 0; }
}
@keyframes lrn-set-fill {
  0%, 27.92% { transform: scaleX(0); }
  31.04%, 100% { transform: scaleX(1); }
}
.lrn-set { left: 75.5%; top: 66.0%; animation-name: lrn-set-in; }

/* The tests the admin creates, one after another, in the testing module. Each appears whole at its slot and then only ever moves: into the employee's hands, and down the channel into reporting. Nothing about a label changes on the way. */
@keyframes lrn-card-product {
  0%, 31.25% { opacity: 0; left: 75.0%; top: 52.6%; }
  31.33% { opacity: 1; left: 75.0%; top: 52.6%; }
  74.17% { left: 75.0%; top: 52.6%; }
  76.25% { left: 72.4%; top: 74.2%; }
  82.08% { left: 72.4%; top: 74.2%; }
  85.90% { left: 71.9%; top: 94.5%; }
  88.56% { left: 86%; top: 94.5%; }
  92.08% { opacity: 1; left: 92.7%; top: 77.0%; }
  93.33%, 100% { opacity: 0; left: 92.7%; top: 77.0%; }
}
.lrn-card--product { animation-name: lrn-card-product; }
@keyframes lrn-flip-product {
  0%, 80.00% { transform: rotateY(0deg); }
  81.87%, 100% { transform: rotateY(180deg); }
}
.lrn-card--product .lrn-card__flip { animation-name: lrn-flip-product; }
@keyframes lrn-cfill-product {
  0%, 76.46% { transform: scaleX(0); }
  79.58%, 100% { transform: scaleX(1); }
}
.lrn-card--product .lrn-card__fill { animation-name: lrn-cfill-product; }
@keyframes lrn-card-crm {
  0%, 32.71% { opacity: 0; left: 75.0%; top: 58.6%; }
  32.79% { opacity: 1; left: 75.0%; top: 58.6%; }
  40.83% { left: 75.0%; top: 58.6%; }
  42.92% { left: 72.4%; top: 74.2%; }
  48.75% { left: 72.4%; top: 74.2%; }
  52.57% { left: 71.9%; top: 94.5%; }
  55.22% { left: 86%; top: 94.5%; }
  58.75% { opacity: 1; left: 92.7%; top: 77.0%; }
  60.00%, 100% { opacity: 0; left: 92.7%; top: 77.0%; }
}
.lrn-card--crm { animation-name: lrn-card-crm; }
@keyframes lrn-flip-crm {
  0%, 46.67% { transform: rotateY(0deg); }
  48.54%, 100% { transform: rotateY(180deg); }
}
.lrn-card--crm .lrn-card__flip { animation-name: lrn-flip-crm; }
@keyframes lrn-cfill-crm {
  0%, 43.13% { transform: scaleX(0); }
  46.25%, 100% { transform: scaleX(1); }
}
.lrn-card--crm .lrn-card__fill { animation-name: lrn-cfill-crm; }

@keyframes lrn-bar {
  0%, 22.92% { transform: scaleX(0); }
  23.33% { transform: scaleX(0.20); }
  27.50% { transform: scaleX(0.20); }
  35.00% { transform: scaleX(0.40); }
  39.17% { transform: scaleX(0.40); }
  58.75% { transform: scaleX(0.60); }
  62.92% { transform: scaleX(0.60); }
  70.42% { transform: scaleX(0.80); }
  74.58% { transform: scaleX(0.80); }
  92.08% { transform: scaleX(1.00); }
  95.00% { transform: scaleX(1.00); }
  100% { transform: scaleX(0); }
}

/* The same count, in figures, above the bar: one label per state, each up for exactly as long as that state lasts. */
@keyframes lrn-pct-0 {
  0% { opacity: 1; }
  23.32% { opacity: 1; }
  23.33%, 100% { opacity: 0; }
}
.lrn-mod__pct--0 { animation-name: lrn-pct-0; }
@keyframes lrn-pct-1 {
  0% { opacity: 0; }
  23.32% { opacity: 0; }
  23.33% { opacity: 1; }
  34.99% { opacity: 1; }
  35.00%, 100% { opacity: 0; }
}
.lrn-mod__pct--1 { animation-name: lrn-pct-1; }
@keyframes lrn-pct-2 {
  0% { opacity: 0; }
  34.99% { opacity: 0; }
  35.00% { opacity: 1; }
  58.74% { opacity: 1; }
  58.75%, 100% { opacity: 0; }
}
.lrn-mod__pct--2 { animation-name: lrn-pct-2; }
@keyframes lrn-pct-3 {
  0% { opacity: 0; }
  58.74% { opacity: 0; }
  58.75% { opacity: 1; }
  70.41% { opacity: 1; }
  70.42%, 100% { opacity: 0; }
}
.lrn-mod__pct--3 { animation-name: lrn-pct-3; }
@keyframes lrn-pct-4 {
  0% { opacity: 0; }
  70.41% { opacity: 0; }
  70.42% { opacity: 1; }
  92.07% { opacity: 1; }
  92.08%, 100% { opacity: 0; }
}
.lrn-mod__pct--4 { animation-name: lrn-pct-4; }
@keyframes lrn-pct-5 {
  0% { opacity: 0; }
  92.07% { opacity: 0; }
  92.08% { opacity: 1; }
  99.99% { opacity: 1; }
  100%% { opacity: 1; }
}
.lrn-mod__pct--5 { animation-name: lrn-pct-5; }

/* The corridor keeps itself full, and it does it without a visible reset: the front one walks out of the mouth, the line steps up one place, and one more joins at the back. By the end of the cycle the same four slots are filled as at the start, so the loop snaps over in a single frame and nothing shows. */
@keyframes lrn-q-front {
  0%, 1.25% { opacity: 1; transform: none; }
  3.33%, 100% { opacity: 0; transform: translateX(24px); }
}
@keyframes lrn-q-shift {
  0%, 3.33% { transform: translateX(0); }
  6.67%, 100% { transform: translateX(24px); }
}
.lrn-q--1, .lrn-q--2, .lrn-q--3, .lrn-q--4, .lrn-q--5, .lrn-q--6, .lrn-q--7, .lrn-q--8, .lrn-q--9, .lrn-q--10, .lrn-q--11 { animation-name: lrn-q-shift; }
@keyframes lrn-q-new {
  0%, 3.75% { opacity: 0; transform: translateX(-6px); }
  6.25% { opacity: 1; transform: translateX(13px); }
  7.92%, 100% { opacity: 1; transform: translateX(24px); }
}
/* The one at the front is lit, because it is the one about to go in. The moment it leaves, the next takes the same colour — no fade, it is simply next now. */
@keyframes lrn-q-next {
  0%, 3.33% { fill: var(--ink-3); }
  3.34%, 100% { fill: var(--c); }
}

/* One clock for the whole simulation. */
.lrn-actor, .lrn-actor__fig, .lrn-mod, .lrn-leg, .lrn-blk, .lrn-mod__bar > i, .lrn-mod__pct, .lrn-q, .lrn-set, .lrn-set > b, .lrn-q .lrn-actor__fig, .lrn-actor__star, .lrn-card, .lrn-card__fill, .lrn-blk__flip, .lrn-blk__face--bar > b, .lrn-card__flip { animation-duration: 34.8s; }