/* V6 — lightweight interactive 3D depth */

.hero { perspective: 1500px; }
.hero__grid { transform-style: preserve-3d; }

.hero-depth-scene {
  position: absolute;
  inset: -82px calc(50% - 50vw) -104px;
  z-index: 2;
  overflow: hidden;
  border-radius: 42px;
  pointer-events: none;
  transform-style: preserve-3d;
}
.hero-depth-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .76;
  filter: saturate(1.1);
  -webkit-mask-image: linear-gradient(90deg, transparent 16%, rgba(0,0,0,.18) 38%, #000 58%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 16%, rgba(0,0,0,.18) 38%, #000 58%, #000 100%);
}

.hero-depth-ring {
  position: absolute;
  left: 72%;
  top: 43%;
  border: 1px solid rgba(154,246,232,.24);
  border-radius: 50%;
  box-shadow: 0 0 32px rgba(101,228,208,.08), inset 0 0 24px rgba(101,228,208,.06);
  transform-style: preserve-3d;
  will-change: transform;
}
.hero-depth-ring--one {
  width: 270px;
  height: 112px;
  margin: -56px 0 0 -135px;
  transform: rotateX(69deg) rotateZ(-12deg) translateZ(18px);
  animation: depth-ring-one 12s linear infinite;
}
.hero-depth-ring--two {
  width: 190px;
  height: 82px;
  margin: -41px 0 0 -95px;
  border-color: rgba(255,137,110,.2);
  transform: rotateX(66deg) rotateZ(24deg) translateZ(42px);
  animation: depth-ring-two 9s linear infinite reverse;
}
@keyframes depth-ring-one {
  from { transform: rotateX(69deg) rotateZ(-12deg) translateZ(18px); }
  to { transform: rotateX(69deg) rotateZ(348deg) translateZ(18px); }
}
@keyframes depth-ring-two {
  from { transform: rotateX(66deg) rotateZ(24deg) translateZ(42px); }
  to { transform: rotateX(66deg) rotateZ(384deg) translateZ(42px); }
}

.hero-art { transform-style: preserve-3d; }
.hero-art img {
  transform-origin: 72% 48%;
  transform:
    perspective(1600px)
    translate3d(calc((var(--mx, .5) - .5) * -18px), calc((var(--my, .5) - .5) * -13px), 0)
    rotateX(var(--hero-rx, 0deg))
    rotateY(var(--hero-ry, 0deg))
    scale(1.035);
  transition: transform .65s cubic-bezier(.2,.8,.2,1), filter .65s ease;
}
.hero:hover .hero-art img { filter: saturate(1.05) contrast(1.025); }

.hero__copy { transform: translateZ(46px); }
.hero__eyebrow { transform: translateZ(16px); }
.hero__cta .btn { transform: translateZ(22px); }

.hero-visual {
  transform-origin: 50% 60%;
  transform: perspective(1100px) rotateX(var(--route-rx, 0deg)) rotateY(var(--route-ry, 0deg)) translateZ(34px);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
  background:
    radial-gradient(260px circle at var(--route-light-x, 72%) var(--route-light-y, 20%), rgba(255,255,255,.92), transparent 54%),
    rgba(247,248,245,.82);
}
.hero-visual:hover { box-shadow: 0 42px 100px rgba(0,0,0,.32); }

.service-card,
#steps .timeline__item,
#reviews .review { transform-style: preserve-3d; }
.service-card h3,
#steps .timeline__item h3,
#reviews .review blockquote { transform: translateZ(18px); }

@media (max-width: 899px) {
  .hero-depth-scene { inset: -70px calc(50% - 50vw) -104px; }
  .hero-depth-ring { left: 72%; top: 40%; opacity: .7; }
  .hero__copy { transform: none; }
  .hero-visual { transform: none; }
}

@media (max-width: 719px) {
  .hero-depth-scene { inset: -60px calc(50% - 50vw) -104px; }
  .hero-depth-canvas { opacity: .46; }
  .hero-depth-ring { left: 70%; top: 38%; opacity: .4; transform: scale(.72) rotateX(66deg); }
  .hero-depth-ring--two { display: none; }
  .hero-art img {
    transform: translate3d(0,0,0) scale(1.08);
    transform-origin: 66% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-depth-ring { animation: none; }
  .hero-art img,
  .hero-visual { transform: none !important; transition: none; }
  .hero-depth-canvas { opacity: .34; }
}