/* Explain: Layout utilities, background molecule animations, and motion settings. */
/* Subtle background motion */
@keyframes eco-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -25px) scale(1.06); }
}

@keyframes eco-flow {
    to { stroke-dashoffset: -200; }
}

.eco-blob {
    animation: eco-float 14s ease-in-out infinite;
}

.eco-blob-delay {
    animation-delay: -7s;
}

.eco-flow-line {
    stroke-dasharray: 6 14;
    animation: eco-flow 8s linear infinite;
}

/* Slow-drifting hydrogen (H2) and ammonia (NH3) molecules behind the page */
@keyframes molecule-drift {
    0% { transform: translate3d(0, 0, 0) rotate(0deg); }
    25% { transform: translate3d(28px, -34px, 0) rotate(7deg); }
    50% { transform: translate3d(-22px, 24px, 0) rotate(-6deg); }
    75% { transform: translate3d(32px, 16px, 0) rotate(4deg); }
    100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

.molecule-field {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.molecule {
    position: absolute;
    display: block;
    width: clamp(72px, 9vw, 150px);
    color: var(--primary-color);
    opacity: 0.28;
    animation: molecule-drift 30s ease-in-out infinite;
}

.molecule svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.molecule .bond {
    stroke: currentColor;
    stroke-width: 2;
}

.molecule .atom {
    fill: currentColor;
}

.molecule .atom-h {
    fill: var(--hydrogen-blue);
}

.molecule-1 { top: 10%; left: 5%; animation-duration: 36s; }
.molecule-2 { top: 7%; left: 62%; width: clamp(96px, 12vw, 190px); opacity: 0.22; animation-duration: 44s; animation-delay: -9s; }
.molecule-3 { top: 42%; left: 78%; animation-duration: 40s; animation-delay: -18s; }
.molecule-4 { top: 58%; left: 7%; width: clamp(88px, 11vw, 175px); opacity: 0.22; animation-duration: 50s; animation-delay: -14s; }
.molecule-5 { top: 78%; left: 46%; animation-duration: 42s; animation-delay: -27s; }
.molecule-6 { top: 26%; left: 34%; width: clamp(60px, 7vw, 110px); opacity: 0.18; animation-duration: 37s; animation-delay: -5s; }
.molecule-7 { top: 16%; left: 88%; animation-duration: 38s; animation-delay: -22s; }
.molecule-8 { top: 52%; left: 30%; width: clamp(84px, 10vw, 165px); opacity: 0.2; animation-duration: 46s; animation-delay: -11s; }
.molecule-9 { top: 68%; left: 90%; animation-duration: 41s; animation-delay: -31s; }
.molecule-10 { top: 92%; left: 20%; width: clamp(92px, 11vw, 180px); opacity: 0.22; animation-duration: 51s; animation-delay: -16s; }
.molecule-11 { top: 34%; left: 14%; width: clamp(64px, 8vw, 120px); opacity: 0.18; animation-duration: 43s; animation-delay: -25s; }

@media (max-width: 640px) {
    .molecule { opacity: 0.22; }
}

@media (prefers-reduced-motion: reduce) {
    .eco-blob,
    .eco-flow-line,
    .molecule {
        animation: none;
    }
}