@font-face {
  font-family: "ZCOOL KuaiLe";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/zcool-kuaile-latin.woff2") format("woff2");
  unicode-range: U+0065, U+0068, U+0069;
}

:root {
  --ink: #35302b;

  /* dusk is the reference palette */
  --sky-1: #fdf8ea;
  --sky-2: #fbeac9;
  --sky-3: #f9d5a8;
  --sky-4: #f6c493;
  --glow-x: 82%;
  --glow-y: 17%;
  --glow-c: 255, 232, 170;
  --glow-a: .9;
  --sun-top: 7vh;
  --sun-left: auto;
  --sun-right: 8vw;
  --sun-w: clamp(150px, 14vw, 230px);
  --sun-op: 1;
  --moon-op: 0;
  --stars-op: 0;
  --firefly-op: 0;
  --cloud-fill: #fff8ea;
  --cloud-shade: #f2dfc0;
  --cloud-line: #6b5b4a;
  --cloud-op: 1;
  --win-min: .7;
  --win-max: .92;
  --lamp: .38;
  --arcade-min: .1;
  --arcade-max: .22;
  --screen-min: .8;
  --screen-max: 1;
  --glow-op: .4;
  --word-color: rgba(255, 250, 238, .62);
  --word-shadow: 0 3px 0 rgba(198, 150, 106, .3), 0 -2px 0 rgba(198, 150, 106, .12);
  --tint: rgba(255, 176, 96, .08);
  --tint-blend: soft-light;
  --vignette-a: .18;
}

:root[data-phase="dawn"] {
  --sky-1: #fdeef0;
  --sky-2: #fbe1d6;
  --sky-3: #f8d6bc;
  --sky-4: #f3c59c;
  --glow-x: 16%;
  --glow-y: 26%;
  --glow-c: 255, 206, 190;
  --glow-a: .75;
  --sun-top: 15vh;
  --sun-left: 6vw;
  --sun-right: auto;
  --win-min: .45;
  --win-max: .6;
  --lamp: .18;
  --arcade-min: .06;
  --arcade-max: .12;
  --screen-min: .55;
  --screen-max: .7;
  --cloud-fill: #fff3f0;
  --cloud-shade: #f4d9cf;
  --cloud-line: #8a6f68;
  --glow-op: .34;
  --word-color: rgba(255, 244, 238, .5);
  --word-shadow: 0 3px 0 rgba(196, 142, 132, .28), 0 -2px 0 rgba(196, 142, 132, .12);
  --tint: rgba(255, 190, 180, .14);
  --tint-blend: soft-light;
  --vignette-a: .14;
}

:root[data-phase="day"] {
  --sky-1: #f3faf6;
  --sky-2: #e6f1f2;
  --sky-3: #f7efda;
  --sky-4: #f2dfb2;
  --glow-x: 74%;
  --glow-y: 10%;
  --glow-c: 255, 250, 226;
  --glow-a: .8;
  --sun-top: 4vh;
  --sun-left: auto;
  --sun-right: 15vw;
  --win-min: .3;
  --win-max: .45;
  --lamp: .1;
  --arcade-min: .05;
  --arcade-max: .1;
  --screen-min: .45;
  --screen-max: .62;
  --cloud-fill: #fffdf7;
  --cloud-shade: #e9e7da;
  --cloud-line: #7d7a6e;
  --glow-op: .1;
  --word-color: rgba(255, 252, 246, .52);
  --word-shadow: 0 3px 0 rgba(158, 176, 182, .34), 0 -2px 0 rgba(158, 176, 182, .14);
  --tint: rgba(196, 224, 232, .16);
  --tint-blend: soft-light;
  --vignette-a: .1;
}

:root[data-phase="night"] {
  --sky-1: #1b2240;
  --sky-2: #262f4f;
  --sky-3: #35395c;
  --sky-4: #46405d;
  --glow-x: 84%;
  --glow-y: 16%;
  --glow-c: 186, 202, 246;
  --glow-a: .3;
  --sun-op: 0;
  --moon-op: 1;
  --stars-op: 1;
  --firefly-op: 1;
  --cloud-fill: #cdd6ee;
  --cloud-shade: #a3aecd;
  --cloud-line: #7e88ae;
  --cloud-op: .8;
  --win-min: .88;
  --win-max: 1;
  --lamp: .95;
  --arcade-min: .2;
  --arcade-max: .42;
  --screen-min: .95;
  --screen-max: 1;
  --glow-op: 1;
  --word-color: rgba(216, 226, 252, .17);
  --word-shadow: 0 0 20px rgba(178, 196, 255, .34), 0 0 4px rgba(178, 196, 255, .2);
  --tint: rgba(34, 44, 90, .38);
  --tint-blend: multiply;
  --vignette-a: .3;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: #f6c493;
  -webkit-tap-highlight-color: transparent;
}

svg { display: block; }

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
}

.sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(var(--glow-c), var(--glow-a)), rgba(var(--glow-c), 0) 32%),
    linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 42%, var(--sky-3) 70%, var(--sky-4) 100%);
}

.sky::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 38vh;
  background: linear-gradient(180deg, rgba(255, 236, 200, 0), rgba(255, 226, 182, .45));
}

.layer {
  position: absolute;
  inset: 0;
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0);
  pointer-events: none;
}

/* sky */

.sun-wrap {
  position: absolute;
  top: var(--sun-top);
  left: var(--sun-left);
  right: var(--sun-right);
  width: var(--sun-w);
  opacity: var(--sun-op);
  transition: opacity 1.4s ease;
}

.moon-wrap {
  position: absolute;
  top: 6vh;
  right: 10vw;
  width: clamp(130px, 12vw, 200px);
  opacity: var(--moon-op);
  transition: opacity 1.4s ease;
}

.moon {
  width: 100%;
  height: auto;
  animation: sunBob 11s ease-in-out infinite alternate;
}

.moon-rays {
  transform-box: fill-box;
  transform-origin: center;
  animation: spin 140s linear infinite reverse;
}

.stars {
  position: absolute;
  inset: 0;
  opacity: var(--stars-op);
  transition: opacity 1.6s ease;
}

.stars i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #fdfbff;
  box-shadow: 0 0 6px 1px rgba(226, 234, 255, .7);
  animation: twinkleStar 3.6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

.stars .shoot {
  width: 130px;
  height: 2px;
  left: 72%;
  top: 12%;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff);
  box-shadow: none;
  opacity: 0;
  animation: shoot 16s linear infinite;
}

.sun {
  width: 100%;
  height: auto;
  animation: sunBob 9s ease-in-out infinite alternate;
}

.sun-rays {
  transform-box: fill-box;
  transform-origin: center;
  animation: spin 90s linear infinite;
}

.cloud-slot {
  position: absolute;
}

.cloud-slot svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(4px 6px 0 rgba(53, 48, 43, .08));
  animation: drift var(--dur, 40s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}

.c1 { left: 2vw; top: 11vh; width: clamp(170px, 20vw, 310px); }
.c2 { left: 24vw; top: 29vh; width: clamp(110px, 13vw, 190px); opacity: .9; }
.c3 { right: 2vw; top: 31vh; width: clamp(150px, 17vw, 250px); opacity: .95; }
.c4 { left: 56vw; top: 7vh; width: clamp(90px, 9vw, 150px); opacity: .75; }

.bird {
  position: absolute;
  left: -10vw;
  opacity: .9;
  animation: fly var(--dur, 48s) linear infinite;
  animation-delay: var(--delay, 0s);
}

.bird svg { width: 100%; height: auto; }

.bird .wing {
  transform-box: fill-box;
  transform-origin: 22% 96%;
  animation: flap 1.15s ease-in-out infinite alternate;
  animation-delay: var(--flap, 0s);
}

.bird-1 { top: 15vh; width: 54px; }
.bird-2 { top: 9vh; width: 40px; opacity: .8; }
.bird-3 { top: 18vh; width: 32px; opacity: .7; }

/* hills */

.sprite {
  position: absolute;
  top: 4.5vh;
  left: 45vw;
  width: clamp(72px, 6.5vw, 108px);
  height: auto;
  filter: drop-shadow(4px 6px 0 rgba(53, 48, 43, .1));
  animation: spriteFloat 7.5s ease-in-out infinite alternate;
  pointer-events: none;
  user-select: none;
}

@keyframes spriteFloat {
  from { transform: translateY(-8px) rotate(-3deg); }
  to { transform: translateY(9px) rotate(3deg); }
}

.hill {
  position: absolute;
  left: -2%;
  width: 104%;
}

.hill-back { bottom: 8vh; height: 32vh; }
.hill-mid { bottom: 2vh; height: 26vh; }
.hill-front { bottom: 0; height: 15vh; }

/* town */

.town {
  position: absolute;
  left: 50%;
  bottom: 10vh;
  width: min(2200px, 98vw);
  height: auto;
  overflow: visible;
  transform: translateX(-50%);
}

.paper {
  filter: drop-shadow(5px 7px 0 rgba(53, 48, 43, .10));
}

/* foreground */

.plant {
  position: absolute;
  bottom: -3vh;
  width: clamp(120px, 13vw, 220px);
}

.plant svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(6px 8px 0 rgba(53, 48, 43, .14));
  animation: sway 7.5s ease-in-out infinite alternate;
  transform-origin: 50% 100%;
}

.plant-left { left: -2vw; }
.plant-left svg { animation-delay: -1.2s; }

.plant-right {
  right: -2vw;
  transform: scaleX(-1);
}

.plant-right svg { animation-delay: -3.4s; }

.fg-bed {
  position: absolute;
  bottom: 2.5vh;
  width: clamp(70px, 9vw, 140px);
}

.fg-bed svg {
  width: 100%;
  height: auto;
}

.fg-bed-1 { left: 17%; }
.fg-bed-2 { left: 70%; width: clamp(60px, 7.5vw, 118px); }

.firefly {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffe6a0;
  box-shadow: 0 0 10px 4px rgba(255, 215, 130, .5);
  opacity: 0;
  animation: fire 9s ease-in-out infinite;
}

.f1 { left: 22%; bottom: 12vh; animation-delay: -1.2s; }
.f2 { left: 48%; bottom: 7vh; animation-delay: -4.4s; }
.f3 { left: 71%; bottom: 13vh; animation-delay: -2.7s; }
.f4 { left: 88%; bottom: 8vh; animation-delay: -6.1s; }

.tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--tint);
  mix-blend-mode: var(--tint-blend);
  transition: background-color 1.4s ease;
}

/* lamp light that falls over the night town */

.layer-glow {
  mix-blend-mode: screen;
  opacity: var(--glow-op);
  transition: opacity 1.4s ease;
}

.glow-screen {
  animation: glowFlicker 3.6s ease-in-out infinite alternate;
}

@keyframes glowFlicker {
  0%, 100% { opacity: .82; }
  50% { opacity: 1; }
}

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 92% at 50% 56%, rgba(0, 0, 0, 0) 56%, rgba(94, 58, 32, var(--vignette-a)) 100%);
}

.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* life in the town */

.smoke-puff {
  animation: smoke 7s ease-out infinite;
  animation-delay: var(--delay, 0s);
  transform-box: fill-box;
  transform-origin: center;
}

.window-glow {
  animation: glow 6s ease-in-out infinite;
}
.sway {
  animation: sway 6s ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.flag {
  animation: flagWave 3.4s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: 50% 0%;
}

.twinkle {
  animation: twinkle 3s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  transform-box: fill-box;
  transform-origin: center;
}

.crane-load {
  animation: loadSway 9s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: 50% 0%;
}

.pennant {
  animation: pennant 2.8s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: 50% 0%;
}

.friend .tail {
  animation: tail 3.6s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: 10% 50%;
}

.friend-dog .tail {
  animation: wag .9s ease-in-out infinite alternate;
}

.friend .friend-eye {
  animation: blink 6.4s infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.wordmark {
  position: absolute;
  top: 13vh;
  left: 27vw;
  font-family: "ZCOOL KuaiLe", "YouYuan", "Comic Sans MS", cursive;
  font-size: clamp(56px, 8vw, 128px);
  font-weight: 400;
  letter-spacing: .05em;
  line-height: 1;
  color: var(--word-color);
  text-shadow: var(--word-shadow);
  transition: color 1.4s ease, text-shadow 1.4s ease;
  transform: rotate(-4deg);
  animation: wordDrift 15s ease-in-out infinite alternate;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.book-link {
  pointer-events: all;
  cursor: pointer;
}

.book-link:hover {
  filter: brightness(1.12);
}

.screen-glow {
  animation: screenPulse 5s ease-in-out infinite alternate;
}

.arcade-glow {
  animation: arcadePulse 4.2s ease-in-out infinite alternate;
}

.paint-arm {
  animation: paint 3s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: 12% 25%;
}

.lamp-glow {
  animation: lampGlow 4.5s ease-in-out infinite alternate;
}

/* clickable easter eggs */

.friend,
.controller,
.scaffold-worker {
  pointer-events: all;
  cursor: pointer;
}

.friend.is-hop {
  animation: hop .85s cubic-bezier(.2, .8, .2, 1);
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.friend-heart { opacity: 0; }

.friend.is-hop .friend-heart {
  animation: heartUp 1.05s ease-out;
  transform-box: fill-box;
  transform-origin: center;
}

.scaffold-worker.is-cheer {
  animation: workerCheer .9s ease-in-out;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.scaffold-worker.is-cheer .paint-arm {
  animation: paintCheer .9s ease-in-out;
}

.roller-splash {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.scaffold-worker.is-cheer .roller-splash {
  animation: splash .9s ease-out;
}

.controller.is-spin .controller-shape {
  animation: padWiggle .95s cubic-bezier(.3, .1, .2, 1);
  transform-box: fill-box;
  transform-origin: 50% 60%;
}

.controller-burst {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.controller.is-spin .controller-burst {
  animation: burst 1.1s ease-out;
}

/* quieter company in the town */

.snail,
.arcade-cabinet,
.mushrooms,
.popcorn {
  pointer-events: all;
  cursor: pointer;
}

.snail-crit { transform-box: fill-box; }

.snail.is-hide .snail-crit {
  animation: snailHide 1.5s ease-in-out;
}

.snail.is-hide .snail-shell {
  animation: shellWobble 1.5s ease-in-out;
  transform-box: fill-box;
  transform-origin: center;
}

.arcade-cabinet.is-coin {
  animation: cabRock .9s ease-in-out;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.arcade-cabinet.is-coin .screen-flash {
  animation: screenOn 1.2s ease-out;
}

.arcade-cabinet.is-coin .loose-coin {
  animation: coinInsert 1.05s ease-in forwards;
}

.mushrooms.is-bounce {
  animation: mushroomBounce .85s cubic-bezier(.3, .9, .3, 1);
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.popcorn.is-pop .kernels {
  animation: kernelsPop .95s ease-out;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.wish {
  position: absolute;
  top: -30px;
  width: 18px;
  height: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21 L3.4 12.4 C-0.6 8.4 1.6 2.2 6.6 2.2 C9.2 2.2 11.2 4 12 6 C12.8 4 14.8 2.2 17.4 2.2 C22.4 2.2 24.6 8.4 20.6 12.4 Z' fill='%23e06a4e' stroke='%2335302b' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: wishFall var(--fall, 2.6s) ease-in forwards;
  pointer-events: none;
}

/* keyframes */

@keyframes sunBob {
  from { transform: translateY(-4px); }
  to { transform: translateY(5px); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes drift {
  from { transform: translateX(-16px); }
  to { transform: translateX(22px); }
}

@keyframes fly {
  0% { transform: translate(-12vw, 0); }
  50% { transform: translate(48vw, -22px); }
  100% { transform: translate(112vw, 8px); }
}

@keyframes flap {
  from { transform: rotate(-17deg); }
  to { transform: rotate(27deg); }
}

@keyframes sway {
  from { transform: rotate(-1.3deg); }
  to { transform: rotate(1.3deg); }
}

@keyframes smoke {
  0% { opacity: 0; transform: translate(0, 8px) scale(.6); }
  22% { opacity: .75; }
  100% { opacity: 0; transform: translate(-18px, -72px) scale(1.5); }
}

@keyframes glow {
  0%, 100% { opacity: var(--win-min); }
  50% { opacity: var(--win-max); }
}

@keyframes flagWave {
  from { transform: rotate(-3.5deg); }
  to { transform: rotate(3.5deg); }
}

@keyframes twinkle {
  0%, 100% { opacity: .25; transform: scale(.7); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes tail {
  from { transform: rotate(-7deg); }
  to { transform: rotate(9deg); }
}

@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%, 97% { transform: scaleY(.1); }
}

@keyframes paint {
  from { transform: rotate(-4deg); }
  to { transform: rotate(6deg); }
}

@keyframes loadSway {
  from { transform: rotate(-1.6deg); }
  to { transform: rotate(1.6deg); }
}

@keyframes pennant {
  from { transform: rotate(-3deg); }
  to { transform: rotate(3deg); }
}

@keyframes wag {
  from { transform: rotate(-12deg); }
  to { transform: rotate(12deg); }
}

@keyframes lampGlow {
  from { opacity: calc(var(--lamp) * .6); }
  to { opacity: var(--lamp); }
}

@keyframes fire {
  0%, 100% { opacity: 0; transform: translate(0, 0); }
  30% { opacity: calc(.9 * var(--firefly-op)); }
  60% { opacity: calc(.35 * var(--firefly-op)); transform: translate(12px, -16px); }
}

@keyframes hop {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-14px); }
  55% { transform: translateY(0); }
  72% { transform: translateY(-6px); }
}

@keyframes heartUp {
  0% { opacity: 0; transform: translateY(2px) scale(.5); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-30px) scale(1.1); }
}

@keyframes workerCheer {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-6px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-3px); }
}

@keyframes paintCheer {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(14deg); }
  60% { transform: rotate(-8deg); }
  85% { transform: rotate(10deg); }
}

@keyframes splash {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(10px, -14px) scale(1.3); }
}

@keyframes padWiggle {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-7deg); }
  45% { transform: rotate(6deg); }
  70% { transform: rotate(-3deg); }
}

@keyframes snailHide {
  0%, 100% { opacity: 1; transform: translate(0, 0) scale(1); }
  22%, 72% { opacity: 0; transform: translate(-10px, 6px) scale(.8); }
}

@keyframes shellWobble {
  0%, 18%, 78%, 100% { transform: rotate(0); }
  32% { transform: rotate(-5deg); }
  52% { transform: rotate(4deg); }
  66% { transform: rotate(-2deg); }
}

@keyframes cabRock {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-1.2deg); }
  55% { transform: rotate(1deg); }
}

@keyframes screenOn {
  0% { opacity: 0; }
  12% { opacity: .85; }
  30% { opacity: .15; }
  45% { opacity: .6; }
  100% { opacity: 0; }
}

@keyframes coinInsert {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  40% { opacity: 1; transform: translate(-42px, -16px) rotate(300deg); }
  70% { opacity: 1; transform: translate(-50px, -2px) rotate(560deg); }
  100% { opacity: 0; transform: translate(-50px, 6px) rotate(620deg) scale(.6); }
}

@keyframes mushroomBounce {
  0%, 100% { transform: scale(1, 1); }
  30% { transform: scale(1.12, .86) translateY(2px); }
  55% { transform: scale(.92, 1.12) translateY(-6px); }
  75% { transform: scale(1.05, .95); }
}

@keyframes kernelsPop {
  0% { transform: translate(0, 0) scale(1); }
  35% { transform: translate(2px, -14px) scale(1.15); }
  70% { transform: translate(4px, -4px) scale(1.02); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes wishFall {
  to { transform: translate3d(0, 118vh, 0) rotate(var(--spin, 26deg)); opacity: .25; }
}

@keyframes wordDrift {
  from { transform: rotate(-4deg) translateY(-7px); }
  to { transform: rotate(-2.5deg) translateY(9px); }
}

@keyframes screenPulse {
  from { opacity: var(--screen-min); }
  to { opacity: var(--screen-max); }
}

@keyframes arcadePulse {
  from { opacity: var(--arcade-min); }
  to { opacity: var(--arcade-max); }
}

@keyframes twinkleStar {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.25); }
}

@keyframes shoot {
  0%, 86% { opacity: 0; transform: translate3d(40px, -18px, 0) rotate(16deg) scaleX(.3); }
  88% { opacity: .95; }
  100% { opacity: 0; transform: translate3d(-260px, 122px, 0) rotate(16deg) scaleX(1); }
}

@keyframes burst {
  0% { opacity: 0; transform: scale(.2); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(2.1); }
}

/* responsive */

@media (max-width: 820px) {
  :root[data-phase] {
    --sun-top: 6vh;
    --sun-left: auto;
    --sun-right: 3vw;
    --sun-w: clamp(118px, 31vw, 170px);
    --glow-x: 78%;
    --glow-y: 14%;
  }

  :root[data-phase="dawn"] {
    --sun-left: 4vw;
    --sun-right: auto;
    --glow-x: 20%;
    --glow-y: 26%;
  }

  .moon-wrap {
    top: 5vh;
    right: 5vw;
    width: clamp(96px, 26vw, 150px);
  }

  .town {
    width: 178vw;
    bottom: 13vh;
  }

  .c1 { left: -16vw; top: 15vh; width: 58vw; }
  .c2 { left: 10vw; top: 29vh; width: 30vw; }
  .c3 { right: -13vw; top: 32vh; width: 46vw; }
  .c4 { display: none; }

  .bird-1 { width: 40px; }
  .bird-2 { width: 30px; }
  .bird-3 { width: 24px; }

  .hill-back { bottom: 10vh; height: 30vh; }
  .hill-mid { bottom: 4vh; height: 24vh; }
  .hill-front { height: 16vh; }

  .plant { width: 37vw; bottom: -2vh; }
  .plant-left { left: -10vw; }
  .plant-right { right: -10vw; }

  .wordmark {
    top: 4.5vh;
    left: 6vw;
    font-size: clamp(46px, 15vw, 78px);
  }

  .sprite {
    top: 5vh;
    left: 44vw;
    width: clamp(56px, 16vw, 76px);
  }
}

@media (max-height: 640px) and (min-width: 821px) {
  :root[data-phase] {
    --sun-top: 4vh;
    --sun-w: clamp(110px, 10vw, 165px);
  }

  .moon-wrap {
    top: 4vh;
    width: clamp(96px, 10vw, 150px);
  }

  .town {
    width: min(1120px, 88vw);
    bottom: 10vh;
  }

  .hill-back { bottom: 6vh; height: 30vh; }
  .hill-mid { bottom: 2vh; height: 25vh; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .friend-heart,
  .controller-burst,
  .roller-splash,
  .firefly {
    opacity: 0 !important;
  }
}