*,
:before,
:after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  min-height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.03);
  }
  20% {
    transform: scale(1.01);
  }
  30% {
    transform: scale(1.04);
  }
  40% {
    transform: scale(1.03);
  }
  to {
    transform: scale(1);
  }
}
body {
  position: relative;
  flex-direction: column;
  background-image: url(./bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#cursor {
  position: absolute;
  width: 15vw;
  aspect-ratio: 350/260;
  background-image: url(./cursor.png);
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  transform: translate(-20%, -40%);
  transition: transform 0.2s;
  z-index: 10;
  display: none;
}
#cursor.hover {
  background-image: url(./cursor-active.gif);
  transform: translate(-20%, -40%) rotate(-15deg);
}
.blur {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.wrapper {
  position: relative;
  width: 100%;
  background: inherit;
  padding-top: 5vh;
  padding-left: 6vw;
  padding-right: 5vw;
  padding-bottom: 7.5vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.label {
  display: block !important;
  width: 50vw;
  max-height: 15vh;
  -o-object-fit: contain;
  object-fit: contain;
  animation: pulse linear 1.7s infinite;
}
@media screen and (min-aspect-ratio: 21.5/9) {
  .label {
    position: absolute;
    max-height: unset;
    top: 5vh;
  }
}
.list {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.list .item {
  position: relative;
  cursor: pointer;
}
.list .item .item__animation {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40vw;
  transform: translate(-50%, -50%);
  aspect-ratio: 744/745;
  background-size: cover;
  background-position: 0 center;
  background-repeat: no-repeat;
  animation: sprite-animation 2s steps(60) infinite;
  animation-play-state: paused;
}
.list .item .item__animation:hover {
  animation-play-state: running;
}
.list .item .item__animation.reset {
  animation: none;
  background-position: 0 center;
}
.list .item:nth-child(1) {
  width: 19vw;
  aspect-ratio: 3/5;
  margin-right: auto;
}
.list .item:nth-child(1) .item__animation {
  background-image: url(./1_sprite.png);
}
.list .item:nth-child(2) {
  width: 28vw;
  aspect-ratio: 6/7;
}
.list .item:nth-child(2) .item__animation {
  background-image: url(./2_sprite.png);
}
.list .item:nth-child(3) {
  width: 33vw;
  aspect-ratio: 1/1;
}
.list .item:nth-child(3) .item__animation {
  background-image: url(./3_sprite.png);
}

@keyframes sprite-animation {
  from {
    background-position: 0 center;
  }
  to {
    background-position: -2400vw center;
  }
}

/* @keyframes sprite-animation {
  0% {
    background-position: 0vw center;
  }
  1.6666666667% {
    background-position: -40vw center;
  }
  3.3333333333% {
    background-position: -80vw center;
  }
  5% {
    background-position: -120vw center;
  }
  6.6666666667% {
    background-position: -160vw center;
  }
  8.3333333333% {
    background-position: -200vw center;
  }
  10% {
    background-position: -240vw center;
  }
  11.6666666667% {
    background-position: -280vw center;
  }
  13.3333333333% {
    background-position: -320vw center;
  }
  15% {
    background-position: -360vw center;
  }
  16.6666666667% {
    background-position: -400vw center;
  }
  18.3333333333% {
    background-position: -440vw center;
  }
  20% {
    background-position: -480vw center;
  }
  21.6666666667% {
    background-position: -520vw center;
  }
  23.3333333333% {
    background-position: -560vw center;
  }
  25% {
    background-position: -600vw center;
  }
  26.6666666667% {
    background-position: -640vw center;
  }
  28.3333333333% {
    background-position: -680vw center;
  }
  30% {
    background-position: -720vw center;
  }
  31.6666666667% {
    background-position: -760vw center;
  }
  33.3333333333% {
    background-position: -800vw center;
  }
  35% {
    background-position: -840vw center;
  }
  36.6666666667% {
    background-position: -880vw center;
  }
  38.3333333333% {
    background-position: -920vw center;
  }
  40% {
    background-position: -960vw center;
  }
  41.6666666667% {
    background-position: -1000vw center;
  }
  43.3333333333% {
    background-position: -1040vw center;
  }
  45% {
    background-position: -1080vw center;
  }
  46.6666666667% {
    background-position: -1120vw center;
  }
  48.3333333333% {
    background-position: -1160vw center;
  }
  50% {
    background-position: -1200vw center;
  }
  51.6666666667% {
    background-position: -1240vw center;
  }
  53.3333333333% {
    background-position: -1280vw center;
  }
  55% {
    background-position: -1320vw center;
  }
  56.6666666667% {
    background-position: -1360vw center;
  }
  58.3333333333% {
    background-position: -1400vw center;
  }
  60% {
    background-position: -1440vw center;
  }
  61.6666666667% {
    background-position: -1480vw center;
  }
  63.3333333333% {
    background-position: -1520vw center;
  }
  65% {
    background-position: -1560vw center;
  }
  66.6666666667% {
    background-position: -1600vw center;
  }
  68.3333333333% {
    background-position: -1640vw center;
  }
  70% {
    background-position: -1680vw center;
  }
  71.6666666667% {
    background-position: -1720vw center;
  }
  73.3333333333% {
    background-position: -1760vw center;
  }
  75% {
    background-position: -1800vw center;
  }
  76.6666666667% {
    background-position: -1840vw center;
  }
  78.3333333333% {
    background-position: -1880vw center;
  }
  80% {
    background-position: -1920vw center;
  }
  81.6666666667% {
    background-position: -1960vw center;
  }
  83.3333333333% {
    background-position: -2000vw center;
  }
  85% {
    background-position: -2040vw center;
  }
  86.6666666667% {
    background-position: -2080vw center;
  }
  88.3333333333% {
    background-position: -2120vw center;
  }
  90% {
    background-position: -2160vw center;
  }
  91.6666666667% {
    background-position: -2200vw center;
  }
  93.3333333333% {
    background-position: -2240vw center;
  }
  95% {
    background-position: -2280vw center;
  }
  96.6666666667% {
    background-position: -2320vw center;
  }
  98.3333333333% {
    background-position: -2360vw center;
  }
  to {
    background-position: -2400vw center;
  }
} */