/**
 * Home-only subtle CSS 3D depth (no WebGL). Loaded from index.php only.
 */

.hero-depth-zone {
  perspective: 1400px;
}

.hero-depth-stage {
  transform-style: preserve-3d;
}

.hero-depth-zone .hero-card {
  transform: translateZ(0);
  transform-style: preserve-3d;
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s ease;
  backface-visibility: hidden;
}

@media (hover: hover) and (pointer: fine) {
  .hero-depth-zone .hero-card:hover {
    transform: translateZ(14px) rotateX(2.5deg) rotateY(-2deg);
    box-shadow:
      0 32px 80px rgba(2, 6, 18, 0.55),
      0 0 0 1px rgba(52, 211, 255, 0.12);
  }

  .depth-perspective-row .glimpse-card:hover {
    transform: translateY(-4px) translateZ(10px) rotateX(1.5deg);
    box-shadow: 0 16px 44px rgba(2, 6, 18, 0.42);
  }

  .book-depth-wrap:hover .book-feature {
    transform: translateZ(8px) rotateX(1.25deg);
    box-shadow: 0 22px 55px rgba(2, 6, 18, 0.45);
  }
}

.depth-perspective-row {
  perspective: 1000px;
}

.depth-perspective-row .glimpse-card {
  transform-style: preserve-3d;
  transition:
    border-color 0.22s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease;
}

.book-depth-wrap {
  perspective: 1100px;
  transform-style: preserve-3d;
}

.book-depth-wrap .book-feature {
  transform: translateZ(0);
  transform-style: preserve-3d;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s ease;
}

@media (prefers-reduced-motion: reduce) {
  .hero-depth-zone .hero-card,
  .depth-perspective-row .glimpse-card,
  .book-depth-wrap .book-feature {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .hero-depth-zone .hero-card:hover,
  .depth-perspective-row .glimpse-card:hover,
  .book-depth-wrap:hover .book-feature {
    transform: none;
  }
}