/* Homepage 3Dmol viewer. Loaded only on index.html. */

.molecule-stage.molecule-stage-3dmol {
  --mol-tilt-x: 0deg;
  --mol-tilt-y: 0deg;
  opacity: 1;
  width: min(88%, 460px);
  height: clamp(300px, 28vw, 400px);
  margin: 0 auto;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  transform: rotateX(var(--mol-tilt-x)) rotateY(var(--mol-tilt-y));
  transform-style: preserve-3d;
  transition: transform 0.28s cubic-bezier(.4,0,.2,1);
}

.molecule-stage-3dmol::before {
  content: none;
}

.mol3d-viewer {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: transparent !important;
  filter: drop-shadow(0 18px 28px rgba(37,99,235,0.14));
}

.mol3d-viewer canvas {
  background: transparent !important;
  mix-blend-mode: multiply;
}

.mol3d-fallback {
  position: absolute;
  inset: auto 22px 22px 22px;
  z-index: 5;
  display: none;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(245,158,11,0.22);
  color: #92400E;
  font-size: 0.75rem;
  line-height: 1.55;
}

.molecule-stage-3dmol.is-fallback .mol3d-fallback {
  display: block;
}

.molecule-stage-3dmol.is-loading .mol3d-viewer::after {
  content: '';
  position: absolute;
  inset: 24% 20%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(56,189,248,0.18), transparent);
  animation: mol3dSweep 1.8s ease-in-out infinite;
}

@keyframes mol3dSweep {
  from { transform: translateX(-46%); opacity: 0.4; }
  to { transform: translateX(46%); opacity: 0.08; }
}

@media (max-width: 768px) {
  .molecule-stage-3dmol {
    display: block !important;
    width: min(92%, 360px);
    height: 260px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .molecule-stage-3dmol.is-loading .mol3d-viewer::after {
    animation: none !important;
  }
  .molecule-stage.molecule-stage-3dmol {
    transform: none !important;
    transition: none !important;
  }
}