/* Child play uses an illustrated map with the tools and sticker collection beside it on wide screens. */
.playing main {
  max-width: 1190px;
}
.playing[data-game="choose"] .game-meta {
  grid-area: meta;
}
.playing[data-game="choose"] .atlas {
  grid-area: map;
  width: 100%;
  max-width: none;
}
.playing .play-invite {
  grid-area: play;
}
.playing .sticker-pocket {
  grid-area: pocket;
}
@media (min-width: 880px) {
  .playing[data-game="choose"] main:has(.atlas) {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(215px, 0.75fr);
    grid-template-areas: "meta meta" "map play" "map pocket";
    grid-template-rows: auto auto 1fr;
    gap: 14px;
    align-items: start;
  }
  .playing[data-game="choose"] main:has(.atlas) .game-meta {
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .playing[data-game="choose"] main:has(.atlas) .play-invite {
    min-height: 110px;
    flex-wrap: wrap;
    padding: 16px 21px;
    margin: 0;
  }
  .playing[data-game="choose"] main:has(.atlas) .play-invite img {
    width: 100px;
    height: 45px;
  }
  .playing[data-game="choose"] main:has(.atlas) .sticker-pocket {
    margin: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 19px;
  }
  .playing .game-shell:not(.atlas) {
    grid-template-columns: minmax(0, 1.48fr) minmax(270px, 1fr);
  }
  .playing .game-panel {
    padding: clamp(17px, 2.6vw, 35px);
  }
  .playing .game-panel h1 {
    font-size: clamp(2rem, 3vw, 3.2rem);
  }
  .playing .toy-game {
    max-width: 1150px;
    grid-template-columns: minmax(0, 1.5fr) minmax(290px, 1fr);
  }
}
/* Older staff/sales notice bars retain their own lines in the map grid. */
.playing[data-game="choose"] main > .draftbar,
.playing[data-game="choose"] main > .pack-label,
.playing[data-game="choose"] main > .updated-demo,
.playing[data-game="choose"] main > .game-credit {
  grid-column: 1/-1;
}
.staff-hello {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 0;
  padding: 11px 14px;
  background: #e4efe5;
  border-radius: 16px;
  border: 1px solid #b7cbb9;
  text-align: left;
}
.staff-hello[hidden] {
  display: none;
}
.welcome-face {
  width: clamp(64px, 9vw, 112px);
  height: clamp(68px, 9vw, 105px);
  object-fit: contain;
  align-self: end;
  transform-origin: 48% 90%;
}
.staff-hello strong,
.staff-hello small {
  display: block;
}
.staff-hello small {
  font-size: 0.78rem;
  color: #3d6257;
}
.staff-hello p {
  margin: 3px 0 5px;
  line-height: 1.3;
}
.staff-hello .secondary,
.staff-hello .textlink {
  min-height: 40px;
  padding: 5px 9px;
}
.welcome-studio {
  max-width: 670px;
  margin: 0 auto;
  padding: clamp(18px, 4vw, 40px);
}
.welcome-studio h1 {
  font-size: clamp(2rem, 6vw, 3.1rem);
}
.welcome-studio label,
#welcome-manager label {
  display: grid;
  gap: 6px;
  margin: 14px 0;
}
.welcome-studio .checkbox {
  display: flex;
}
.welcome-studio .textlink {
  min-height: 40px;
}
.welcome-studio .actions {
  margin: 10px 0;
}
.welcome-studio .staff-hello {
  margin-bottom: 16px;
}
#welcome-manager select {
  width: 100%;
  font: inherit;
  padding: 8px;
}
#stop-voice[hidden] {
  display: none;
}
.zip-toy {
  width: min(100%, 255px);
  margin: 4px 0 10px;
  color: #604527;
}
.zip-toy small {
  font-weight: 850;
}
.zip-lane {
  position: relative;
  touch-action: none;
  background: #ce8c48;
  border: 3px solid #ad7040;
  border-radius: 20px;
  height: 48px;
  cursor: grab;
  box-shadow: inset 0 2px 2px #ab704b;
}
.zip-track {
  position: absolute;
  top: 44%;
  left: 6%;
  right: 6%;
  height: 8px;
  border: 2px solid #614938;
  background: repeating-linear-gradient(90deg, #e8d6ae 0 4px, #79664d 4px 7px);
  border-radius: 4px;
}
.zip-handle {
  position: absolute;
  left: calc(3% + var(--slide, 0%));
  top: 2px;
  width: 40px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #315244;
  background: #fae5ab;
  border: 3px solid #73532a;
  border-radius: 14px;
  font-size: 21px;
  font-weight: 900;
}
.pulling {
  cursor: grabbing;
}
.toy-bright {
  position: absolute;
  inset: 9% 9% auto auto;
  pointer-events: none;
}
.brush-splash {
  position: absolute;
  left: 50%;
  top: 0;
  color: #fffcdf;
  filter: drop-shadow(0 1px 2px #33726f);
  font-size: clamp(18px, 4vw, 36px);
  pointer-events: none;
}
.playing .memory-card.paired {
  border-color: #4f8972;
}
@media (max-width: 620px) {
  .playing main {
    padding-top: 5px;
  }
  .playing .game-meta {
    margin: 3px auto 7px;
  }
  .playing .atlas .game-panel {
    padding: 10px 14px;
  }
  .playing .sticker-pocket {
    padding: 6px 10px;
    margin: 8px 0;
  }
  .playing .sticker-pocket .pocket-title img {
    height: 45px;
  }
  .playing .play-invite {
    margin-top: 9px;
    padding: 8px 12px;
  }
  .playing .toy-panel {
    padding: 12px 15px;
  }
  .playing .toy-controls {
    gap: 7px;
  }
  .playing .game-panel .staff-hello {
    margin: 8px 0 0;
    padding: 6px 10px;
  }
  .playing .zip-toy {
    margin: 0 0 6px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .staff-hello.speaking .welcome-face {
    animation: welcome-nod 1s ease-in-out infinite alternate;
  }
  @keyframes welcome-nod {
    from {
      transform: rotate(-2deg);
    }
    to {
      transform: rotate(2deg) translateY(-3px);
    }
  }
  .playing .map-stop:hover .map-dot,
  .playing .map-stop:focus-visible .map-dot {
    transform: scale(1.16);
  }
  .playing .map-stop .map-dot {
    transition: transform 0.16s;
  }
  .playing .map-stop:active .map-dot {
    transform: scale(0.88);
  }
  .room-atlas .map-stop .map-dot {
    animation: pin-pop 0.38s backwards;
  }
  .room-atlas .map-stop:nth-of-type(2) .map-dot {
    animation-delay: 0.09s;
  }
  .room-atlas .map-stop:nth-of-type(3) .map-dot {
    animation-delay: 0.17s;
  }
  @keyframes pin-pop {
    from {
      opacity: 0.45;
      scale: 0.65;
    }
    70% {
      scale: 1.12;
    }
    to {
      opacity: 1;
      scale: 1;
    }
  }
  .playing .found .won-sticker,
  .playing .secret-star {
    animation: sticker-pop 0.46s ease-out;
  }
  .playing .role-scene:not(.swapped) .role-player.first img {
    animation: greet-lean 0.55s ease-out;
  }
  @keyframes greet-lean {
    0% {
      rotate: -4deg;
      translate: 0 3%;
    }
    65% {
      rotate: 2deg;
    }
    100% {
      rotate: 0deg;
    }
  }
  @keyframes sticker-pop {
    from {
      scale: 0.7;
      rotate: -9deg;
    }
    68% {
      scale: 1.1;
      rotate: 4deg;
    }
    to {
      scale: 1;
      rotate: 0deg;
    }
  }
  .playing .brush-splash {
    animation: brush-splash 0.36s ease-out forwards;
  }
  @keyframes brush-splash {
    from {
      opacity: 1;
      transform: translate(-15%, 5%) scale(0.6);
    }
    to {
      opacity: 0;
      transform: translate(35%, -65%) scale(1.2);
    }
  }
  .playing .paste-dab:last-child {
    animation: sticker-pop 0.22s ease-out;
  }
}
.polished-pip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 1.5;
  background: radial-gradient(
    ellipse at 50% 70%,
    #faeccb 10%,
    #cfe7d6 62%,
    #a6cbb8
  );
  display: grid;
  place-items: center;
}
.polished-pip img {
  height: 90%;
  max-width: 76%;
  object-fit: contain;
  z-index: 1;
}
.polished-pip > span {
  position: absolute;
  font-size: clamp(38px, 8vw, 82px);
  color: #fff5bc;
  top: 12%;
  right: 16%;
  text-shadow: 1px 2px 0 #a8783a;
}
.polish-glow {
  position: absolute;
  inset: 28% 22% 10%;
  border-radius: 50%;
  background: #fff7db;
  filter: blur(20px);
}
@media (prefers-reduced-motion: no-preference) {
  .polished-pip img {
    animation: sticker-pop 0.48s ease-out;
  }
}
.playing .play-invite {
  overflow: hidden;
  padding: 0 14px 0 0;
  gap: 12px;
}
.chair-peek {
  display: block;
  width: 76px;
  height: 57px;
  flex: none;
  overflow: hidden;
  border-radius: 0 40% 40% 0;
  background: #b7d7cd;
}
.playing .play-invite .chair-peek img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  transform: scale(1.06);
}
@media (min-width: 880px) {
  .playing[data-game="choose"] main:has(.atlas) .play-invite {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0;
    padding: 0;
    align-content: start;
  }
  .playing[data-game="choose"] .chair-peek {
    grid-column: 1/-1;
    width: 100%;
    height: clamp(150px, 15vw, 220px);
    border-radius: 0;
  }
  .playing[data-game="choose"] .play-invite > span:nth-child(2) {
    padding: 13px 16px;
  }
  .playing[data-game="choose"] .play-invite > .ico {
    margin: 0 16px 0 0;
  }
}
.peek-toy {
  margin: 4px 0 10px;
  width: max-content;
  max-width: 100%;
  color: #385a4b;
}
.peek-toy small {
  font-weight: 850;
}
.peek-pages {
  position: relative;
  width: clamp(110px, 15vw, 176px);
  height: 78px;
  border: 3px solid #45674e;
  border-radius: 4px 15px 12px 6px;
  background: #fbf4dc;
  box-shadow: 0 4px 0 #d2c6a3;
  perspective: 450px;
  touch-action: none;
  cursor: grab;
  display: grid;
  place-items: center;
}
.peek-pages img {
  height: 65px;
  max-width: 100%;
  object-fit: contain;
}
.peek-cover {
  position: absolute;
  inset: -1px;
  background: linear-gradient(
    100deg,
    #496f5b 2%,
    #80a47f 9%,
    #5a8469 12%,
    #81a37f 98%
  );
  border-radius: 3px 13px 11px 3px;
  transform-origin: 0 50%;
  transform: rotateY(var(--turn, 0deg));
  display: grid;
  place-items: center;
  color: #ffdda0;
  box-shadow: inset 0 0 0 4px #94b18c;
}
.peek-cover span {
  font:
    900 32px Nunito,
    sans-serif;
}
.peek-pages.pulling {
  cursor: grabbing;
}
@media (prefers-reduced-motion: reduce) {
  .peek-cover {
    transform: none;
  }
  .peek-pages.pulling .peek-cover {
    opacity: 0.35;
  }
  .zip-handle {
    transition: none;
  }
}

/* Expressive play. Every effect below answers something the child just did and is skipped with reduced motion. */
@property --washed {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
.playing .staff-hello {
  position: relative;
  overflow: hidden;
}
.playing .staff-hello p {
  position: relative;
  width: fit-content;
  max-width: 100%;
  padding: 6px 11px;
  border-radius: 14px;
  background: #fffef8;
  box-shadow: 0 2px 0 #c3d5c5;
  font-weight: 750;
}
.playing .staff-hello p::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 10px;
  border: 7px solid transparent;
  border-right-color: #fffef8;
  border-left: 0;
}
.foam-pop,
.clean-ring,
.swap-badge,
.discovery-burst,
.tap-ripple {
  pointer-events: none;
}
.foam-pop {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid #ffffffd9;
  background: radial-gradient(circle at 30% 30%, #fff, #c9f5f8 45%, #8cc7cdb3);
  opacity: 0;
}
.clean-ring {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 3px solid #fff4b8;
  opacity: 0;
}
.swap-badge {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 44%;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fffced;
  color: #1f6f6a;
  font:
    900 30px/1 Nunito,
    sans-serif;
  box-shadow: 0 4px 0 #9fc6b9;
  translate: -50% -50%;
  opacity: 0;
}
.cheer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cheer i {
  position: absolute;
  left: 50%;
  top: 55%;
  font-style: normal;
  color: #ffd459;
  font-size: clamp(18px, 3.4vw, 34px);
  text-shadow: 0 1px 0 #a8783a;
  opacity: 0;
}
.discovery-burst,
.tap-ripple {
  position: fixed;
  z-index: 40;
  width: 0;
  height: 0;
}
.discovery-burst::before {
  content: "";
  position: absolute;
  left: -40px;
  top: -40px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 5px solid #fff3a8;
  box-shadow: 0 0 0 3px #e88f2a88;
  opacity: 0;
}
.discovery-burst i {
  position: absolute;
  left: -5px;
  top: -11px;
  width: 10px;
  height: 22px;
  border-radius: 6px;
  background: #ffd459;
  box-shadow: 0 0 0 2px #fff9d6;
  opacity: 0;
}
.discovery-burst i:nth-child(2) {
  --r: 45deg;
}
.discovery-burst i:nth-child(3) {
  --r: 90deg;
  background: #f07f2a;
}
.discovery-burst i:nth-child(4) {
  --r: 135deg;
}
.discovery-burst i:nth-child(5) {
  --r: 180deg;
  background: #6fc4b7;
}
.discovery-burst i:nth-child(6) {
  --r: 225deg;
}
.discovery-burst i:nth-child(7) {
  --r: 270deg;
  background: #f07f2a;
}
.discovery-burst i:nth-child(8) {
  --r: 315deg;
}
.tap-ripple::before {
  content: "";
  position: absolute;
  left: -26px;
  top: -26px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid #fffbe0;
  box-shadow: 0 0 0 2px #2d5f5a55;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  /* Familiar staff peek up from their card, wave, then speak. */
  .playing .game-panel .staff-hello {
    animation: hello-card 0.45s cubic-bezier(0.2, 1.2, 0.4, 1) 0.1s backwards;
  }
  .playing .game-panel .staff-hello .welcome-face {
    animation:
      hello-rise 0.55s cubic-bezier(0.2, 1.35, 0.4, 1) 0.3s backwards,
      hello-wave 1.2s ease-in-out 0.9s;
  }
  .playing .game-panel .staff-hello p {
    transform-origin: 0 50%;
    animation: hello-say 0.4s cubic-bezier(0.3, 1.6, 0.5, 1) 0.75s backwards;
  }
  .playing .game-panel .staff-hello.speaking .welcome-face {
    animation: welcome-nod 1s ease-in-out infinite alternate;
  }
  @keyframes hello-card {
    from {
      opacity: 0;
      transform: translateY(14px) scale(0.97);
    }
  }
  @keyframes hello-rise {
    from {
      transform: translateY(75%);
    }
  }
  @keyframes hello-wave {
    0%,
    100% {
      transform: none;
    }
    20% {
      transform: rotate(-6deg);
    }
    45% {
      transform: rotate(7deg);
    }
    70% {
      transform: rotate(-4deg);
    }
  }
  @keyframes hello-say {
    from {
      opacity: 0;
      transform: scale(0.5);
    }
  }
  /* Brushing: the brush scrubs, foam flies, clean teeth ring out, the meter springs. */
  .hand-tool.moving .made-brush {
    animation: tool-scrub 0.16s ease-in-out infinite alternate;
  }
  .hand-tool.moving .toy-mirror {
    animation: tool-peer 0.5s ease-in-out infinite alternate;
  }
  .tooth-score i {
    transition: --washed 0.42s cubic-bezier(0.3, 1.5, 0.5, 1);
  }
  .foam-pop {
    animation: foam-float 0.72s ease-out forwards;
  }
  .clean-ring {
    animation: clean-ring 0.6s ease-out forwards;
  }
  .tooth-zone .tooth-bubbles {
    animation: foam-squish 0.26s ease-out;
  }
  .secret-star {
    position: relative;
  }
  .secret-star::after {
    content: "";
    position: absolute;
    inset: -55%;
    border-radius: 50%;
    border: 3px solid #ffe27a;
    animation: clean-ring 0.75s ease-out 0.1s forwards;
    opacity: 0;
  }
  .polished-pip img {
    animation: pip-cheer 1.15s cubic-bezier(0.3, 1.1, 0.5, 1);
    transform-origin: 50% 100%;
  }
  .cheer i {
    animation: cheer-out 1s cubic-bezier(0.2, 0.8, 0.3, 1) var(--d) forwards;
  }
  /* Swapping seats. */
  .swap-badge {
    animation: swap-badge 0.95s ease-out forwards;
  }
  .role-scene:not(.swapped) .role-player.second img {
    animation: greet-hop 0.7s cubic-bezier(0.3, 1.3, 0.5, 1) 0.2s backwards;
  }
  .role-scene .role-player span {
    animation: hello-say 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) 0.45s backwards;
  }
  /* Discoveries. */
  .discovery-burst::before {
    animation: burst-ring 0.7s ease-out forwards;
  }
  .discovery-burst i {
    animation: burst-ray 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
  }
  .tap-ripple::before {
    animation: tap-ripple 0.5s ease-out forwards;
  }
  .playing .scene-frame.celebrate .guide {
    animation: guide-cheer 0.95s cubic-bezier(0.3, 1.2, 0.5, 1);
  }
  .playing .room-atlas .map-stop.fresh .map-dot {
    animation: fresh-pin 0.75s cubic-bezier(0.3, 1.6, 0.5, 1) 0.35s backwards;
  }
  .playing .pocket-slot.fresh .stamp {
    animation: pocket-in 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 0.5s backwards;
  }
  .playing .memory-card.just-flipped {
    animation: card-flip 0.34s ease-out;
  }
  .playing .memory-card.paired-now {
    animation: pair-jig 0.55s ease-out;
  }
  .playing .postcard .placed.just-placed {
    animation: stamp-slam 0.5s cubic-bezier(0.3, 1.5, 0.5, 1);
  }
  @keyframes tool-scrub {
    from {
      transform: translateX(-5px) rotate(-3deg);
    }
    to {
      transform: translateX(5px) rotate(3deg);
    }
  }
  @keyframes tool-peer {
    to {
      transform: rotate(5deg) translateY(-3px);
    }
  }
  @keyframes foam-float {
    from {
      opacity: 1;
      transform: translate(-50%, 0) scale(var(--s));
    }
    to {
      opacity: 0;
      transform: translate(calc(-50% + var(--dx)), var(--dy)) scale(calc(var(--s) * 1.4));
    }
  }
  @keyframes foam-squish {
    40% {
      transform: scale(1.2, 0.78);
    }
  }
  @keyframes clean-ring {
    from {
      opacity: 1;
      transform: scale(0.4);
    }
    to {
      opacity: 0;
      transform: scale(1.7);
    }
  }
  @keyframes pip-cheer {
    0% {
      transform: scale(0.8, 1.15) translateY(8%);
    }
    22% {
      transform: scale(1.06, 0.94) translateY(-14%);
    }
    42% {
      transform: scale(1.1, 0.9) translateY(0);
    }
    62% {
      transform: scale(0.98, 1.03) translateY(-6%);
    }
    82% {
      transform: scale(1.03, 0.97) translateY(0);
    }
    100% {
      transform: none;
    }
  }
  @keyframes cheer-out {
    from {
      opacity: 1;
      transform: translate(-50%, -50%) rotate(var(--a)) translateY(-10px) scale(0.3);
    }
    70% {
      opacity: 1;
    }
    to {
      opacity: 0;
      transform: translate(-50%, -50%) rotate(var(--a)) translateY(min(-130px, -16vw)) scale(1.1);
    }
  }
  @keyframes swap-badge {
    0% {
      opacity: 0;
      transform: scale(0.3) rotate(-180deg);
    }
    35% {
      opacity: 1;
      transform: scale(1.15) rotate(0);
    }
    75% {
      opacity: 1;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(0.8);
    }
  }
  @keyframes greet-hop {
    0% {
      transform: translateY(-14%) scale(0.95, 1.06);
    }
    45% {
      transform: translateY(0) scale(1.08, 0.92);
    }
    70% {
      transform: translateY(-4%);
    }
    100% {
      transform: none;
    }
  }
  @keyframes burst-ring {
    from {
      opacity: 1;
      transform: scale(0.3);
    }
    to {
      opacity: 0;
      transform: scale(1.9);
    }
  }
  @keyframes burst-ray {
    from {
      opacity: 1;
      transform: rotate(var(--r, 0deg)) translateY(-14px) scaleY(0.4);
    }
    to {
      opacity: 0;
      transform: rotate(var(--r, 0deg)) translateY(-78px) scaleY(1);
    }
  }
  @keyframes tap-ripple {
    from {
      opacity: 0.9;
      transform: scale(0.3);
    }
    to {
      opacity: 0;
      transform: scale(1.4);
    }
  }
  @keyframes guide-cheer {
    0% {
      transform: scale(1.06, 0.9);
    }
    30% {
      transform: translateY(-18%) scale(0.95, 1.07) rotate(-4deg);
    }
    55% {
      transform: translateY(0) scale(1.09, 0.9);
    }
    75% {
      transform: translateY(-5%) rotate(3deg);
    }
    100% {
      transform: none;
    }
  }
  @keyframes fresh-pin {
    0% {
      transform: scale(0.4);
      box-shadow: 0 0 0 0 #ffd459;
    }
    55% {
      transform: scale(1.35);
      box-shadow: 0 0 0 10px #ffd45900;
    }
    100% {
      transform: none;
    }
  }
  @keyframes pocket-in {
    0% {
      transform: translateY(-40%) scale(0.4) rotate(-20deg);
      opacity: 0.3;
    }
    60% {
      transform: scale(1.18) rotate(6deg);
      opacity: 1;
    }
  }
  @keyframes card-flip {
    from {
      transform: perspective(500px) rotateY(90deg);
    }
  }
  @keyframes pair-jig {
    30% {
      transform: scale(1.1) rotate(-4deg);
    }
    60% {
      transform: scale(1.04) rotate(3deg);
    }
  }
  @keyframes stamp-slam {
    0% {
      transform: scale(1.7) rotate(-14deg);
      opacity: 0.2;
    }
    60% {
      transform: scale(0.92) rotate(2deg);
      opacity: 1;
    }
    100% {
      transform: none;
    }
  }
}
/* A staff member with a placement stands behind their counter in the room art. */
.scene-staff {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
}
.scene-staff img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  transform: translateY(7%);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 4px 4px #47301e33);
}
@media (prefers-reduced-motion: no-preference) {
  .clue .scene-staff img {
    animation:
      staff-rise 0.75s cubic-bezier(0.2, 1.25, 0.4, 1) 0.2s backwards,
      staff-wave 1.25s ease-in-out 1s;
  }
  @keyframes staff-rise {
    from {
      transform: translateY(105%);
    }
  }
  @keyframes staff-wave {
    0%,
    100% {
      transform: translateY(7%);
    }
    20% {
      transform: translateY(7%) rotate(-6deg);
    }
    45% {
      transform: translateY(7%) rotate(7deg);
    }
    70% {
      transform: translateY(7%) rotate(-4deg);
    }
  }
}