/* What is Bo verhuist's own (taaltaal-exercise-moving.js); the rest is the shared look of taaltaal-scene.css. The room has a
   class done-<step> for every step Bo has done, and each thing goes to its place by a transition of its transform or its
   opacity: the clock and the photo from the floor to the wall, the books into the cupboard, the rug unrolled, the window
   open with the curtains in the breeze, the lamp and the radio on, the boxes carried away */
taaltaal-exercise-moving .place .bo-at.still { transition: none; }
taaltaal-exercise-moving .place .clock-hang, taaltaal-exercise-moving .place .photo-hang, taaltaal-exercise-moving .place .sash,
taaltaal-exercise-moving .place .rug, taaltaal-exercise-moving .place .stack { transform-box: view-box; transition: transform .8s cubic-bezier(.3, 1.2, .5, 1), opacity .6s ease; }

/* the clock leans against the cupboard on the floor; hung up, it is on the wall over it */
taaltaal-exercise-moving .place .clock-hang { transform-origin: 108px 48px; transform: translate(44px, 240px) rotate(-14deg); }
taaltaal-exercise-moving .place.done-klok .clock-hang { transform: none; }
/* the photo leans against the boxes; hung up, it is pinned to the wall top right */
taaltaal-exercise-moving .place .photo-hang { transform-origin: 692px 78px; transform: translate(14px, 172px) rotate(-10deg) scale(.86); }
taaltaal-exercise-moving .place.done-foto .photo-hang { transform: none; }
/* the box: closed with tape, then open */
taaltaal-exercise-moving .place .flaps-open { opacity: 0; transition: opacity .4s ease; }
taaltaal-exercise-moving .place.done-doos .flaps-open { opacity: 1; }
taaltaal-exercise-moving .place.done-doos .flaps-closed { opacity: 0; }
/* the lamp on the shelf */
taaltaal-exercise-moving .place .light { opacity: 0; transition: opacity .6s ease; }
taaltaal-exercise-moving .place.done-lamp .light { opacity: 1; }
taaltaal-exercise-moving .place.done-lamp .shade { fill: #f8ecc4; }
/* the window: its right pane turns open on its hinge, the curtains move in the breeze */
taaltaal-exercise-moving .place .sash { transform-origin: 296px 88px; }
taaltaal-exercise-moving .place.done-raam .sash { transform: scaleX(.16); }
taaltaal-exercise-moving .place .curtain { transform-box: fill-box; transform-origin: 50% 0; }
taaltaal-exercise-moving .place.done-raam .curtain-l { animation: tbm-breeze 3.2s ease-in-out infinite alternate; }
taaltaal-exercise-moving .place.done-raam .curtain-r { animation: tbm-breeze 2.7s ease-in-out -1s infinite alternate-reverse; }
@keyframes tbm-breeze { from { transform: rotate(-2.5deg) skewX(-2deg); } to { transform: rotate(2.5deg) skewX(2deg); } }
/* the rug: rolled up, then laid down */
taaltaal-exercise-moving .place .rug { transform-origin: 438px 300px; transform: scaleX(.02); opacity: 0; }
taaltaal-exercise-moving .place.done-kleed .rug { transform: none; opacity: 1; }
taaltaal-exercise-moving .place .rug-roll { transition: opacity .4s ease; }
taaltaal-exercise-moving .place.done-kleed .rug-roll { opacity: 0; }
/* the books: a pile on the floor, then on the shelf of the cupboard */
taaltaal-exercise-moving .place .books-shelf, taaltaal-exercise-moving .place .books-floor { transition: opacity .6s ease; }
taaltaal-exercise-moving .place .books-shelf { opacity: 0; }
taaltaal-exercise-moving .place.done-boeken .books-shelf { opacity: 1; }
taaltaal-exercise-moving .place.done-boeken .books-floor { opacity: 0; }
/* the radio: off, then on, with notes coming out of it */
taaltaal-exercise-moving .place .notes { opacity: 0; }
taaltaal-exercise-moving .place.done-radio .notes text { animation: tbm-note 2.4s ease-out infinite; }
taaltaal-exercise-moving .place.done-radio .notes text:nth-child(2) { animation-delay: .8s; }
taaltaal-exercise-moving .place.done-radio .notes text:nth-child(3) { animation-delay: 1.6s; }
taaltaal-exercise-moving .place.done-radio .notes { opacity: 1; }
taaltaal-exercise-moving .place.done-radio .dial { fill: #f6c945; }
@keyframes tbm-note { 0% { opacity: 0; transform: translate(0, 6px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -14px); } }
/* the boxes: carried out of the room */
taaltaal-exercise-moving .place.done-dozen .stack { transform: translateX(110px); opacity: 0; }

/* Uitleg: the rule in four short lines, the nine verbs as pills, and the chosen one: the verb with its little part in colour,
   the sentence where the part flies to the end, and its two other shapes */
taaltaal-exercise-moving .tbm-rules { margin: 0 0 12px; padding-left: 20px; font-size: 14px; color: #5b4a30; }
taaltaal-exercise-moving .tbm-rules b { color: #2b3f93; }
taaltaal-exercise-moving .tbm-verbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
taaltaal-exercise-moving .tbm-verbs button { display: inline-flex; flex-direction: column; align-items: center; padding: 5px 12px 6px; border: 1px solid #dcd6c8;
        border-radius: 14px; background: #fff; font: inherit; color: #2b3f93; cursor: pointer; box-shadow: 0 1px 2px rgba(60, 45, 20, .1); line-height: 1.15; }
taaltaal-exercise-moving .tbm-verbs button small { font-size: 11px; color: #8a7a5a; }
taaltaal-exercise-moving .tbm-verbs button:hover { background: #f3f6fb; }
taaltaal-exercise-moving .tbm-verbs button[aria-pressed="true"] { background: linear-gradient(#ee3399, #cd1269); border-color: #cd1269; color: #fff; }
taaltaal-exercise-moving .tbm-verbs button[aria-pressed="true"] small { color: #ffd6ea; }
taaltaal-exercise-moving .tbm-show { margin-top: 14px; min-height: 150px; }
taaltaal-exercise-moving .tbm-verb { margin: 0 0 6px; font-size: 20px; font-weight: bold; color: #2b3f93; }
taaltaal-exercise-moving .tbm-verb small { margin-left: 8px; font-size: 13px; font-weight: normal; color: #8a7a5a; }
taaltaal-exercise-moving .tbm-part { color: #c70765; }
taaltaal-exercise-moving .tbm-say { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 0; }
taaltaal-exercise-moving .tbm-words { font-size: 24px; font-weight: bold; color: #2b3f93; }
taaltaal-exercise-moving .tbm-more .tbm-words { font-size: 18px; }
taaltaal-exercise-moving .tbm-fly { display: inline-block; animation: tbm-fly 1.1s cubic-bezier(.4, 1.4, .5, 1) .2s backwards; }
@keyframes tbm-fly { from { transform: translate(var(--from, 0), -18px) scale(1.15); } 60% { transform: translate(0, -10px); } }
taaltaal-exercise-moving .tbm-reset { margin: 10px 0 0; text-align: center; }
taaltaal-exercise-moving .tbm-empty { padding: 4px 12px; border: 1px solid #dcd6c8; border-radius: 12px; background: #fff; font: inherit; font-size: 12.5px; color: #8a7a5a; cursor: pointer; }

/* Bouw de zin: the line the pieces go into, and the pool they come from; a piece is a little wooden block */
taaltaal-exercise-moving .tbm-line { display: flex; flex-wrap: wrap; gap: 6px; min-height: 46px; padding: 6px 8px; border-radius: 8px; background: #fff;
        border: 2px dashed #d9cdb4; align-items: center; }
taaltaal-exercise-moving .tbm-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 46px; margin-top: 10px; }
taaltaal-exercise-moving .tbm-slot { display: grid; min-height: 92px; margin-top: 10px; }
taaltaal-exercise-moving .tbm-slot > * { grid-area: 1 / 1; align-self: start; }
taaltaal-exercise-moving .tbm-slot .tbm-tiles { margin-top: 0; }
taaltaal-exercise-moving .tbm-slot .tts-feedback > :first-child { margin-top: 0; }
/* what is said to a wrong order: the button beside the note, so the room under the pieces stays small */
taaltaal-exercise-moving .tbm-slot .tts-feedback:has(.tts-why) { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px; }
taaltaal-exercise-moving .tbm-slot .tts-feedback .tts-bad { grid-column: 1 / -1; margin: 0; }
taaltaal-exercise-moving .tbm-slot .tts-feedback .tts-why { margin: 0; }
taaltaal-exercise-moving .tbm-slot .tts-feedback .tts-next { margin-top: 0; }
taaltaal-exercise-moving .tbm-tile { padding: 7px 14px; border: 1px solid #c9a46e; border-radius: 6px; background: linear-gradient(#f8e3bd, #e9c48c);
        font: inherit; font-size: 18px; font-weight: bold; color: #5a3a17; cursor: pointer; box-shadow: 0 2px 0 #b98d52; }
taaltaal-exercise-moving .tbm-tile:active { transform: translateY(1px); box-shadow: 0 1px 0 #b98d52; }
taaltaal-exercise-moving .tbm-tile.right { background: #ecf8ea; border-color: #393; color: #1f6b1f; box-shadow: none; }
taaltaal-exercise-moving .tbm-tile.wrong { background: #fdeef4; border-color: #c70765; color: #a0054f; box-shadow: none; }
taaltaal-exercise-moving .tbm-ask small, taaltaal-exercise-moving .tts-ask small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: normal; color: #888; }
taaltaal-exercise-moving .tts-ask .tbm-target, taaltaal-exercise-moving .tts-ask .tbm-modal { color: #c70765; }
taaltaal-exercise-moving .tbm-home { margin: 6px 0 0; font-size: 15px; color: #2b3f93; }
taaltaal-exercise-moving .tbm-home a { font-weight: bold; color: #c70765; white-space: nowrap; }
taaltaal-exercise-moving .tbm-end { width: 100%; }
/* the question and what is said to it in the middle, as in the other exercises */
taaltaal-exercise-moving .tbm-build .tts-ask, taaltaal-exercise-moving .tbm-build .tts-feedback, taaltaal-exercise-moving .tbm-listen .tts-feedback { text-align: center; }
taaltaal-exercise-moving .tbm-build .tbm-line { justify-content: center; }
taaltaal-exercise-moving .tbm-listen .tts-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin-bottom: 0; }
/* no more room under the room than what is said to a click needs: the end has a place of its own */
taaltaal-exercise-moving .tbm-listen .tts-side { min-height: 0; }
taaltaal-exercise-moving .tbm-listen .tts-feedback { min-height: 34px; }
taaltaal-exercise-moving .tbm-good b { color: #2f9a2f; }
/* the end of Bouw de zin under the room that is done: a little closer together, so the room it asks for stays small too */
taaltaal-exercise-moving .tbm-build .tts-finale .tts-end { padding-top: 0; }
taaltaal-exercise-moving .tbm-build .tts-finale .tts-end-ico { width: 52px; height: 52px; }
taaltaal-exercise-moving .tbm-build .tts-finale .tts-end-idiom { margin-top: 6px; }
taaltaal-exercise-moving .tbm-build .tts-finale .tts-score { margin-top: 8px; }
taaltaal-exercise-moving .tbm-build .tts-finale .tts-finale-go { margin-top: 8px; }
/* the end of Luister has the room of the room and what was under it: a little smaller, so it fits and the card stays as it is */
taaltaal-exercise-moving .tbm-listen .tts-finale .tts-end-ico { width: 52px; height: 52px; }
taaltaal-exercise-moving .tbm-listen .tts-finale .tts-score { margin-top: 10px; }
taaltaal-exercise-moving .tbm-listen .tts-finale .tts-end-grow .tts-end-means { display: none; }

/* on a phone the question with wil takes two lines and its pieces two rows: room for both, so nothing jumps from step to step */
@media (max-width: 560px)
{
    taaltaal-exercise-moving .tbm-build .tts-ask { min-height: 73px; }
    taaltaal-exercise-moving .tbm-build .tbm-line { min-height: 96px; }
    taaltaal-exercise-moving .tbm-slot { min-height: 168px; }
    taaltaal-exercise-moving .tbm-slot .tts-feedback:has(.tts-why) { display: block; }
    taaltaal-exercise-moving .tbm-slot .tts-feedback .tts-why { margin-top: 6px; }
    taaltaal-exercise-moving .tbm-slot .tts-feedback .tts-next { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce)
{
    taaltaal-exercise-moving .place .curtain, taaltaal-exercise-moving .place .notes text, taaltaal-exercise-moving .tbm-fly { animation: none; }
    taaltaal-exercise-moving .place .clock-hang, taaltaal-exercise-moving .place .photo-hang, taaltaal-exercise-moving .place .sash,
    taaltaal-exercise-moving .place .rug, taaltaal-exercise-moving .place .stack { transition: none; }
}