.hero-real-frame.hero-cover-3d {
  --cover-rotate-x: 0deg;
  --cover-rotate-y: 0deg;
  --cover-scale: 1;
  --shine-x: 50%;
  --shine-y: 50%;
  position: relative;
  transform: none;
  transform-style: preserve-3d;
  transition: transform 360ms cubic-bezier(.2,.75,.25,1), box-shadow 360ms ease, border-color 360ms ease;
  box-shadow: 0 22px 64px #0009, 0 0 0 1px #37d9ee18;
}

.hero-real-frame.hero-cover-3d img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  image-rendering: auto;
}

.hero-real-frame.hero-cover-3d::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  aspect-ratio: 886 / 545;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at var(--shine-x) var(--shine-y), #4cecff20 0, #4cecff08 24%, transparent 58%);
  transform: none;
  transition: opacity 300ms ease;
}

.hero-real-frame.hero-cover-3d figcaption {
  position: relative;
  z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
  .hero-real-frame.hero-cover-3d:hover {
    --cover-scale: 1.008;
    border-color: #24cfe4a0;
    box-shadow: 0 30px 76px #000b, 0 0 34px #13bfd51c;
  }

  .hero-real-frame.hero-cover-3d:hover::after { opacity: 1; }

  .hero-real-frame.hero-cover-3d[data-tilting="true"] {
    transform: perspective(1800px) rotateX(var(--cover-rotate-x)) rotateY(var(--cover-rotate-y));
  }
}

@media (max-width: 900px) {
  .hero-real-frame.hero-cover-3d { --cover-rotate-y: 0deg; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-real-frame.hero-cover-3d {
    transform: none;
    transition: none;
  }
  .hero-real-frame.hero-cover-3d::after { transition: none; }
}