/*
===============================================
GALERIA.CSS — Levitación 3D + Barrido de Destello
===============================================
*/

/* 1. EL FONDO (Bastones Gruesos + Difuminado) */
.galeria {
  position: relative;
  overflow: hidden;
  padding: 100px 0;

  /* Múltiples fondos: El difuminado blanco arriba de los bastones lila */
  background-image:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 60%,
      #ffffff 100%
    ),
    repeating-linear-gradient(
      to right,
      #ffffff,
      #ffffff 50px,
      var(--color-lila-fondo-rayas) 50px,
      var(--color-lila-fondo-rayas) 100px
    );

  background-color: #ffffff;
}

/* Divisor superior sutil */
.galeria::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(207, 204, 215, 0.6),
    transparent
  );
}

/* 2. CONTENEDOR (Perspectiva 3D activada) */
.galeria-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  width: 100%;
  /* CRUCIAL PARA LA OPCIÓN 1: Le da profundidad a la pantalla */
  perspective: 1000px;
}

/* 3. CONTENEDOR DE LA ILUSTRACIÓN (Aquí ocurre la magia 3D) */
.galeria-ilustracion {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  border-radius: 20px;

  /* Aplicamos la rotación y flotación al contenedor entero */
  animation: magia3DBreathe 5s ease-in-out infinite;
}

/* 4. LA IMAGEN BASE */
.galeria-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  border: 1px solid rgba(207, 204, 215, 0.8);
  /* Evita artefactos visuales feos al girar en 3D */
  backface-visibility: hidden;
}

/* 5. EL DESTELLO MÁGICO (Opción 3) */
.galeria-ilustracion::after {
  content: "";
  position: absolute;
  inset: 0; /* Se pega exactamente a los bordes de la imagen */
  border-radius: 20px;

  /* Creamos el rayo de luz inclinado */
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.7) 50%,
    /* Blanco brillante en el medio */ transparent 80%
  );

  /* Lo hacemos muy ancho para poder desplazarlo */
  background-size: 300% 100%;
  /* Lo escondemos a la derecha para empezar */
  background-position: 200% 0;

  /* Animación del barrido de luz */
  animation: barridoMagico 4s linear infinite;

  pointer-events: none; /* Deja que el usuario pueda hacer clic en la imagen si quiere */
  z-index: 2; /* Por encima de la foto */
}

/* --- LOS KEYFRAMES DE ANIMACIÓN --- */

/* Animación 1: Flota, se agranda y gira en 3D */
@keyframes magia3DBreathe {
  0%,
  100% {
    transform: translateY(0) rotateY(0deg) scale(1);
    box-shadow: 0 10px 25px rgba(197, 164, 183, 0.2);
  }
  50% {
    /* Sube 25px, gira 15 grados a la derecha y crece un pelín */
    transform: translateY(-25px) rotateY(15deg) scale(1.03);
    /* La sombra se agranda muchísimo y se pone más intensa */
    box-shadow: 0 35px 65px rgba(197, 164, 183, 0.5);
  }
}

/* Animación 2: La luz barre la imagen */
@keyframes barridoMagico {
  0% {
    background-position: 200% 0; /* Empieza fuera, a la derecha */
  }
  100% {
    background-position: -100% 0; /* Termina fuera, a la izquierda */
  }
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 768px) {
  .galeria {
    padding: 80px 0;
  }
  .galeria-ilustracion {
    max-width: 320px;
  }
}

@media (max-width: 480px) {
  .galeria {
    padding: 60px 0;
    /* Bastones adaptados para celular */
    background-image:
      linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 70%,
        #ffffff 100%
      ),
      repeating-linear-gradient(
        to right,
        #ffffff,
        #ffffff 30px,
        var(--color-lila-fondo-rayas) 30px,
        var(--color-lila-fondo-rayas) 60px
      );
  }
  .galeria-ilustracion {
    max-width: 280px;
  }
}

/* OPTIMIZACIÓN DE ACCESIBILIDAD */
@media (prefers-reduced-motion: reduce) {
  .galeria-ilustracion,
  .galeria-ilustracion::after {
    animation: none; /* Apaga las animaciones si el usuario lo prefiere en su sistema */
  }
  .galeria-ilustracion {
    box-shadow: 0 15px 35px rgba(197, 164, 183, 0.3);
  }
}