/* Tidy up (js/scenes/tidy.js): the raccoon's place and what has flown into the box follow the timer (the script sets
   them); the flight is a CSS transition, an arc made by a bezier that overshoots. Only a few small things loop. */
.sc-tidy {
  --w1: #1C6670; --w2: #2D8789; --dot: rgba(255,255,255,.07); --s1: #8ED3F2; --s2: #DDF4FF; --sun: #FFE08A; --cloud: #FFFFFF; --hill: #8CCB7E;
  --frame: #F7EBD9; --curtain: #FF9F80; --cork: #C98F5A; --f1: #D99D63; --f2: #B57644; --lp: #FFE7A8; --lamp: 0;
  --title: #FFFFFF; --card: rgba(255,251,244,.95); --card-ink: #1D3A42; --accent: #FFC86B; --ink: #1D3A42; --chip: rgba(255,255,255,.16); --chip-line: rgba(255,255,255,.34);
  background: var(--w1);
}
.sc-tidy[data-variant="dusk"] {
  --w1: #2E2558; --w2: #4A3876; --dot: rgba(255,255,255,.06); --s1: #FF8E6B; --s2: #FFD08A; --sun: #FFF0B0; --cloud: #FFD9C2; --hill: #7C5A8E;
  --frame: #EFDCC8; --curtain: #E8A0BF; --f1: #B27B50; --f2: #8A5735; --lamp: 1;
  --card-ink: #2C2250; --ink: #2C2250; --accent: #FFB86B;
}
.td-room { overflow: visible; }
.td-room .w1 { stop-color: var(--w1); } .td-room .w2 { stop-color: var(--w2); } .td-room .f1 { stop-color: var(--f1); } .td-room .f2 { stop-color: var(--f2); }
.td-room .s1 { stop-color: var(--s1); } .td-room .s2 { stop-color: var(--s2); } .td-room .lp { stop-color: var(--lp); }
.td-dot { fill: var(--dot); }
.td-string { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 2.5; }
.td-flag.c0 { fill: #FFC86B; } .td-flag.c1 { fill: #FF8A7A; } .td-flag.c2 { fill: #8FE0C8; } .td-flag.c3 { fill: #FFFFFF; }
.td-frame, .td-bar { fill: var(--frame); stroke: var(--frame); } .td-bar { fill: none; stroke-width: 12; }
.td-sill { fill: #E6D2B4; } .td-sun { fill: var(--sun); } .td-cloud { fill: var(--cloud); } .td-hill { fill: var(--hill); }
.td-clouds { animation: tdDrift 26s ease-in-out infinite alternate; }
@keyframes tdDrift { from { transform: translateX(-16px); } to { transform: translateX(22px); } }
.td-curtain { fill: var(--curtain); } .td-rod { fill: #8C5A3C; }
.td-plank-s { fill: #E6CFA8; } .td-bracket { stroke: #C9AE84; stroke-width: 7; stroke-linecap: round; }
.td-bk.c0 { fill: #FF8A7A; } .td-bk.c1 { fill: #FFC86B; } .td-bk.c2 { fill: #7FB8FF; } .td-bk.c3 { fill: #8FE0C8; }
.td-globe { fill: #6EC6F0; } .td-land { fill: #8CCB7E; } .td-globe-ring, .td-globe-arm { fill: none; stroke: #C9AE84; stroke-width: 5; } .td-globe-foot { fill: #C9AE84; }
.td-cord { stroke: #2A2A33; stroke-width: 3; } .td-shade { fill: #FFD27A; } .td-light { opacity: var(--lamp); }
.td-skirt { fill: #EADDC7; }
.td-plank { fill: none; stroke: rgba(80,40,10,.22); stroke-width: 3; } .td-joint { fill: none; stroke: rgba(80,40,10,.16); stroke-width: 2.5; }
.td-pot { fill: #E07A5F; } .td-pot-rim { fill: #F09174; } .td-leaves path { fill: #3E9F6B; }
.td-leaves { transform-box: fill-box; transform-origin: 50% 100%; animation: tdLeaves 7s ease-in-out infinite alternate; }
@keyframes tdLeaves { from { transform: rotate(-2deg); } to { transform: rotate(3deg); } }
.td-ground { fill: rgba(30,10,0,.18); }
.td-lid { fill: #D6453B; } .td-lid-in { fill: #B8352E; } .td-box-in { fill: #4A1F1C; } .td-box { fill: #E8574A; } .td-box-line { fill: none; stroke: rgba(120,20,10,.22); stroke-width: 4; }
.td-box-rim { fill: #F27A6C; } .td-box-star { fill: #FFD27A; }
/* the things on the floor, and their flight into the box */
.td-paper { fill: #FFFFFF; } .td-crease { fill: none; stroke: #C5CCD6; stroke-width: 2.4; stroke-linecap: round; }
.td-crayon { fill: #E8574A; } .td-crayon-tip { fill: #C23E33; } .td-crayon-band { fill: #FFFFFF; }
.td-book { fill: #3E7CC8; } .td-page { fill: #FFF8EC; } .td-spine { stroke: #2E5E9E; stroke-width: 3; }
.td-plane { fill: #FFFFFF; } .td-plane-fold { fill: #D9E4EF; }
.td-sock { fill: #FF7FA8; } .td-stripe { fill: none; stroke: #FFFFFF; stroke-width: 4.5; } .td-cuff { fill: #FFFFFF; }
.td-juice { fill: #8ED36B; } .td-juice-band { fill: #FFFFFF; } .td-straw { stroke: #FF6B6B; stroke-width: 3.5; stroke-linecap: round; }
.td-block { fill: #FFC233; } .td-block-dot { fill: #E89B00; }
.td-peel { fill: #FFD94A; } .td-peel-top { fill: none; stroke: #8C6B1F; stroke-width: 3; stroke-linecap: round; }
.td-pencil { fill: #FFC233; } .td-wood { fill: #F2D2A0; } .td-lead { fill: #333344; } .td-eraser { fill: #FF8FA8; }
.td-core { fill: #FFF1C7; stroke: #E8D29C; stroke-width: 2; } .td-stem { stroke: #6B4423; stroke-width: 3; stroke-linecap: round; } .td-seed { fill: #3A2416; }
.td-item { transition: transform .9s linear; }
.td-fly { transform-box: fill-box; transform-origin: center; transition: transform .9s cubic-bezier(.3, 1.3, .55, 1.4); }
.td-item.is-gone { transform: translateX(var(--dx)); }
.td-item.is-gone .td-fly { transform: translateY(var(--dy)) scale(.62); }
.td-i-sock.is-back { transform: translateX(var(--sx)); }
.td-i-sock.is-back .td-fly { transform: translateY(var(--sy)) rotate(-28deg); transition-timing-function: cubic-bezier(.3, -1.1, .5, 1); }
.td-cat-ear, .td-cat-head { fill: #F2A65A; } .td-cat-eye { fill: none; stroke: #3A2416; stroke-width: 3; stroke-linecap: round; }
.td-cat { transform: translateY(44px); transition: transform .8s cubic-bezier(.3, 1.5, .5, 1); }
/* the raccoon */
.td-coon { transition: transform 1s linear; }
.td-fur { fill: #8E95A3; } .td-belly { fill: #D9DCE3; } .td-paw { fill: #4A4F5C; } .td-ear-in { fill: #F2B5B5; } .td-cheek { fill: #F4F5F8; }
.td-mask { fill: #3B3F4C; } .td-eye { fill: #FFFFFF; } .td-pupil, .td-nose { fill: #1E2028; } .td-mouth { fill: none; stroke: #1E2028; stroke-width: 3; stroke-linecap: round; }
.td-tail-rings path { stroke: #4A4F5C; stroke-width: 15; }
.td-handle { stroke: #9A6A3E; stroke-width: 8; stroke-linecap: round; } .td-bristle { fill: #F2C14E; } .td-bristle-l { stroke: #C99A2E; stroke-width: 3; stroke-linecap: round; } .td-band { fill: #D9534F; }
.td-bob { animation: tdBob 2.6s ease-in-out infinite alternate; }
@keyframes tdBob { from { transform: translateY(0); } to { transform: translateY(-4px); } }
.td-tail { transform-box: fill-box; transform-origin: 0% 100%; animation: tdTail 3.4s ease-in-out infinite alternate; }
@keyframes tdTail { from { transform: rotate(-5deg); } to { transform: rotate(7deg); } }
.td-eyes { transform-box: fill-box; transform-origin: center; animation: tdBlink 5.2s infinite; }
@keyframes tdBlink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.td-broom { transform-box: fill-box; transform-origin: 62% 40%; }
.sc-tidy.is-running .td-broom { animation: tdSweep .7s ease-in-out infinite alternate; }
@keyframes tdSweep { from { transform: rotate(-7deg); } to { transform: rotate(6deg); } }
.td-dust circle { fill: rgba(255,255,255,.75); opacity: 0; }
.sc-tidy.is-running .td-dust circle { animation: tdDust 1.4s ease-out infinite; animation-delay: var(--d); }
@keyframes tdDust { 0% { transform: translate(0, 0) scale(.4); opacity: .7; } 100% { transform: translate(-40px, -30px) scale(1.6); opacity: 0; } }
.td-hat { transform-box: fill-box; transform-origin: 40% 100%; transform: scale(0); transition: transform .6s cubic-bezier(.3, 1.6, .5, 1); }
.td-bubble { fill: #FFFFFF; } .td-bang { stroke: #E2574C; stroke-width: 7; stroke-linecap: round; } .td-bang-dot { fill: #E2574C; }
.td-wow { opacity: 0; transform-box: fill-box; transform-origin: 30% 100%; }
.sc-tidy[data-sock="back"] .td-wow { animation: tdWow 2.4s ease-out both; }
@keyframes tdWow { 0% { opacity: 0; transform: scale(.2); } 14% { opacity: 1; transform: scale(1.15); } 24% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }
.sc-tidy[data-figure="off"] .td-coon { display: none; }
/* time is up: a clean floor that sparkles, the sock becomes a hat, the cat wakes up in the box */
.td-shine path { fill: #FFF6C8; } .td-shine g { opacity: 0; }
.sc-tidy.is-done .td-shine g { animation: tdShine 1.5s ease-in-out 3; animation-delay: calc(.5s + var(--d)); }
@keyframes tdShine { 50% { opacity: 1; } }
.sc-tidy.is-done .td-hat { transform: scale(1); transition-delay: .5s; }
.sc-tidy.is-done .td-i-sock { opacity: 0; transition: transform .9s linear, opacity .3s .4s; }
.sc-tidy.is-done .td-cat { transform: translateY(0); transition-delay: 1.5s; }
.sc-tidy.is-done .td-broom { animation: none; }
.sc-tidy.is-done .td-bob { animation: tdHop .8s cubic-bezier(.3, 1.6, .5, 1) 2; }
@keyframes tdHop { 50% { transform: translateY(-20px); } }

/* the timer hangs on the wall like a clock */
.sc-tidy .sc-timer { top: 11cqh; bottom: auto; right: 3cqw; width: 24cqh; }
.sc-tidy .sc-ring { width: 24cqh; height: 24cqh; }
.sc-tidy .sc-time { font-size: clamp(22px, 6.2cqh, 70px); }
.sc-tidy .sc-label { font-size: clamp(10px, 1.6cqh, 16px); }
@container (max-aspect-ratio: 1.15) {   /* tall screens: the words on top, the room below, centred on the floor */
  .sc-tidy .td-room { inset: auto; bottom: 0; height: 50cqh; width: calc(50cqh * 16 / 9); left: calc(50cqw - .77 * 50cqh * 16 / 9); }
  .sc-tidy .sc-timer { top: auto; bottom: 3cqh; right: auto; left: 4cqw; width: 28cqw; align-items: flex-start; }
  .sc-tidy .sc-ring { width: 28cqw; height: 28cqw; }
  .sc-tidy .sc-time { font-size: clamp(20px, 8cqw, 60px); }
  .sc-tidy .sc-label { font-size: clamp(9px, 2.2cqw, 15px); }
}