/* Restrained spatial depth; the text and button hit areas stay on a stable plane. */
.hero-visual {
  inset: -38px;
  animation: none;
  transform: perspective(1400px) scale(1.055);
  backface-visibility: hidden;
}
.spatial-motion .hero-visual {
  transform: perspective(1400px)
    translate3d(var(--hero-x, 0px), calc(var(--hero-y, 0px) + var(--hero-scroll, 0px)), 0)
    rotateX(var(--hero-rx, 0deg)) rotateY(var(--hero-ry, 0deg)) scale(1.065);
}
.spatial-motion .hero-content {
  transform: translate3d(var(--hero-copy-x, 0px), var(--hero-copy-y, 0px), 0);
}
.hero.spatial-updating .hero-visual,
.hero.spatial-updating .hero-content { will-change: transform; }

.hero-orbit {
  --orbit-size: clamp(320px, 38vw, 570px);
  position: absolute;
  z-index: 1;
  top: 52%;
  right: 5.5%;
  width: var(--orbit-size);
  height: var(--orbit-size);
  transform: translateY(-50%);
  perspective: 900px;
  transform-style: preserve-3d;
  pointer-events: none;
  opacity: .63;
}
.orbit-ring {
  position: absolute;
  display: block;
  border: 1px solid rgba(139, 216, 250, .29);
  border-left-color: rgba(139, 216, 250, .04);
  border-bottom-color: rgba(139, 216, 250, .09);
  border-radius: 50%;
  transform-style: preserve-3d;
  animation-play-state: paused;
}
.orbit-ring::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -2px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #9ce4ff;
  box-shadow: 0 0 8px rgba(115, 216, 255, .45);
}
.orbit-one { inset: 0; animation: spatial-orbit-one 38s linear infinite paused; }
.orbit-two { inset: 11%; border-color: rgba(139, 216, 250, .17); animation: spatial-orbit-two 49s linear infinite paused; }
.orbit-three { inset: 25%; border-style: dashed; border-color: rgba(139, 216, 250, .12); animation: spatial-orbit-three 62s linear infinite paused; }
.orbit-beacon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px;
  border-radius: 50%;
  background: #b2eaff;
  box-shadow: 0 0 11px rgba(92, 202, 250, .55);
  animation: spatial-beacon 38s linear infinite paused;
}
.spatial-motion:not(.spatial-page-hidden) .hero.spatial-in-view .hero-orbit > span { animation-play-state: running; }
@keyframes spatial-orbit-one {
  from { transform: rotateX(66deg) rotateY(-18deg) rotateZ(-25deg); }
  to { transform: rotateX(66deg) rotateY(-18deg) rotateZ(335deg); }
}
@keyframes spatial-orbit-two {
  from { transform: rotateX(58deg) rotateY(34deg) rotateZ(30deg); }
  to { transform: rotateX(58deg) rotateY(34deg) rotateZ(-330deg); }
}
@keyframes spatial-orbit-three {
  from { transform: rotateX(74deg) rotateY(-42deg) rotateZ(0deg); }
  to { transform: rotateX(74deg) rotateY(-42deg) rotateZ(360deg); }
}
@keyframes spatial-beacon {
  from { transform: rotateX(66deg) rotateY(-18deg) rotateZ(-25deg) translateX(calc(var(--orbit-size) / 2)); }
  to { transform: rotateX(66deg) rotateY(-18deg) rotateZ(335deg) translateX(calc(var(--orbit-size) / 2)); }
}

/* Tilt the image panel, leaving the existing image hover scale untouched. */
.spatial-motion .product-image {
  transform: perspective(950px) rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg));
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.product-image::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 28%, rgba(215, 237, 248, .32) 48%, rgba(255,255,255,.48) 52%, transparent 72%);
  transform: translate3d(var(--card-glint, -25%), 0, 0);
  opacity: 0;
  transition: opacity .25s ease;
}
.spatial-motion .product-image.spatial-card-active::after { opacity: .25; }
.product-image.spatial-card-moving { will-change: transform; }

@media (max-width: 900px) {
  .hero-orbit { --orbit-size: 380px; right: -70px; top: 49%; opacity: .4; }
}
@media (max-width: 640px) {
  .hero-visual { inset: 0; transform: scale(1.02); }
  .hero-orbit { --orbit-size: 275px; right: -105px; top: 48%; opacity: .27; }
  .orbit-three, .orbit-beacon { display: none; }
}
@media (hover: none), (pointer: coarse) {
  .hero-visual { transform: scale(1.02); }
  .hero-orbit > span { animation-play-state: paused !important; }
  .product-image::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual, .spatial-motion .hero-visual { transform: none !important; }
  .hero-content, .spatial-motion .hero-content, .product-image, .spatial-motion .product-image { transform: none !important; }
  .hero-orbit > span { animation: none !important; }
  .orbit-one { transform: rotateX(66deg) rotateY(-18deg) rotateZ(-25deg); }
  .orbit-two { transform: rotateX(58deg) rotateY(34deg) rotateZ(30deg); }
  .orbit-three { transform: rotateX(74deg) rotateY(-42deg); }
  .orbit-beacon, .product-image::after { display: none; }
}

/* Keep the product photo dominant over decorative orbit lines. */
.hero .hero-orbit{opacity:.1}