/* ── E10: 3D depth + word reveal ── */

/* Hero mouse-parallax layers */
.hero {
  perspective: 1200px;
}
.hero-canvas {
  transform-origin: center center;
  will-change: transform;
  transition: transform 80ms linear;
}
.hero-content {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 80ms linear;
}

/* Word-by-word reveal on section h2 */
.section-h2 .word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  margin-right: 0.28em;
}
.section-h2 .word {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
  transition:
    transform 580ms cubic-bezier(0.23, 1, 0.32, 1),
    opacity   580ms ease;
}
.section-h2.words-visible .word {
  transform: translateY(0%);
  opacity: 1;
}

/* Pick card 3D stack z-depth */
.picks-grid {
  perspective: 1400px;
  transform-style: preserve-3d;
}
#pc1 { transform: translateZ(0px)   rotateY(0deg); }
#pc2 { transform: translateZ(-12px) rotateY(1.5deg); }
#pc3 { transform: translateZ(-24px) rotateY(3deg); }
#pc1:hover { transform: translateZ(24px)  rotateY(-1deg) translateY(-8px); }
#pc2:hover { transform: translateZ(12px)  rotateY(0deg)  translateY(-8px); }
#pc3:hover { transform: translateZ(0px)   rotateY(1deg)  translateY(-8px); }
#pc1,#pc2,#pc3 {
  transition:
    transform 400ms cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 400ms ease;
}

/* Section entrance depth-fade */
.depth-reveal {
  opacity: 0;
  transform: translateY(36px) translateZ(-40px) scale(0.97);
  transition:
    opacity   700ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 700ms cubic-bezier(0.23, 1, 0.32, 1);
}
.depth-reveal.depth-in {
  opacity: 1;
  transform: translateY(0) translateZ(0) scale(1);
}

/* Feature depth stagger delays */
.feature.depth-reveal:nth-child(1) { transition-delay: 0ms; }
.feature.depth-reveal:nth-child(2) { transition-delay: 80ms; }
.feature.depth-reveal:nth-child(3) { transition-delay: 160ms; }
.feature.depth-reveal:nth-child(4) { transition-delay: 240ms; }
.feature.depth-reveal:nth-child(5) { transition-delay: 320ms; }

/* Hero h1 3D float */
.hero-content h1 {
  transform-style: preserve-3d;
}
@media (hover: hover) {
  .hero-content {
    transition: transform 120ms linear;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-canvas, .hero-content { transition: none !important; transform: none !important; }
  .section-h2 .word { transition: none !important; }
  .depth-reveal { opacity:1; transform: none; transition: none !important; }
  #pc1,#pc2,#pc3 { transform: none !important; transition: none !important; }
}