/* Real 3D is reserved for a small set of wireframe objects. */
.spatial-field { position:absolute; inset:0; z-index:3; overflow:hidden; pointer-events:none; --space-line:#b883514f; --space-fill:#8e481712; }
.spatial-field-hero { --space-line:#c78d618c; --space-fill:#aa50171a; }
.spatial-object { position:absolute; left:var(--space-x); top:var(--space-y); width:var(--space-size); height:var(--space-size); perspective:1100px; transform:translate(-50%,-50%); }
.spatial-flight, .spatial-body { width:100%; height:100%; position:relative; transform-style:preserve-3d; }
.spatial-flight { animation:spatialDrift calc(calc(var(--space-speed) * .73) * var(--motion-tempo,2)) ease-in-out calc(var(--space-phase) * var(--motion-tempo,2)) infinite var(--space-direction); }
@keyframes spatialDrift {
  0%,100% { transform:translate3d(-18px,20px,calc(var(--space-depth) - 30px)); }
  18% { transform:translate3d(24px,-34px,calc(var(--space-depth) + 35px)); }
  39% { transform:translate3d(47px,12px,calc(var(--space-depth) - 15px)); }
  61% { transform:translate3d(-6px,42px,calc(var(--space-depth) + 48px)); }
  82% { transform:translate3d(-42px,-23px,calc(var(--space-depth) + 5px)); }
}
.spatial-body { animation:spatialTumble calc(var(--space-speed) * var(--motion-tempo,2)) linear calc(var(--space-phase) * var(--motion-tempo,2)) infinite var(--space-direction); }
@keyframes spatialTumble { from { transform:rotateX(24deg) rotateY(-18deg) rotateZ(12deg); } to { transform:rotateX(384deg) rotateY(342deg) rotateZ(372deg); } }
.spatial-body i { position:absolute; inset:0; border:1px solid var(--space-line); backface-visibility:visible; }
.spatial-cube i { background:linear-gradient(135deg,var(--space-fill),transparent 75%); }
.spatial-cube i::before { content:""; position:absolute; inset:11%; border:1px solid var(--space-line); }
.spatial-cube i:nth-child(1) { transform:translateZ(calc(var(--space-size) / 2)); }
.spatial-cube i:nth-child(2) { transform:rotateY(180deg) translateZ(calc(var(--space-size) / 2)); }
.spatial-cube i:nth-child(3) { transform:rotateY(90deg) translateZ(calc(var(--space-size) / 2)); }
.spatial-cube i:nth-child(4) { transform:rotateY(-90deg) translateZ(calc(var(--space-size) / 2)); }
.spatial-cube i:nth-child(5) { transform:rotateX(90deg) translateZ(calc(var(--space-size) / 2)); }
.spatial-cube i:nth-child(6) { transform:rotateX(-90deg) translateZ(calc(var(--space-size) / 2)); }
.spatial-gyroscope i { border-radius:50%; }
.spatial-gyroscope i:nth-child(2) { transform:rotateY(90deg); border-style:dashed; }
.spatial-gyroscope i:nth-child(3) { transform:rotateX(90deg); }
.spatial-gyroscope i:nth-child(4) { transform:rotateY(48deg) rotateX(48deg); border-style:dotted; }
.spatial-gyroscope i::after { content:""; position:absolute; width:5px; height:5px; top:-3px; left:50%; border-radius:50%; background:#d88b56; }
.scene-orbits i { animation-name:sectionOrbit; }
@keyframes sectionOrbit { from { transform:rotateX(48deg) rotateZ(12deg); } to { transform:rotateX(48deg) rotateZ(372deg); } }
.fanal-rings i { animation-name:fanalRing; }
@keyframes fanalRing { from { transform:rotateX(40deg) rotateZ(0deg); } to { transform:rotateX(40deg) rotateZ(360deg); } }
.release-card[data-tilt], .members article[data-tilt] { transform:perspective(1200px) rotateX(0deg) rotateY(0deg); transition:transform .25s ease,border-color .25s ease; }
.release-card[data-tilt]:hover, .release-card[data-tilt]:focus-within, .members article[data-tilt]:hover { transform:perspective(1200px) rotateX(2deg) rotateY(-3deg) translateY(-4px); }
.release-art-orbit { animation:releaseOrbit calc(var(--art-orbit-duration,28s) * var(--motion-tempo,2)) linear calc(var(--art-orbit-delay,-7s) * var(--motion-tempo,2)) infinite var(--art-orbit-direction,normal); }
@keyframes releaseOrbit { from { transform:rotate(-22deg); } to { transform:rotate(338deg); } }
.section-heading h2, .sources h2 { text-shadow:2px 3px #432619,4px 5px #25180f; }
.fanal h2 { text-shadow:1px 1px #642214,3px 3px #51190f,5px 5px #36120c,9px 10px 24px #0008; }
.listening-routes>a:hover, .listening-routes>a:focus-visible, .source-links a:hover, .source-links a:focus-visible { transform:translateY(-3px); }
@media(max-width:700px) { .release-card[data-tilt]:hover, .members article[data-tilt]:hover { transform:translateY(-3px); } }