/* Articulated painted characters. These decorative loops never move the text. */
.animal-puppet {
  aspect-ratio: 2 / 3;
}
.animal-puppet[data-animal="leopard"] {
  position: relative;
  aspect-ratio: 3 / 2;
}
.animal-puppet > .puppet-original {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
}
.animal-puppet > .puppet-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.puppet-art {
  display: none;
  overflow: visible;
}
.puppet-ready > .puppet-original {
  visibility: hidden;
}
.puppet-ready > .puppet-art,
.person-ready > .puppet-art {
  display: block;
}
.painted-part {
  transform-box: view-box;
}
.leopard-tail {
  animation: leopard-tail 4.8s ease-in-out infinite;
}
.leopard-body {
  animation: leopard-breathe 5.5s ease-in-out infinite;
}
.leopard-right .leopard-tail {
  animation-delay: -2.1s;
}
.leopard-right .leopard-body {
  animation-delay: -3s;
}
.peacock-train {
  animation: peacock-feathers 4.4s ease-in-out infinite;
}
.peacock-dance {
  animation: peacock-dance 4.4s ease-in-out infinite;
}
.peacock-right .painted-part,
.door-right .painted-part {
  animation-delay: -2.2s;
}
.person-ready > .person-original {
  visibility: hidden;
}
.person-ready > .puppet-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.wardrobe-dinner .character-man > .puppet-art {
  transform: scaleX(-1);
}
.wardrobe-section .person-dancer {
  animation: dancer-step 3.4s ease-in-out infinite;
}
.dancer-skirt {
  animation: skirt-turn 3.4s ease-in-out infinite;
}
.drummer-hand {
  animation: drum-beat 0.95s ease-in-out infinite;
}
.tabla-hand {
  animation: tabla-beat 0.72s ease-in-out infinite;
}
.second-hand {
  animation-delay: -0.38s;
}
.musician-breath {
  animation: musician-breathe 4s ease-in-out infinite;
}
.gentleman-bow {
  animation: gentleman-greeting 8s ease-in-out infinite;
}
.wardrobe-section .person-gentleman {
  animation: wardrobe-sway 8s ease-in-out infinite;
}
.letter-monogram {
  animation: monogram-breathe 7s ease-in-out infinite;
  transform-origin: center;
}
[data-living]:not(.is-in-view) .painted-part,
[data-living]:not(.is-in-view) .letter-monogram,
body.page-hidden .painted-part,
body.page-hidden .letter-monogram,
body:has(dialog[open]) main .painted-part,
body:has(dialog[open]) main .letter-monogram {
  animation-play-state: paused;
}
body.motion-paused .puppet-art {
  display: none;
}
body.motion-paused .puppet-original,
body.motion-paused .person-original {
  visibility: visible;
}
@keyframes leopard-tail {
  0%,
  100% {
    transform: rotate(-4deg);
  }
  42% {
    transform: rotate(7deg);
  }
  67% {
    transform: rotate(2deg);
  }
}
@keyframes leopard-breathe {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.012);
  }
}
@keyframes peacock-feathers {
  0%,
  100% {
    transform: rotate(-1.8deg) skewX(-0.6deg);
  }
  35% {
    transform: rotate(2.4deg) skewX(0.6deg);
  }
  65% {
    transform: rotate(0.4deg);
  }
}
@keyframes peacock-dance {
  0%,
  100% {
    transform: rotate(-1.6deg);
  }
  35% {
    transform: rotate(2deg) scaleY(0.995);
  }
  65% {
    transform: rotate(-0.6deg) scaleY(1.008);
  }
}
@keyframes dancer-step {
  0%,
  100% {
    transform: rotate(-2deg) translateX(-2px);
  }
  50% {
    transform: rotate(2.5deg) translateX(3px);
  }
}
@keyframes skirt-turn {
  0%,
  100% {
    transform: rotate(2deg) skewX(1.3deg);
  }
  50% {
    transform: rotate(-2.5deg) skewX(-1.3deg);
  }
}
@keyframes drum-beat {
  0%,
  55%,
  100% {
    transform: rotate(0);
  }
  28% {
    transform: rotate(-5deg) translateY(-3px);
  }
}
@keyframes tabla-beat {
  0%,
  60%,
  100% {
    transform: rotate(0);
  }
  30% {
    transform: rotate(-4deg) translateY(-4px);
  }
}
@keyframes musician-breathe {
  0%,
  100% {
    transform: rotate(-1deg);
  }
  50% {
    transform: rotate(1.6deg);
  }
}
@keyframes gentleman-greeting {
  0%,
  65%,
  100% {
    transform: rotate(0);
  }
  79% {
    transform: rotate(3deg);
  }
}
@keyframes monogram-breathe {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}
@media (max-width: 1100px) {
  .letter-garden .animal-puppet {
    position: relative;
  }
}
@media (prefers-reduced-motion: reduce) {
  .puppet-art {
    display: none !important;
  }
  .puppet-original,
  .person-original {
    visibility: visible !important;
  }
}