.artwork {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: #0d0f10;
}

.artwork__frame {
  position: absolute;
  inset: -16px;
  transform: translate3d(0, 0, 0);
  transform-origin: 76% 58%;
  will-change: transform;
}

.artwork__still,
.artwork__scene {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.artwork__scene { visibility: hidden; }
.artwork[data-ready] .artwork__scene { visibility: visible; }
.artwork[data-ready] .artwork__still { visibility: hidden; }

.artwork__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(9, 11, 12, .92), transparent 18%),
    linear-gradient(90deg, rgba(9, 11, 12, .9), rgba(9, 11, 12, .5) 34%, transparent 68%),
    linear-gradient(180deg, rgba(9, 11, 12, .12), transparent 55%);
}

.motion-toggle {
  position: absolute;
  right: clamp(28px, 6.25vw, 120px);
  bottom: 21px;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 0 8px 10px;
  border: 0;
  background: transparent;
  color: rgba(247, 246, 243, .6);
  font: 11px 'Archivo', sans-serif;
  letter-spacing: .025em;
  cursor: pointer;
  transition: color 180ms ease;
}

.motion-toggle:hover { color: #f7f6f3; }
.motion-toggle:focus-visible { outline: 2px solid #e4703f; outline-offset: 5px; }
.motion-toggle__play { display: none; }
.motion-toggle[data-paused] .motion-toggle__pause { display: none; }
.motion-toggle[data-paused] .motion-toggle__play { display: block; }

@media (max-width: 48rem) {
  .artwork__frame {
    inset: auto;
    width: 960px;
    height: 640px;
    bottom: 180px;
    left: calc(50% - 600px);
    transform-origin: 64% 64%;
  }

  .artwork__shade {
    background:
      linear-gradient(0deg, #0d0f10 10%, rgba(9, 11, 12, .92) 19%, transparent 38%),
      linear-gradient(180deg, #0d0f10 20%, rgba(13, 15, 16, .97) 30%, rgba(13, 15, 16, .5) 48%, transparent 72%),
      linear-gradient(90deg, rgba(9, 11, 12, .25), transparent 65%);
  }

  .motion-toggle { bottom: 18px; font-size: 10px; gap: 7px; }
}

@media (max-width: 360px) {
  .motion-toggle { bottom: 53px; }
}

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