/*
Theme Name: Variations Child
Template: variations
Version: 1.0
*/
/*
 * ==========================================
 * ATLANTICA RECORDS - CUSTOM PREMIUM STYLES (V4)
 * ==========================================
 * Pega este código en Apariencia > Personalizar > CSS Adicional
 */

/* 
 * 1. PREVENIR EL RECORTE DEL VINILO
 * Asegura que ningún contenedor del tema recorte el vinilo al salir.
 */
.product,
.product a,
.product .woocommerce-loop-product__link,
.product .post-thumbnail,
.product .woocommerce-loop-product__header,
.product .woocommerce-loop-product__link img {
  overflow: visible !important;
}

/* Contenedor del vinilo y carátula */
.atlantica-vinyl-wrapper {
  position: relative !important;
  width: 100% !important;
  max-width: 280px !important;
  aspect-ratio: 1 / 1 !important;
  overflow: visible !important;
  margin: 0 auto !important;
  display: block !important;
}

/* Funda de la carátula (Sleeve) */
.atlantica-vinyl-cover {
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 4px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease !important;
  background-color: #12131a !important;
}

.atlantica-vinyl-cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  display: block !important;
}

/* 
 * 2. DISCO DE VINILO CON REFLEJOS 3D REALISTAS
 * Un círculo negro liso al girar sobre su propio centro parece estático.
 * Para solucionar esto, aplicamos:
 * - Un degradado cónico (conic-gradient) que simula los reflejos del brillo de la luz en 3D.
 * - Surcos concéntricos con degradados radiales repetidos de alto contraste.
 */
.atlantica-vinyl-disk {
  position: absolute !important;
  top: 5% !important;
  left: 5% !important;
  z-index: 5 !important;
  width: 90% !important;
  height: 90% !important;
  border-radius: 50% !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
  pointer-events: none !important;
  display: block !important;
  background-color: #0f1013 !important;
  
  /* Surcos concéntricos profundos + Reflejos de luz cónicos ("brillo mariposa") */
  background-image: 
    /* 1. Destellos de luz en diagonal (giran con el disco) */
    conic-gradient(
      from 0deg, 
      transparent 10%, 
      rgba(255, 255, 255, 0.08) 18%, 
      rgba(255, 255, 255, 0.18) 25%, 
      rgba(255, 255, 255, 0.08) 32%, 
      transparent 45%, 
      transparent 60%, 
      rgba(255, 255, 255, 0.08) 68%, 
      rgba(255, 255, 255, 0.18) 75%, 
      rgba(255, 255, 255, 0.08) 82%, 
      transparent 90%
    ),
    /* 2. Surcos del disco de vinilo en alta definición */
    repeating-radial-gradient(
      circle, 
      #1e1f26 0px, 
      #1e1f26 1px, 
      #0b0c10 2px, 
      #0b0c10 4px
    ) !important;
}

/* 
 * 3. LA GALLETA CENTRAL (ETIQUETA) ASIMÉTRICA
 * Dividimos la galleta diagonalmente en dos colores (Azul Atlantica y Púrpura Neon).
 * Al girar, la división de colores crea un efecto visual dinámico espectacular y muy visible.
 */
.atlantica-vinyl-disk::after {
  content: '' !important;
  position: absolute !important;
  top: 35% !important;
  left: 35% !important;
  width: 30% !important;
  height: 30% !important;
  border-radius: 50% !important;
  
  /* Diseño en dos colores complementarios de tu identidad */
  background: linear-gradient(135deg, #0052ff 50%, #b026ff 50%) !important;
  
  border: 2px solid #08090c !important;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.8) !important;
}

/* Agujero central del tocadiscos */
.atlantica-vinyl-disk::before {
  content: '' !important;
  position: absolute !important;
  top: 46% !important;
  left: 46% !important;
  width: 8% !important;
  height: 8% !important;
  border-radius: 50% !important;
  background-color: #08090c !important;
  z-index: 6 !important;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.9) inset !important;
}

/* ==========================================
 * ANIMACIÓN HOVER
 * ==========================================
 */

.product:hover .atlantica-vinyl-cover,
.atlantica-vinyl-wrapper:hover .atlantica-vinyl-cover {
  transform: translateX(-18%) !important;
  box-shadow: 5px 15px 30px rgba(0, 0, 0, 0.5) !important;
}

/* El disco se desliza un 28% y rota en 3D */
.product:hover .atlantica-vinyl-disk,
.atlantica-vinyl-wrapper:hover .atlantica-vinyl-disk {
  transform: translateX(28%) rotate(360deg) !important;
}

/* Rotación constante y suave una vez extraído */
@keyframes spinVinylLoop {
  from { transform: translateX(28%) rotate(0deg); }
  to { transform: translateX(28%) rotate(360deg); }
}

.product:hover .atlantica-vinyl-disk,
.atlantica-vinyl-wrapper:hover .atlantica-vinyl-disk {
  animation: spinVinylLoop 3s linear infinite 0.5s !important;
}

/* Soporte móvil táctil sin hover */
@media (hover: none) {
  .product:active .atlantica-vinyl-cover {
    transform: translateX(-12%) !important;
  }
  .product:active .atlantica-vinyl-disk {
    transform: translateX(20%) rotate(180deg) !important;
  }
}