/* Floating Background - Chemical Bond-Line Structures */
.hex-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  background: transparent;
}

.hex {
  position: absolute;
  width: 150px;
  height: 150px;
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb),0.5));
  animation: floatHex var(--dur, 25s) linear infinite;
}

.hex svg.bond-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

.hex svg.bond-svg line,
.hex svg.bond-svg polyline,
.hex svg.bond-svg polygon,
.hex svg.bond-svg path,
.hex svg.bond-svg rect,
.hex svg.bond-svg circle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Customized positions (base placement only — speed/drift/spin are
   randomized per-shape at runtime in script.js via --dur/--tx/--ty/--rot) */
.hex-1 { width: 180px; height: 180px; top: 10%; left: 20px; }
.hex-2 { width: 120px; height: 120px; bottom: 15%; right: -30px; }
.hex-3 { width: 220px; height: 220px; top: 40%; left: 60%; }
.hex-4 { width: 90px; height: 90px; top: 70%; left: 10%; }
.hex-5 { width: 160px; height: 160px; bottom: 5%; left: 40%; }
.hex-6 { width: 200px; height: 200px; top: -40px; right: 20%; }
.hex-7 { width: 130px; height: 130px; top: 80px; left: 22%; }
.hex-8 { width: 140px; height: 140px; bottom: 2%; left: 2%; }
.hex-9 { width: 150px; height: 150px; top: 45%; left: 35%; }

@keyframes floatHex {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  25%  { transform: translate(calc(var(--tx, 20px) * 0.4), var(--ty, -30px)) rotate(calc(var(--rot, 360deg) * 0.25)) scale(1.05); }
  50%  { transform: translate(var(--tx, 20px), calc(var(--ty, -30px) * -0.5)) rotate(calc(var(--rot, 360deg) * 0.5)) scale(0.95); }
  75%  { transform: translate(calc(var(--tx, 20px) * 0.6), calc(var(--ty, -30px) * -1.2)) rotate(calc(var(--rot, 360deg) * 0.75)) scale(1.02); }
  100% { transform: translate(0, 0) rotate(var(--rot, 360deg)) scale(1); }
}