.scene-depth::before { transform: translate3d(var(--texture-x,0px),var(--texture-y,0px),0) scale(1.08); transition: transform 0.8s; }
.depth-visual, .release-card, .performance-photo, .photo-grid img, .pricing-grid .price-card { --surface-rx: 0deg; --surface-ry: 0deg; --surface-lift: 0px; transform: perspective(1200px) translateY(var(--surface-lift)) rotateX(var(--surface-rx)) rotateY(var(--surface-ry)); transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.45s; backface-visibility: hidden; }
.depth-visual { transform-style: preserve-3d; }
.depth-visual > img, .depth-visual .portrait-window { transform: translateZ(32px); }
.depth-visual figcaption { transform: translateZ(50px); }
.performance-photo { box-shadow: var(--photo-glow),0 38px 75px #000b; }
.pricing-grid .price-card { transform-style: preserve-3d; box-shadow: rgba(255, 255, 255, 0.19) 0px 1px 0px inset, rgba(0, 0, 0, 0.533) 0px 14px 24px, rgba(0, 0, 0, 0.667) 0px 34px 65px; }
.pricing-grid .price-card > div { transform: translateZ(18px); }
.pricing-grid .price-card > .btn { transform: translateZ(30px); }
.release-card { display: block; transform-style: preserve-3d; }
.release-card > span { transform: translateZ(22px); }
.depth-visual::after { opacity: 0.9; transition: opacity 0.4s; }
@media (hover: hover) and (pointer: fine) {
  .depth-visual:hover, .release-card:hover, .performance-photo:hover, .pricing-grid .price-card:hover { --surface-lift: -5px; }
  .release-card:hover img { transform: none; }
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .depth-visual, .release-card, .performance-photo, .photo-grid img, .pricing-grid .price-card { transition: none; transform: none !important; }
  .scene-depth::before { transform: none; transition: none; }
  .pricing-grid .price-card > div, .pricing-grid .price-card > .btn, .depth-visual > img, .depth-visual .portrait-window, .depth-visual figcaption, .release-card > span { transform: none; }
}