.artwork-wrap {
  width: min(100%, 1200px);
  margin: 1em auto 0;
}

.psd-artwork {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 665;
  overflow: hidden;
}

.psd-artwork img {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
  user-select: none;
  pointer-events: none;
}

@media (max-width: 767px) {
  body {
    padding: 12px;
  }
}

.layer-01 {
  left: 63.916667%;
  top: 3.609023%;
  width: 30.25%;
  z-index: 1;
}

.layer-02 {
  left: 2.166667%;
  top: 13.233083%;
  width: 76.0%;
  z-index: 2;
}

.layer-03 {
  left: 71.25%;
  top: 25.263158%;
  width: 25.333333%;
  z-index: 3;
}

.layer-04 {
  left: 5.75%;
  top: 71.879699%;
  width: 8.333333%;
  z-index: 4;
}

.layer-05 {
  left: 16.25%;
  top: 70.37594%;
  width: 7.166667%;
  z-index: 5;
}

.layer-06 {
  left: 20.583333%;
  top: 73.082707%;
  width: 7.833333%;
  z-index: 6;
}

.layer-07 {
  left: 14.333333%;
  top: 73.533835%;
  width: 7.666667%;
  z-index: 7;
}

.layer-08 {
  left: 9.833333%;
  top: 75.037594%;
  width: 8.333333%;
  z-index: 8;
}

.layer-09 {
  left: 74.083333%;
  top: 75.789474%;
  width: 4.666667%;
  z-index: 9;
}

.layer-10 {
  left: 76.083333%;
  top: 72.180451%;
  width: 6.166667%;
  z-index: 10;
}

.layer-11 {
  left: 82.25%;
  top: 72.481203%;
  width: 3.833333%;
  z-index: 11;
}

.layer-12 {
  left: 85.0%;
  top: 75.789474%;
  width: 5.5%;
  z-index: 12;
}

.layer-13 {
  left: 79.0%;
  top: 78.195489%;
  width: 5.0%;
  z-index: 13;
}

.layer-14 {
  left: 22.25%;
  top: 30.676692%;
  width: 54.666667%;
  z-index: 14;
}

.layer-15 {
  left: 53.0%;
  top: 60.75188%;
  width: 7.916667%;
  z-index: 15;
}

.layer-16 {
  left: 46.083333%;
  top: 60.150376%;
  width: 7.833333%;
  z-index: 16;
}

.layer-17 {
  left: 39.333333%;
  top: 60.601504%;
  width: 7.666667%;
  z-index: 17;
}

.layer-18 {
  left: 32.166667%;
  top: 60.451128%;
  width: 8.083333%;
  z-index: 18;
}

.layer-19 {
  left: 25.166667%;
  top: 60.902256%;
  width: 7.666667%;
  z-index: 19;
}

.layer-20 {
  left: 66.75%;
  top: 60.451128%;
  width: 8.25%;
  z-index: 20;
}

.layer-21 {
  left: 60.083333%;
  top: 60.75188%;
  width: 7.666667%;
  z-index: 21;
}

.layer-22 {
  left: 29.25%;
  top: 79.398496%;
  width: 41.75%;
  z-index: 22;
}


/* animation */
.psd-artwork {
  isolation: isolate;
}

.layer {
  will-change: transform;
  backface-visibility: hidden;
}

.layer-01,
.layer-02,
.layer-03,
.layer-04,
.layer-05,
.layer-06,
.layer-07,
.layer-08,
.layer-09,
.layer-10,
.layer-11,
.layer-12,
.layer-13 {
  transform-origin: 50% 82%;
}

.layer-15,
.layer-16,
.layer-17,
.layer-18,
.layer-19,
.layer-20,
.layer-21 {
  transform-origin: 50% 10%;
}

.layer-01 {
  animation: yagura-taiko 0.85s ease-in-out infinite;
}

.layer-02 {
  animation: reni-samba 3.6s ease-in-out infinite;
}

.layer-03 {
  animation: reni-yukata 4.2s ease-in-out infinite;
}

.layer-15 {
  animation: chochin-swing-a 1.5s ease-in-out infinite;
}

.layer-16 {
  animation: chochin-swing-b 1.8s ease-in-out -0.35s infinite;
}

.layer-17 {
  animation: chochin-swing-a 1.65s ease-in-out -0.8s infinite;
}

.layer-18 {
  animation: chochin-swing-b 1.4s ease-in-out -0.5s infinite;
}

.layer-19 {
  animation: chochin-swing-a 1.75s ease-in-out -0.25s infinite;
}

.layer-20 {
  animation: chochin-swing-b 1.55s ease-in-out -0.95s infinite;
}

.layer-21 {
  animation: chochin-swing-a 1.68s ease-in-out -0.6s infinite;
}

.samba-step-1 { animation: samba-step-1 var(--motion-duration, 0.7s) ease-in-out 1 both; }
.samba-step-2 { animation: samba-step-2 var(--motion-duration, 0.7s) ease-in-out 1 both; }
.samba-step-3 { animation: samba-step-3 var(--motion-duration, 0.7s) ease-in-out 1 both; }
.samba-step-4 { animation: samba-step-4 var(--motion-duration, 0.7s) ease-in-out 1 both; }
.samba-step-5 { animation: samba-step-5 var(--motion-duration, 0.7s) ease-in-out 1 both; }

.yukata-step-1 { animation: yukata-step-1 var(--motion-duration, 1.5s) ease-in-out 1 both; }
.yukata-step-2 { animation: yukata-step-2 var(--motion-duration, 1.5s) ease-in-out 1 both; }
.yukata-step-3 { animation: yukata-step-3 var(--motion-duration, 1.5s) ease-in-out 1 both; }
.yukata-step-4 { animation: yukata-step-4 var(--motion-duration, 1.5s) ease-in-out 1 both; }
.yukata-step-5 { animation: yukata-step-5 var(--motion-duration, 1.5s) ease-in-out 1 both; }

@keyframes yagura-taiko {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1, 1); }
  25% { transform: translate3d(0, -0.35%, 0) scale(1.01, 1.03); }
  50% { transform: translate3d(0, 0.45%, 0) scale(0.992, 0.97); }
  75% { transform: translate3d(0, -0.25%, 0) scale(1.006, 1.02); }
}

@keyframes reni-samba {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  20% { transform: translate3d(-0.5%, -0.8%, 0) rotate(-2.2deg) scale(1.01); }
  40% { transform: translate3d(0.45%, 0.1%, 0) rotate(1.8deg) scale(0.995); }
  60% { transform: translate3d(-0.3%, -0.4%, 0) rotate(-1.5deg) scale(1.01); }
  80% { transform: translate3d(0.6%, -0.2%, 0) rotate(2.3deg) scale(1.005); }
}

@keyframes reni-yukata {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  20% { transform: translate3d(-0.35%, -0.4%, 0) rotate(-1.2deg) scale(1.005); }
  40% { transform: translate3d(0.45%, 0.2%, 0) rotate(1.5deg) scale(0.998); }
  60% { transform: translate3d(-0.25%, -0.25%, 0) rotate(-1.4deg) scale(1.004); }
  80% { transform: translate3d(0.35%, 0.1%, 0) rotate(1.2deg) scale(1.002); }
}

@keyframes samba-step-1 {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  25% { transform: translate3d(-0.8%, -0.6%, 0) rotate(-4deg) scale(1.02); }
  50% { transform: translate3d(0.7%, 0.1%, 0) rotate(3deg) scale(0.98); }
  75% { transform: translate3d(-0.35%, -0.2%, 0) rotate(-2deg) scale(1.01); }
}

@keyframes samba-step-2 {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  20% { transform: translate3d(0.9%, -0.7%, 0) rotate(4deg) scale(1.02); }
  50% { transform: translate3d(-0.8%, 0.2%, 0) rotate(-3deg) scale(0.99); }
  80% { transform: translate3d(0.4%, -0.15%, 0) rotate(2deg) scale(1.01); }
}

@keyframes samba-step-3 {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  30% { transform: translate3d(-0.4%, -0.8%, 0) rotate(-2.5deg) scale(1.03); }
  60% { transform: translate3d(0.45%, 0.3%, 0) rotate(2.5deg) scale(0.97); }
  85% { transform: translate3d(-0.2%, -0.15%, 0) rotate(-1.5deg) scale(1.01); }
}

@keyframes samba-step-4 {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  20% { transform: translate3d(-0.9%, 0.1%, 0) rotate(-4.5deg) scale(0.99); }
  45% { transform: translate3d(0.95%, -0.75%, 0) rotate(4.5deg) scale(1.03); }
  70% { transform: translate3d(-0.45%, -0.15%, 0) rotate(-2deg) scale(1.01); }
}

@keyframes samba-step-5 {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  18% { transform: translate3d(0.35%, -0.7%, 0) rotate(3deg) scale(1.02); }
  50% { transform: translate3d(-0.7%, 0.25%, 0) rotate(-4deg) scale(0.98); }
  78% { transform: translate3d(0.7%, -0.2%, 0) rotate(2.5deg) scale(1.01); }
}

@keyframes yukata-step-1 {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  30% { transform: translate3d(-0.45%, -0.25%, 0) rotate(-2deg) scale(1.01); }
  65% { transform: translate3d(0.55%, 0.15%, 0) rotate(1.7deg) scale(0.995); }
}

@keyframes yukata-step-2 {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  25% { transform: translate3d(0.45%, -0.2%, 0) rotate(1.8deg) scale(1.005); }
  55% { transform: translate3d(-0.55%, 0.18%, 0) rotate(-1.9deg) scale(1); }
  80% { transform: translate3d(0.25%, -0.12%, 0) rotate(0.8deg) scale(1.003); }
}

@keyframes yukata-step-3 {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  20% { transform: translate3d(-0.2%, -0.4%, 0) rotate(-1deg) scale(1.008); }
  50% { transform: translate3d(0.2%, 0.1%, 0) rotate(1.2deg) scale(0.998); }
  78% { transform: translate3d(-0.4%, -0.15%, 0) rotate(-1.6deg) scale(1.004); }
}

@keyframes yukata-step-4 {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  28% { transform: translate3d(0.6%, -0.15%, 0) rotate(2deg) scale(1.005); }
  58% { transform: translate3d(-0.45%, 0.2%, 0) rotate(-1.4deg) scale(0.998); }
}

@keyframes yukata-step-5 {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  24% { transform: translate3d(-0.55%, -0.18%, 0) rotate(-1.9deg) scale(1.007); }
  50% { transform: translate3d(0.3%, 0.08%, 0) rotate(1deg) scale(1); }
  76% { transform: translate3d(0.55%, -0.15%, 0) rotate(1.8deg) scale(1.004); }
}

@keyframes chochin-swing-a {
  0%, 100% { transform: rotate(-1deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(-6deg); }
  75% { transform: rotate(4deg); }
}

@keyframes chochin-swing-b {
  0%, 100% { transform: rotate(1deg); }
  20% { transform: rotate(-4deg); }
  50% { transform: rotate(6deg); }
  80% { transform: rotate(-5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .layer {
    animation: none !important;
  }
}