/* quantum-field.css — Fondo vivo del sitio público CUANTICA-IT
   1) Superficie 3D de puntos (Dotted Surface, three.js) fija detrás del contenido
   2) Gradiente que "respira" muy lento en hero y secciones oscuras
   3) Flotación suave de las shapes decorativas del hero
   Contraste primordial: fondos con texto nunca bajan de alpha 0.80; los
   puntos tienen opacity 0.85 propia que amortigua. */

/* ── 1. Contenedor del fondo (el canvas WebGL vive dentro) ── */
#dotted-surface {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* El contenido siempre por encima del canvas (nav ya es fixed z-50). */
#main-content { position: relative; z-index: 1; }
body > footer { position: relative; z-index: 1; }

/* ── 2. Gradiente que respira (mantiene la identidad azul) ── */
@keyframes quantumBreathe {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Hero principal: mismos azules de marca con respiración lenta.
   Stops en rgba 0.84 → la superficie de puntos se asoma claramente
   sin comprometer el contraste del texto blanco encima. */
.hero-cuantica {
  background: linear-gradient(135deg,
    rgba(10, 132, 255, 0.84) 0%,
    rgba(0, 102, 214, 0.84) 30%,
    rgba(10, 43, 76, 0.84) 65%,
    rgba(0, 102, 214, 0.84) 100%);
  background-size: 220% 220%;
  animation: quantumBreathe 34s ease-in-out infinite;
}

/* Utilidad para secciones oscuras existentes (tonos base en rgba 0.85) */
.quantum-breathe {
  background: linear-gradient(135deg,
    rgba(10, 43, 76, 0.85) 0%,
    rgba(7, 26, 43, 0.85) 40%,
    rgba(15, 39, 65, 0.85) 70%,
    rgba(7, 26, 43, 0.85) 100%);
  background-size: 220% 220%;
  animation: quantumBreathe 40s ease-in-out infinite;
}

/* ── Secciones traslúcidas al campo (overrides ESCOPADOS, jamás globales) ──
   Solo fondos de sección oscuros; cards, botones y bloques de texto intactos. */

/* Neutraliza el bg-quantum-900 opaco bajo el gradiente rgba del caso de éxito */
section.qf-through.quantum-breathe { background-color: transparent !important; }

/* Carrusel de banners (home): mismo gradiente quantum-900 → cuantica-900
   pero en rgba 0.85 para que la superficie de puntos se asome.
   Los slides CON imagen siguen opacos (diseño del carrusel intacto). */
section.qf-carousel {
  background-image: linear-gradient(to bottom right,
    rgba(22, 78, 99, 0.85),    /* quantum-900 */
    rgba(10, 43, 76, 0.85));   /* cuantica-900 */
}
/* Slide sin imagen: no repinta otro gradiente opaco encima; deja ver el
   gradiente traslúcido de la sección (tono casi idéntico). El overlay
   negro 0.6 del slide se mantiene para el contraste del texto. */
section.qf-carousel .qf-slide-fallback { background-image: none; }

/* Secciones que solo son oscuras en dark mode: mismo tono, alpha 0.85 */
html.dark section.qf-dark-950 { background-color: rgba(8, 51, 68, 0.85) !important; }   /* quantum-950 */
html.dark section.qf-dark-900 { background-color: rgba(22, 78, 99, 0.85) !important; }  /* quantum-900 */

/* ── Secciones CLARAS traslúcidas al campo (SOLO el elemento <section>) ──
   Element+clase eleva la especificidad sobre la utilidad de Tailwind sin !important.
   Cards, dropdowns, modales y botones (div/button) quedan OPACOS: no se tocan.
   Alpha 0.85 → los puntos se asoman conservando el contraste del texto. */
html:not(.dark) #main-content section.bg-white   { background-color: rgba(255, 255, 255, 0.85); }
html:not(.dark) #main-content section.bg-gray-50 { background-color: rgba(249, 250, 251, 0.85); }  /* gray-50 */

/* ── 3. Flotación de shapes decorativas del hero ── */
.quantum-shapes > div { will-change: transform; }

@keyframes qShapeA   { 0%,100% { transform: translateY(0); }               50% { transform: translateY(-16px); } }
@keyframes qShapeDot { 0%,100% { transform: translateY(0); }               50% { transform: translateY(-9px); } }
@keyframes qShapeB   { 0%,100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(-12px) rotate(51deg); } }
@keyframes qShapeC   { 0%,100% { transform: translateY(0) rotate(20deg); } 50% { transform: translateY(-14px) rotate(15deg); } }
@keyframes qShapeD   { 0%,100% { transform: translateY(0) rotate(15deg); } 50% { transform: translateY(-11px) rotate(20deg); } }

.quantum-shapes .qs-a   { animation: qShapeA   11s ease-in-out infinite; }
.quantum-shapes .qs-b   { animation: qShapeB   13s ease-in-out infinite -3s; }
.quantum-shapes .qs-c   { animation: qShapeC   10s ease-in-out infinite -5s; }
.quantum-shapes .qs-d   { animation: qShapeD   12s ease-in-out infinite -2s; }
.quantum-shapes .qs-dot { animation: qShapeDot  9s ease-in-out infinite; }
.quantum-shapes .qs-dot:nth-of-type(6) { animation-duration: 8s;  animation-delay: -4s; }
.quantum-shapes .qs-dot:nth-of-type(7) { animation-duration: 10s; animation-delay: -6s; }
.quantum-shapes .qs-dot:nth-of-type(8) { animation-duration: 8.5s; animation-delay: -1s; }

/* ── Accesibilidad: sin movimiento si el usuario lo pide ── */
@media (prefers-reduced-motion: reduce) {
  .hero-cuantica,
  .quantum-breathe,
  .quantum-shapes > div {
    animation: none !important;
  }
  .hero-cuantica { background-position: 0% 50%; }
}