/* ============================================================
   Apollo — 70 ambient contextual backgrounds (subtle, parallax)
   A faint per-section layer so backgrounds aren't a flat color. Very low
   opacity, contextual motifs, parallax on scroll. Hero keeps its own system.
   ============================================================ */

.has-fx { position: relative; }
.has-fx > *:not(.sec-fx) { position: relative; z-index: 1; }
.sec-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

/* Soft cobalt wash blobs (radial gradients = soft + cheap, no blur filter) */
.afx-blob { position: absolute; border-radius: 50%; will-change: transform; }
.afx-blob.b1 { width: 46vmax; height: 46vmax; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 68%); }
.afx-blob.b2 { width: 34vmax; height: 34vmax; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 70%); }

/* Tiny floating dots (like the hero) */
.afx-dots { position: absolute; inset: 0; }
.afx-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0.13; animation: afxFloat 7s ease-in-out infinite; }
@media (prefers-color-scheme: dark) { .afx-dot { opacity: 0.18; } }
@keyframes afxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* Contextual: moon + rocket (the "tecnología que llegó a la Luna" section) */
.afx-moon { position: absolute; right: 9%; top: 11%; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle at 38% 36%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%); }
.afx-rocket { position: absolute; left: 11%; bottom: 2%; width: 64px; height: 64px; color: var(--accent); opacity: 0.1; will-change: transform; }
@media (prefers-color-scheme: dark) { .afx-rocket { opacity: 0.18; } }

/* Contextual: data grid (canvas / services) */
.afx-grid { position: absolute; inset: -12%; background-image: radial-gradient(color-mix(in srgb, var(--accent) 42%, transparent) 1px, transparent 1.6px); background-size: 32px 32px; opacity: 0.05; will-change: transform; }
@media (prefers-color-scheme: dark) { .afx-grid { opacity: 0.08; } }

/* Contextual: orbit ring (method) */
.afx-ring { position: absolute; right: -8%; top: 14%; width: 42vmax; height: 42vmax; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); opacity: 0.5; will-change: transform; }
.afx-ring::after { content: ""; position: absolute; inset: 17%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent); }

@media (prefers-reduced-motion: reduce) { .afx-dot { animation: none; } }