/* Quiet work (js/scenes/quiet.js): a cosy room, rain or snow outside, a sleeping cat on the sill. Slow, small motion:
   the cat breathes, drops run down the glass, the candle and the fairy lights flicker. */
.sc-quiet {
  --wa1: #34495E; --wa2: #22313F; --la0: rgba(255,200,128,.42); --la1: rgba(255,186,110,.16);
  --sk1: #6F8DA6; --sk2: #B5C7D4; --hill: #6C8AA0; --house0: #56728A; --house1: #4A6479; --roof: #3C5266; --tree: #46627A; --ground: #50697E; --win-on: #FFD27A;
  --frame: #B97A4A; --frame-in: #D9A06A; --sill: #C98F57; --sill-shade: rgba(0,0,0,.22);
  --fur: #F0A04B; --fur-light: #FFE6C8; --stripe: #CF7A2E; --ear-in: #F7B6B0; --cushion: #E06C5A; --cushion-l: #F49A88;
  --title: #FFF6E8; --card: rgba(255,250,242,.95); --card-ink: #263445; --accent: #FFC46B; --ink: #263445; --chip: rgba(255,255,255,.12); --chip-line: rgba(255,255,255,.3);
  background: var(--wa2);
}
.sc-quiet[data-variant="snow"] {
  --wa1: #36405E; --wa2: #252C44; --la0: rgba(255,196,120,.46);
  --sk1: #5C77AB; --sk2: #CBD8EC; --hill: #DCE6F3; --house0: #4B6596; --house1: #3F5785; --roof: #34497A; --tree: #3D5480; --ground: #EEF3FA;
  --fur: #9AA3B5; --fur-light: #F4F1EC; --stripe: #6E7890; --cushion: #3F7FC4; --cushion-l: #7FB0E6;
  --accent: #FFD08A;
}
.qu-room .wa1 { stop-color: var(--wa1); } .qu-room .wa2 { stop-color: var(--wa2); } .qu-room .la0 { stop-color: var(--la0); } .qu-room .la1 { stop-color: var(--la1); }
.qu-room .sk1 { stop-color: var(--sk1); } .qu-room .sk2 { stop-color: var(--sk2); }
.qu-paper { fill: #FFFFFF; opacity: .035; }
.qu-lamp { transform-box: fill-box; transform-origin: center; animation: quLamp 9s ease-in-out infinite alternate; }
@keyframes quLamp { to { opacity: .82; transform: scale(1.04); } }

/* outside */
.qu-clouds { fill: rgba(255,255,255,.22); animation: quClouds 60s ease-in-out infinite alternate; }
@keyframes quClouds { from { transform: translateX(-40px); } to { transform: translateX(50px); } }
.qu-hills { fill: var(--hill); opacity: .8; }
.qu-house rect:first-child, .qu-house > path:first-of-type { fill: var(--house0); }
.qu-house.h1 rect:first-child { fill: var(--house1); }
.qu-house > path:first-of-type { fill: var(--roof); }
.qu-roofsnow, .qu-treesnow { fill: #F4F8FD; }
.qu-win { fill: rgba(20,30,46,.45); } .qu-win.on { fill: var(--win-on); }
.qu-win.blink { animation: quWin 22s steps(1) infinite; }
@keyframes quWin { 0%, 40% { fill: rgba(20,30,46,.45); } 41%, 100% { fill: var(--win-on); } }
.qu-chim { fill: var(--roof); }
.qu-tree path { stroke: var(--tree); stroke-width: 7; } .qu-tree circle { fill: var(--tree); }
.qu-ground { fill: var(--ground); }
.qu-rain path { stroke: rgba(255,255,255,.45); stroke-width: 2; stroke-linecap: round; }
.qu-rain > g { animation: quRain var(--t) linear infinite; animation-delay: var(--d); }   /* a sheet: one band down, then again without a seam */
@keyframes quRain { from { transform: translateY(40px); } to { transform: translateY(560px); } }
.qu-flake { fill: #FFFFFF; opacity: .9; animation: quSnow var(--t) linear var(--d) infinite, quSway var(--s) ease-in-out infinite alternate; }
@keyframes quSnow { from { transform: translate(0, 40px); } to { transform: translate(-40px, 560px); } }
@keyframes quSway { from { translate: -8px 0; } to { translate: 8px 0; } }
.qu-drop { fill: rgba(220,236,248,.22); stroke: rgba(255,255,255,.55); stroke-width: 1.2; }
.qu-drop-hi { fill: rgba(255,255,255,.85); }
.qu-run-in { animation: quRun var(--t) cubic-bezier(.55,0,.85,.4) infinite; animation-delay: var(--d); }
@keyframes quRun { 0% { transform: translateY(0); opacity: 0; } 6% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(300px); opacity: 0; } }
.qu-trail { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 2.4; stroke-linecap: round; }
.qu-glare { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 28; stroke-linecap: round; }

/* the window, the lights, the sill */
.qu-frame-out { fill: none; stroke: var(--frame); stroke-width: 34; stroke-linejoin: round; }
.qu-frame-in { fill: none; stroke: var(--frame-in); stroke-width: 6; stroke-linejoin: round; opacity: .7; }
.qu-bar { fill: none; stroke: var(--frame); stroke-width: 16; }
.qu-wire { fill: none; stroke: #2A221C; stroke-width: 2.4; }
.qu-bulb { opacity: .95; } .qu-halo { opacity: .35; animation: quTwinkle var(--t) ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes quTwinkle { from { opacity: .2; } to { opacity: .6; } }
.qu-bulbs .c0 { fill: #FFD27A; } .qu-bulbs .c1 { fill: #FF9E7A; } .qu-bulbs .c2 { fill: #FFF2C2; } .qu-bulbs .c3 { fill: #9FE0C8; }
.qu-sill { fill: var(--sill); } .qu-sill-shade { fill: var(--sill-shade); }
.qu-leaf.l0 { fill: #3E9C62; } .qu-leaf.l1 { fill: #57B678; }
.qu-leaves { transform-box: view-box; animation: quPlant 7s ease-in-out infinite alternate; transform-origin: 1418px 495px; }
@keyframes quPlant { from { transform: rotate(-2deg); } to { transform: rotate(2.5deg); } }
.qu-pot { fill: #D9774E; } .qu-pot-rim { fill: #E98C62; }
.qu-candle-glow { transform-box: fill-box; transform-origin: center; animation: quGlow 3.1s ease-in-out infinite alternate; }
@keyframes quGlow { from { opacity: .7; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }
.qu-jar { fill: rgba(255,255,255,.25); stroke: rgba(255,255,255,.5); stroke-width: 2; } .qu-wax { fill: #FFF3E0; }
.qu-wick { stroke: #3A2A20; stroke-width: 2.4; stroke-linecap: round; }
.qu-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: quFlame 1.7s ease-in-out infinite; }
@keyframes quFlame { 0%, 100% { transform: scale(1, 1) rotate(0); } 25% { transform: scale(.94, 1.06) rotate(-3deg); } 50% { transform: scale(1.04, .95) rotate(2deg); } 75% { transform: scale(.97, 1.04) rotate(-1deg); } }
.qu-mug-body { fill: #F4F1E8; stroke: #CFC6B4; stroke-width: 2; } .qu-mug-band { fill: var(--cushion); } .qu-mug-handle { fill: none; stroke: #F4F1E8; stroke-width: 7; stroke-linecap: round; }
.qu-steam path { fill: none; stroke: #FFFFFF; stroke-width: 4; stroke-linecap: round; opacity: 0; animation: quSteam 4.4s ease-out infinite; }
.qu-steam path:nth-child(2) { animation-delay: -2.2s; }
@keyframes quSteam { 0% { opacity: 0; transform: translateY(6px); } 30% { opacity: .6; } 100% { opacity: 0; transform: translateY(-24px); } }

/* the cat */
.qu-cushion { fill: var(--cushion); } .qu-cushion-l { fill: none; stroke: var(--cushion-l); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 12; }
.qu-fur { fill: var(--fur); } .qu-fur.light, .qu-paws { fill: var(--fur-light); }
.qu-stripe { fill: none; stroke: var(--stripe); stroke-width: 7; stroke-linecap: round; opacity: .8; }
.qu-ear { fill: var(--fur); } .qu-ear-in { fill: var(--ear-in); }
.qu-breathe { transform-box: fill-box; transform-origin: 50% 100%; animation: quBreathe 4.8s ease-in-out infinite; }
@keyframes quBreathe { 50% { transform: scale(1.012, 1.04); } }
.qu-head { transform-box: fill-box; transform-origin: 70% 90%; animation: quHead 4.8s ease-in-out infinite; transition: transform .8s cubic-bezier(.3,1.4,.5,1); }
@keyframes quHead { 50% { transform: translateY(-1.5px); } }
.qu-ear-r { transform-box: fill-box; transform-origin: 30% 100%; animation: quEar 11s ease-in-out infinite; }
@keyframes quEar { 0%, 86%, 100% { transform: rotate(0); } 88% { transform: rotate(14deg); } 90% { transform: rotate(-4deg); } 92% { transform: rotate(9deg); } 94% { transform: rotate(0); } }
.qu-tail-p { fill: none; stroke: var(--fur); stroke-width: 26; stroke-linecap: round; }
.qu-tail-tip { fill: none; stroke: var(--stripe); stroke-width: 26; stroke-linecap: round; transform-box: fill-box; transform-origin: 100% 0; animation: quTail 9s ease-in-out infinite; }
@keyframes quTail { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-26deg); } 90% { transform: rotate(6deg); } }
.qu-sleep path { fill: none; stroke: #3B2A22; stroke-width: 4.5; stroke-linecap: round; }
.qu-awake { fill: #2E7D4F; opacity: 0; transition: opacity .3s .4s; } .qu-awake .qu-eye-hi { fill: #FFFFFF; }
.qu-nose { fill: #E58A8A; } .qu-mouth, .qu-whisk { fill: none; stroke: #3B2A22; stroke-width: 2.4; stroke-linecap: round; } .qu-whisk { stroke: rgba(255,255,255,.75); stroke-width: 2; }
.qu-zzz { font-family: var(--serif); font-style: italic; font-weight: 700; fill: #FFF6E8; }
.qu-zzz text { font-size: 30px; opacity: 0; animation: quZ 6s ease-out infinite; }
.qu-zzz text:nth-child(2) { font-size: 38px; animation-delay: 2s; } .qu-zzz text:nth-child(3) { font-size: 46px; animation-delay: 4s; }
@keyframes quZ { 0% { opacity: 0; transform: translate(10px, 14px); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(-16px, -30px); } }
.sc-quiet[data-figure="off"] .qu-cat { display: none; }
/* time is up: the cat wakes and looks up */
.sc-quiet.is-done .qu-sleep, .sc-quiet.is-done .qu-zzz { display: none; }
.sc-quiet.is-done .qu-awake { opacity: 1; }
.sc-quiet.is-done .qu-head { animation: none; transform: translateY(-14px) rotate(-6deg); }
.sc-quiet.is-done .qu-tail-tip { animation: quTail 1.4s ease-in-out 3; }

/* the timer, on the wall under the window */
.sc-quiet .sc-timer { right: calc(min(47.8cqh, 26.9cqw) - 12.5cqh); bottom: 3cqh; width: 25cqh; }
.sc-quiet .sc-ring { width: 25cqh; height: 25cqh; }
.sc-quiet .sc-time { font-size: clamp(24px, 6.4cqh, 72px); }
.sc-quiet .sc-label { font-size: clamp(10px, 1.6cqh, 16px); }
@container (max-aspect-ratio: 1.15) {
  .sc-quiet .qu-room { top: auto; bottom: 0; height: 62cqh; width: calc(62cqh * 16 / 9); left: auto; right: -8cqh; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%); mask-image: linear-gradient(to bottom, transparent, #000 18%); }
  .sc-quiet .sc-timer { left: 5cqw; right: auto; width: 34cqw; align-items: flex-start; }
  .sc-quiet .sc-ring { width: 34cqw; height: 34cqw; }
  .sc-quiet .sc-time { font-size: clamp(20px, 9cqw, 64px); }
  .sc-quiet .sc-label { font-size: clamp(9px, 2.4cqw, 16px); }
}
/* "time is up" on the wall beside the window, so the cat can be seen waking */
.sc-quiet .sc-done { left: 26cqw; top: 53cqh; max-width: 46cqw; font-size: clamp(22px, 4.2cqh, 52px); }
@container (max-aspect-ratio: 1.15) { .sc-quiet .sc-done { left: 50%; top: 30cqh; max-width: 90cqw; } }