.hero-visual {
  position: relative;
  min-height: 470px;
  perspective: 1500px;
  perspective-origin: 48% 42%;
}

.hero-3d {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background:
    radial-gradient(circle at 24% 22%, rgb(255 255 255 / 78%), transparent 26%),
    radial-gradient(circle at 78% 72%, rgb(194 122 24 / 20%), transparent 34%),
    linear-gradient(145deg, #fbf3e5, #eadac4 68%, #d7c4aa);
  box-shadow:
    0 38px 100px rgb(54 43 28 / 24%),
    inset 0 1px 0 rgb(255 255 255 / 62%),
    inset 0 -28px 80px rgb(54 43 28 / 10%);
  transform: rotateX(var(--scene-tilt-y, 0deg)) rotateY(var(--scene-tilt-x, 0deg));
  transform-style: preserve-3d;
  transition: transform 120ms linear;
}

.hero-3d::before,
.hero-3d::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.hero-3d::before {
  background:
    linear-gradient(rgb(54 43 28 / 7%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(54 43 28 / 7%) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 52% 50%, black 0 48%, transparent 74%);
}

.hero-3d::after {
  background: radial-gradient(circle at 50% 48%, transparent 0 48%, rgb(54 43 28 / 16%) 88%);
}

.depth-halo,
.depth-plane,
.depth-card,
.depth-core {
  position: absolute;
  display: block;
  transform-style: preserve-3d;
  transition: transform 90ms linear;
  will-change: transform;
}

.depth-halo {
  inset: 12% 16%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgb(255 255 255 / 46%), transparent 58%),
    radial-gradient(circle at 62% 58%, rgb(194 122 24 / 18%), transparent 42%);
  filter: blur(4px);
  transform: translate3d(
    calc(var(--depth-pointer-x, 0px) * .35),
    calc(var(--depth-offset, 0px) + (var(--depth-pointer-y, 0px) * .35)),
    -170px
  );
}

.depth-plane {
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  background-image:
    linear-gradient(rgb(24 21 16 / 10%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(24 21 16 / 10%) 1px, transparent 1px),
    linear-gradient(135deg, rgb(255 255 255 / 42%), rgb(194 122 24 / 8%));
  background-size: 34px 34px, 34px 34px, auto;
  box-shadow:
    0 26px 68px rgb(54 43 28 / 22%),
    inset 0 1px 0 rgb(255 255 255 / 44%);
}

.depth-plane-back {
  inset: 14% 11% 28%;
  opacity: .5;
  transform: translate3d(
    calc(var(--depth-pointer-x, 0px) * -.22),
    calc(var(--depth-offset, 0px) + (var(--depth-pointer-y, 0px) * -.18)),
    -130px
  ) rotateX(61deg) rotateZ(-18deg);
}

.depth-plane-mid {
  inset: 24% 17% 20%;
  opacity: .76;
  transform: translate3d(
    calc(var(--depth-pointer-x, 0px) * .22),
    calc(var(--depth-offset, 0px) + (var(--depth-pointer-y, 0px) * .18)),
    10px
  ) rotateX(61deg) rotateZ(-18deg);
}

.depth-plane-front {
  inset: 37% 23% 10%;
  opacity: .96;
  transform: translate3d(
    calc(var(--depth-pointer-x, 0px) * .46),
    calc(var(--depth-offset, 0px) + (var(--depth-pointer-y, 0px) * .34)),
    145px
  ) rotateX(61deg) rotateZ(-18deg);
}

.depth-card {
  width: clamp(108px, 18vw, 164px);
  height: clamp(72px, 10vw, 104px);
  border: 1px solid rgb(54 43 28 / 24%);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 42%), rgb(255 250 241 / 12%)),
    rgb(24 21 16 / 58%);
  box-shadow:
    0 28px 70px rgb(54 43 28 / 30%),
    0 0 34px rgb(194 122 24 / 10%),
    inset 0 1px 0 rgb(255 255 255 / 22%);
  backdrop-filter: blur(10px);
}

.depth-card::before,
.depth-card::after {
  position: absolute;
  left: 16%;
  right: 16%;
  height: 1px;
  background: rgb(255 250 241 / 30%);
  content: "";
}

.depth-card::before {
  top: 34%;
}

.depth-card::after {
  top: 57%;
  right: 34%;
}

.depth-card-left {
  top: 24%;
  left: 12%;
  transform: translate3d(
    calc(var(--depth-pointer-x, 0px) * -.34),
    calc(var(--depth-offset, 0px) + (var(--depth-pointer-y, 0px) * -.22)),
    70px
  ) rotateX(51deg) rotateZ(-22deg);
}

.depth-card-right {
  top: 15%;
  right: 11%;
  border-color: rgb(13 127 120 / 32%);
  transform: translate3d(
    calc(var(--depth-pointer-x, 0px) * .4),
    calc(var(--depth-offset, 0px) + (var(--depth-pointer-y, 0px) * .24)),
    125px
  ) rotateX(55deg) rotateZ(-10deg);
}

.depth-card-front {
  right: 18%;
  bottom: 16%;
  border-color: rgb(194 122 24 / 38%);
  transform: translate3d(
    calc(var(--depth-pointer-x, 0px) * .58),
    calc(var(--depth-offset, 0px) + (var(--depth-pointer-y, 0px) * .44)),
    210px
  ) rotateX(58deg) rotateZ(-16deg);
}

.depth-core {
  top: 42%;
  left: 45%;
  width: clamp(70px, 10vw, 104px);
  aspect-ratio: 1;
  border: 1px solid rgb(88 216 255 / 34%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 38%, rgb(255 255 255 / 86%) 0 8%, rgb(230 184 107 / 64%) 9% 42%, transparent 66%),
    rgb(24 21 16 / 50%);
  box-shadow:
    0 0 58px rgb(194 122 24 / 38%),
    0 34px 78px rgb(54 43 28 / 34%);
  transform: translate3d(
    calc(var(--depth-pointer-x, 0px) * .18),
    calc(var(--depth-offset, 0px) + (var(--depth-pointer-y, 0px) * .14)),
    160px
  );
}

@media (max-width: 920px) {
  .hero-visual {
    min-height: 360px;
  }

  .depth-card-left {
    left: 8%;
  }

  .depth-card-right {
    right: 7%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-3d,
  .depth-halo,
  .depth-plane,
  .depth-card,
  .depth-core {
    transition: none;
  }
}