/* ============================================
   FAMA Animated Background - Apple-like
   Basado en: https://codepen.io/sylvaingarnot/pen/OJqoXaR
   ============================================ */

/* Contenedor del fondo animado */
.fama-animated-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--fama-z-background);
  overflow: hidden;
  background: #000;
}

/* Gradiente animado principal */
.fama-animated-background::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: 
    radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 20%, rgba(120, 219, 255, 0.3) 0%, transparent 50%);
  animation: rotate 20s linear infinite;
  transform-origin: center center;
}

.fama-animated-background::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: 
    radial-gradient(circle at 60% 30%, rgba(255, 200, 100, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 30% 70%, rgba(100, 200, 255, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(200, 100, 255, 0.2) 0%, transparent 50%);
  animation: rotate 25s linear infinite reverse;
  transform-origin: center center;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Variación más suave y Apple-like */
.fama-animated-background-soft {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--fama-z-background);
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.fama-animated-background-soft::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: 
    radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 119, 198, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 40% 20%, rgba(120, 219, 255, 0.4) 0%, transparent 50%);
  animation: rotate 30s linear infinite;
  transform-origin: center center;
}

.fama-animated-background-soft::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: 
    radial-gradient(circle at 60% 30%, rgba(255, 200, 100, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 30% 70%, rgba(100, 200, 255, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(200, 100, 255, 0.3) 0%, transparent 50%);
  animation: rotate 35s linear infinite reverse;
  transform-origin: center center;
}

/* Versión minimalista Apple - Efecto arcoíris suave */
.fama-animated-background-apple {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--fama-z-background);
  overflow: hidden;
  background: #f5f5f7;
}

.fama-animated-background-apple::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: 
    radial-gradient(circle at 20% 50%, rgba(100, 210, 255, 0.18) 0%, transparent 50%), /* Cian brillante */
    radial-gradient(circle at 80% 80%, rgba(255, 120, 200, 0.18) 0%, transparent 50%), /* Rosa/Magenta */
    radial-gradient(circle at 40% 20%, rgba(180, 140, 255, 0.16) 0%, transparent 50%), /* Violeta suave */
    radial-gradient(circle at 60% 70%, rgba(120, 200, 255, 0.15) 0%, transparent 50%); /* Azul claro */
  animation: rotate 40s linear infinite;
  transform-origin: center center;
  filter: blur(80px);
}

.fama-animated-background-apple::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: 
    radial-gradient(circle at 60% 30%, rgba(200, 180, 255, 0.16) 0%, transparent 50%), /* Lavanda */
    radial-gradient(circle at 30% 70%, rgba(255, 150, 210, 0.15) 0%, transparent 50%), /* Rosa suave */
    radial-gradient(circle at 70% 60%, rgba(130, 190, 255, 0.14) 0%, transparent 50%), /* Azul cielo */
    radial-gradient(circle at 50% 50%, rgba(220, 150, 255, 0.12) 0%, transparent 50%); /* Violeta claro */
  animation: rotate 45s linear infinite reverse;
  transform-origin: center center;
  filter: blur(80px);
}

/* Asegurar que el body no tenga overflow */
body {
  position: relative;
  overflow-x: hidden;
}

/* Ajustar z-index de elementos principales */
.fama-shell {
  position: relative;
  z-index: var(--fama-z-content);
}