/* 3D molecular renderer — CSS 3D transforms, no dependencies.
   Ball-and-stick: atoms as shaded spheres, bonds as cylinders.
   Continuous slow rotation; pointer drag to spin. */

.Mol3D {
  --size: 180px;
  width: var(--size); height: var(--size);
  perspective: 700px;
  display: inline-block;
}
.Mol3D .scene {
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: mol-spin 18s linear infinite;
}
.Mol3D .scene.paused { animation-play-state: paused; }
@keyframes mol-spin {
  from { transform: rotateX(-12deg) rotateY(0deg); }
  to   { transform: rotateX(-12deg) rotateY(360deg); }
}

/* Atom sphere */
.Mol3D .atom {
  position: absolute;
  width: var(--r); height: var(--r);
  border-radius: 50%;
  transform: translate(-50%,-50%) translate3d(var(--x), var(--y), var(--z));
  background: radial-gradient(circle at 32% 30%,
    var(--hi) 0%, var(--mid) 42%, var(--lo) 100%);
  box-shadow:
    inset -2px -3px 6px rgba(0,0,0,.5),
    0 2px 8px rgba(0,0,0,.4);
}
.Mol3D .atom.C { --hi:#8a99ad; --mid:#4a586c; --lo:#1e2833; }
.Mol3D .atom.O { --hi:#ff9b7a; --mid:#d84a2a; --lo:#7a1f10; }
.Mol3D .atom.H { --hi:#f5f7fa; --mid:#c8ccd4; --lo:#8890a0; }
.Mol3D .atom.Cl { --hi:#a8e668; --mid:#5aa830; --lo:#2a6015; }

/* Bond cylinder: a thin div rotated in 3D */
.Mol3D .bond {
  position: absolute;
  height: 3px;
  background: linear-gradient(to bottom, rgba(200,210,225,.75), rgba(120,135,160,.55));
  border-radius: 2px;
  transform-origin: left center;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}

@media (prefers-reduced-motion: reduce) {
  .Mol3D .scene { animation: none; transform: rotateX(-16deg) rotateY(24deg); }
}