c-about#estudio {
  isolation: isolate;
  overflow: visible;
}

.studio-objects {
  position: absolute;
  z-index: 12;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.studio-object {
  --object-tilt: 0deg;
  --reveal-x: 0;
  --reveal-y: 1.5rem;
  --reveal-rotate: 0deg;
  --reveal-delay: 0ms;
  position: absolute;
  margin: 0;
  opacity: 0.98;
  filter:
    drop-shadow(0 0.35rem 0.55rem rgb(38 22 15 / 18%))
    drop-shadow(0 1.7rem 2.4rem rgb(38 22 15 / 14%));
  transform: translate3d(0, 0, 0) rotate(var(--object-tilt));
  transform-origin: center;
}

.studio-object::after {
  position: absolute;
  z-index: -1;
  right: 7%;
  bottom: -12%;
  left: 7%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgb(38 22 15 / 13%) 0%, transparent 72%);
  content: '';
  opacity: 0.72;
  transform: scale3d(0.92, 0.8, 1);
}

.studio-object__visual,
.studio-object img {
  display: block;
  width: 100%;
  height: auto;
}

.studio-object img {
  object-fit: contain;
}

.studio-objects[data-motion-ready='true'] .studio-object {
  opacity: 0;
  filter:
    drop-shadow(0 0.15rem 0.3rem rgb(38 22 15 / 8%))
    drop-shadow(0 0.8rem 1.3rem rgb(38 22 15 / 8%));
  transform:
    translate3d(var(--reveal-x), var(--reveal-y), 0)
    rotate(var(--object-tilt))
    rotate(var(--reveal-rotate))
    scale(0.9);
  transition:
    opacity 720ms cubic-bezier(0.23, 1, 0.32, 1) var(--reveal-delay),
    filter 1100ms cubic-bezier(0.23, 1, 0.32, 1) var(--reveal-delay),
    transform 1180ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay);
  will-change: transform, opacity;
}

.studio-objects[data-motion-ready='true'] .studio-object.is-revealed {
  opacity: 0.98;
  filter:
    drop-shadow(0 0.35rem 0.55rem rgb(38 22 15 / 18%))
    drop-shadow(0 1.7rem 2.4rem rgb(38 22 15 / 14%));
  transform: translate3d(0, 0, 0) rotate(var(--object-tilt)) scale(1);
}

.studio-object.is-revealed .studio-object__visual {
  animation: studio-object-settle 1450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--reveal-delay) + 520ms) both;
}

.studio-object--camera {
  --object-tilt: -6deg;
  --reveal-x: 2.1rem;
  --reveal-y: 2.2rem;
  --reveal-rotate: 5deg;
  top: 30%;
  right: 5%;
  width: clamp(10.5rem, 10.5vw, 15rem);
}

.studio-object--phone {
  --object-tilt: 5deg;
  --reveal-x: 1.2rem;
  --reveal-y: -1.6rem;
  --reveal-rotate: -6deg;
  top: 14%;
  right: 16%;
  width: clamp(5rem, 5.3vw, 7.5rem);
}

.studio-object--notebook {
  --object-tilt: -2deg;
  --reveal-x: -2.4rem;
  --reveal-y: 1.8rem;
  --reveal-rotate: 4deg;
  bottom: 4%;
  left: 7%;
  width: clamp(14rem, 13.5vw, 19rem);
}

@keyframes studio-object-settle {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  38% {
    transform: translate3d(0, -0.32rem, 0) rotate(0.45deg);
  }

  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .studio-object--camera {
    top: 30%;
    right: 4%;
    width: 14%;
  }

  .studio-object--phone {
    top: 14%;
    right: 14%;
    width: 7%;
  }

  .studio-object--notebook {
    left: 6%;
    width: 18%;
  }
}

@media (max-width: 767px) {
  .studio-object {
    filter:
      drop-shadow(0 0.25rem 0.45rem rgb(38 22 15 / 18%))
      drop-shadow(0 1rem 1.45rem rgb(38 22 15 / 15%));
  }

  .studio-object--camera {
    --object-tilt: -8deg;
    top: 20%;
    left: -1%;
    width: 21%;
  }

  .studio-object--phone {
    --object-tilt: 7deg;
    top: 34%;
    right: -0.5%;
    width: 11.5%;
  }

  .studio-object--notebook {
    --object-tilt: -3deg;
    top: 45.3%;
    right: 2%;
    bottom: auto;
    left: auto;
    width: 28.5%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio-objects[data-motion-ready='true'] .studio-object,
  .studio-objects[data-motion-ready='true'] .studio-object.is-revealed {
    opacity: 0.98;
    transition: none;
    transform: rotate(var(--object-tilt));
    will-change: auto;
  }

  .studio-object.is-revealed .studio-object__visual {
    animation: none;
  }
}