*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}

.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  will-change: transform;
  pointer-events: none;
}

.photo {
  width: min(42vw, 380px);
  height: auto;
  max-height: 48vh;
  object-fit: contain;
  object-position: center;
  transform-origin: 50% 40%;
  will-change: transform;
  animation: weirdChaos 7.5s linear infinite;
  user-select: none;
  pointer-events: none;
}

@keyframes weirdChaos {
  0% {
    transform: scale(1) rotate(0deg) translate3d(0, 0, 0) skewX(0deg) skewY(0deg);
  }
  12% {
    transform: scale(1.12) rotate(28deg) translate3d(-6%, 4%, 0) skewX(-8deg) skewY(4deg);
  }
  25% {
    transform: scale(0.9) rotate(-36deg) translate3d(8%, -5%, 0) skewX(10deg) skewY(-6deg);
  }
  38% {
    transform: scale(1.18) rotate(74deg) translate3d(-3%, 7%, 0) skewX(-4deg) skewY(8deg);
  }
  50% {
    transform: scale(1) rotate(180deg) translate3d(5%, -2%, 0) skewX(6deg) skewY(-3deg);
  }
  62% {
    transform: scale(1.15) rotate(240deg) translate3d(-7%, -6%, 0) skewX(-12deg) skewY(5deg);
  }
  75% {
    transform: scale(0.88) rotate(300deg) translate3d(6%, 5%, 0) skewX(9deg) skewY(-7deg);
  }
  88% {
    transform: scale(1.1) rotate(340deg) translate3d(-4%, -3%, 0) skewX(-5deg) skewY(3deg);
  }
  100% {
    transform: scale(1) rotate(360deg) translate3d(0, 0, 0) skewX(0deg) skewY(0deg);
  }
}

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