.hero__plate--mockup {
  perspective: 1200px;
}

.hero__plate--mockup .hero__plate-btn {
  aspect-ratio: 4 / 5;
  background:
    linear-gradient(145deg, #fff8e7 0%, #b4862c 10%, #f4e1a7 18%, #8a641f 30%, #e4c778 43%, #fff5d7 52%, #a67a29 69%, #f3dfaa 83%, #70501c 100%);
  border: 1px solid #fff3cf;
  border-radius: 13px;
  box-shadow:
    0 28px 60px #10192b2e,
    0 12px 20px #10192b20,
    inset 0 1px 1px #fff9e8;
  overflow: visible;
  padding: 12px;
  position: relative;
  transform:
    perspective(1100px)
    rotateX(var(--mockup-rotate-x, 0deg))
    rotateY(var(--mockup-rotate-y, 0deg))
    translate3d(var(--mockup-shift-x, 0px), var(--mockup-shift-y, 0px), 0);
  transform-style: preserve-3d;
  transition:
    transform 550ms cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 550ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}

.hero__plate--mockup .hero__plate-btn::before {
  border: 1px solid #fff9e7a8;
  border-radius: 5px;
  content: "";
  inset: 6px;
  pointer-events: none;
  position: absolute;
  transform: translateZ(3px);
  z-index: 2;
}

.hero__plate--mockup .hero__plate-btn::after {
  background: radial-gradient(
    circle at var(--mockup-glint-x, 50%) var(--mockup-glint-y, 50%),
    #ffffff73 0,
    #ffffff1f 18%,
    transparent 42%
  );
  border-radius: 4px;
  content: "";
  inset: 12px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateZ(5px);
  transition: opacity 300ms ease;
  z-index: 1;
}

.hero__plate--mockup .hero__plate-btn:hover {
  box-shadow:
    0 38px 74px #10192b38,
    0 16px 26px #10192b26,
    inset 0 1px 1px #fff9e8;
}

.hero__plate--mockup .hero__plate-btn:hover::after {
  opacity: 1;
}

.hero__plate--mockup .hero__plate-btn img {
  aspect-ratio: auto;
  border-radius: 4px;
  height: 100%;
  object-fit: cover;
  transform: translateZ(2px) scale(1.005);
  transition: transform 650ms cubic-bezier(0.2, 0.7, 0.2, 1);
  width: 100%;
}

.hero__plate--mockup .hero__plate-btn:hover img {
  transform: translateZ(9px) scale(1.02);
}

@media (hover: none), (pointer: coarse) {
  .hero__plate--mockup .hero__plate-btn {
    transform: none;
    will-change: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__plate--mockup .hero__plate-btn,
  .hero__plate--mockup .hero__plate-btn img,
  .hero__plate--mockup .hero__plate-btn::after {
    transition-duration: 0.01ms;
  }
}