/* The About artwork is an isolated transparent asset, not a boxed image. */
.studio-label { align-self: center; }
.studio-label::after { content: none; }
.studio-object {
  position: relative;
  width: min(100%, 430px);
  aspect-ratio: 1;
  margin: 22px auto 0;
  isolation: isolate;
  pointer-events: none;
}
.studio-object::before {
  content: "";
  position: absolute;
  inset: 17%;
  z-index: -1;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--lime) 3%, transparent), transparent 68%);
}
.studio-object img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .86;
  transform-origin: 50% 55%;
  animation: studio-levitate 8s cubic-bezier(.45, 0, .55, 1) infinite;
  animation-play-state: paused;
}
.studio-object-shadow {
  position: absolute;
  inset: auto 27% 8%;
  height: 5%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--lime) 8%, transparent), transparent 70%);
  animation: studio-shadow-breathe 8s cubic-bezier(.45, 0, .55, 1) infinite;
  animation-play-state: paused;
}
.studio.ambient-active .studio-object img,
.studio.ambient-active .studio-object-shadow { animation-play-state: running; }
html.page-hidden .studio-object img,
html.page-hidden .studio-object-shadow { animation-play-state: paused; }
@keyframes studio-levitate {
  0%, 100% { transform: translate3d(0, 5px, 0) rotate(-3deg); }
  50% { transform: translate3d(0, -14px, 0) rotate(3deg); }
}
@keyframes studio-shadow-breathe {
  0%, 100% { transform: scaleX(1); opacity: .55; }
  50% { transform: scaleX(.78); opacity: .25; }
}
@media (max-width: 900px), (hover: none), (pointer: coarse) {
  .studio-object img, .studio-object-shadow { animation: none; }
}
@media (max-width: 700px) {
  .studio-label { display: block; }
  .studio-object { width: min(85%, 320px); margin-top: 12px; margin-bottom: -12px; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-object img, .studio-object-shadow { animation: none; transform: none; }
}