/**
 * Spline-Lite — CSS 3D elements (no Three.js required for static sites)
 * Full Three.js/Spline scenes can be dropped in where WebGL is available.
 * These CSS-only 3D elements work everywhere as fallbacks or standalone.
 */

/* ── perspective container ── */
.s3d-scene {
  perspective: 800px;
  perspective-origin: 50% 40%;
}
.s3d-object {
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}

/* ── floating 3D card ── */
.s3d-card {
  transform-style: preserve-3d;
  transition: transform 0.4s ease;
  cursor: pointer;
}
.s3d-card:hover { transform: rotateY(-10deg) rotateX(5deg) scale(1.03); }
.s3d-card-face {
  position: relative;
  backface-visibility: hidden;
}
.s3d-card-shadow {
  position: absolute;
  inset: 10px -10px -20px 10px;
  background: rgba(0,0,0,0.3);
  filter: blur(20px);
  border-radius: inherit;
  z-index: -1;
  transform: translateZ(-10px);
}

/* ── rotating ring ── */
@keyframes s3d-spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
.s3d-ring {
  width: 200px; height: 200px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  animation: s3d-spin 12s linear infinite;
  transform-style: preserve-3d;
  position: relative;
}
.s3d-ring::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  transform: rotateX(60deg);
}

/* ── isometric cube ── */
.s3d-cube {
  width: 80px; height: 80px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-30deg) rotateY(45deg);
  animation: s3d-cube-float 4s ease-in-out infinite;
}
@keyframes s3d-cube-float {
  0%,100% { transform: rotateX(-30deg) rotateY(45deg) translateY(0); }
  50%      { transform: rotateX(-30deg) rotateY(45deg) translateY(-10px); }
}
.s3d-cube-face {
  position: absolute;
  width: 80px; height: 80px;
  border: 1px solid rgba(255,255,255,0.15);
}
.s3d-cube-face.front  { background: rgba(139,92,246,0.3); transform: translateZ(40px); }
.s3d-cube-face.back   { background: rgba(139,92,246,0.2); transform: translateZ(-40px) rotateY(180deg); }
.s3d-cube-face.left   { background: rgba(99,60,196,0.3);  transform: rotateY(-90deg) translateZ(40px); }
.s3d-cube-face.right  { background: rgba(99,60,196,0.2);  transform: rotateY(90deg) translateZ(40px); }
.s3d-cube-face.top    { background: rgba(167,139,250,0.3); transform: rotateX(90deg) translateZ(40px); }
.s3d-cube-face.bottom { background: rgba(109,72,226,0.2);  transform: rotateX(-90deg) translateZ(40px); }

/* ── tilt card on mouse (JS-driven via --rx / --ry custom props) ── */
.s3d-tilt {
  transform: perspective(800px) rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg));
  transition: transform 0.1s ease;
}

/* ── orbit visualization ── */
.s3d-orbit {
  position: relative;
  width: 300px; height: 300px;
}
.s3d-orbit-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.15);
  transform: rotateX(70deg);
}
.s3d-orbit-dot {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--orbit-color, #8B5CF6);
  box-shadow: 0 0 10px var(--orbit-color, #8B5CF6);
  top: -6px; left: 50%;
  transform-origin: 0 156px;
  animation: s3d-orbit-spin var(--orbit-speed, 8s) linear infinite;
}
@keyframes s3d-orbit-spin { from { transform: rotate(0deg) translateX(-6px); } to { transform: rotate(360deg) translateX(-6px); } }

/* ── neural network node ── */
.s3d-neural-node {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #7DD3FC, #0EA5E9);
  box-shadow: 0 0 15px rgba(14,165,233,0.5);
  animation: s3d-neural-pulse var(--pulse-speed, 2s) ease-in-out infinite;
}
@keyframes s3d-neural-pulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 10px rgba(14,165,233,0.4); }
  50%      { transform: scale(1.3); box-shadow: 0 0 20px rgba(14,165,233,0.7); }
}