/**
 * Mesh Background - Fondo de blobs animados con soporte dark/light
 * Paleta: UNAP (unap-primary, unap-success, unap-info, unap-light, unap-dark)
 */

/* ============================================
   CONTENEDOR MESH
   ============================================ */
.mesh-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  background-color: #f2f8fb; /* unap-primary tono 50 aprox. */
  transition: background-color 0.8s ease;
}

.dark .mesh-bg {
  background-color: #020d14; /* unap-dark muy oscuro */
}

.mesh-bg .blur-layer {
  position: relative;
  width: 100%;
  height: 100%;
  filter: blur(140px);
  opacity: 0.85;
  transform: translateZ(0); /* GPU acceleration */
  transition: opacity 0.8s ease;
}

.dark .mesh-bg .blur-layer {
  opacity: 0.6;
}

.mesh-bg .blob {
  position: absolute;
  border-radius: 50%;
  transition: background-color 0.8s ease;
}

/* ----- Colores Modo Claro (paleta UNAP suave) ----- */
.mesh-bg .blob-1 { background-color: #c3dcec; } /* primary claro */
.mesh-bg .blob-2 { background-color: #c5ecf0; } /* success claro */
.mesh-bg .blob-3 { background-color: #d6d9ea; } /* info claro */
.mesh-bg .blob-4 { background-color: #d7e5fa; } /* light */
.mesh-bg .blob-5 { background-color: #f2f8fb; } /* primary 50 */

/* ----- Colores Modo Oscuro ----- */
.dark .mesh-bg .blob-1 { background-color: #023b60; } /* primary oscuro */
.dark .mesh-bg .blob-2 { background-color: #08606a; } /* success oscuro */
.dark .mesh-bg .blob-3 { background-color: #3c4375; } /* info oscuro */
.dark .mesh-bg .blob-4 { background-color: #062439; } /* dark */
.dark .mesh-bg .blob-5 { background-color: #252d39; } /* secondary oscuro */

/* ----- Posiciones & Tamaños ----- */
.mesh-bg .pos-tl { top: -10%; left: -10%; width: 55vw; height: 55vh; }
.mesh-bg .pos-tr { top: -20%; right: -15%; width: 65vw; height: 65vh; }
.mesh-bg .pos-bl { bottom: -10%; left: -10%; width: 60vw; height: 60vh; }
.mesh-bg .pos-br { bottom: -15%; right: -10%; width: 65vw; height: 65vh; }
.mesh-bg .pos-c  { top: 25%;  left: 20%;  width: 65vw; height: 65vh; }

/* ----- Animaciones Orgánicas ----- */
@keyframes mesh-move1 {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate(8vw, 15vh) scale(1.1) rotate(45deg); }
  100% { transform: translate(-5vw, 5vh) scale(0.95) rotate(90deg); }
}
@keyframes mesh-move2 {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate(-10vw, 8vh) scale(1.05) rotate(-20deg); }
  100% { transform: translate(5vw, -5vh) scale(1) rotate(-45deg); }
}
@keyframes mesh-move3 {
  0%   { transform: translate(0, 0) scale(1.05) rotate(0deg); }
  50%  { transform: translate(5vw, -12vh) scale(0.95) rotate(30deg); }
  100% { transform: translate(-8vw, 6vh) scale(1) rotate(60deg); }
}
@keyframes mesh-move4 {
  0%   { transform: translate(0, 0) scale(0.95) rotate(0deg); }
  50%  { transform: translate(-12vw, -15vh) scale(1.1) rotate(-30deg); }
  100% { transform: translate(8vw, 8vh) scale(1) rotate(-60deg); }
}
@keyframes mesh-moveCenter {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate(10vw, -10vh) scale(1.2) rotate(180deg); }
  100% { transform: translate(-10vw, 10vh) scale(0.9) rotate(360deg); }
}

.mesh-bg .pos-tl { animation: mesh-move1 18s infinite alternate ease-in-out; }
.mesh-bg .pos-tr { animation: mesh-move2 22s infinite alternate ease-in-out; }
.mesh-bg .pos-bl { animation: mesh-move3 20s infinite alternate ease-in-out; }
.mesh-bg .pos-br { animation: mesh-move4 24s infinite alternate ease-in-out; }
.mesh-bg .pos-c  { animation: mesh-moveCenter 15s infinite alternate ease-in-out; }

/* Respeta preferencia de reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  .mesh-bg .blob { animation: none !important; }
}