/* ============================================================================
   BADGES EFFECT v2.0
   Solo para Poema, Relato y Reflexión
   Sistema completamente renovado con temas consistentes
   ============================================================================ */

/* Efecto de recorte irregular para badges de categorías */
.card-category,
.reading-category {
  position: relative;
  background: none !important;
  overflow: visible;
}

.card-category::before,
.reading-category::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: var(--category-bg);
  clip-path: polygon(
    3% 2%, 8% 0%, 15% 1%, 22% 0%, 30% 2%, 38% 1%, 45% 0%, 53% 1%, 
    60% 0%, 68% 2%, 75% 1%, 82% 0%, 90% 2%, 97% 1%, 99% 5%, 100% 12%, 
    99% 20%, 100% 28%, 98% 35%, 100% 43%, 99% 50%, 100% 58%, 98% 65%, 
    100% 73%, 99% 80%, 100% 88%, 98% 95%, 95% 98%, 88% 100%, 80% 98%, 
    73% 100%, 65% 97%, 58% 100%, 50% 98%, 43% 100%, 35% 98%, 28% 100%, 
    20% 99%, 12% 100%, 5% 98%, 2% 95%, 0% 88%, 2% 80%, 0% 73%, 1% 65%, 
    0% 58%, 2% 50%, 0% 43%, 1% 35%, 0% 28%, 2% 20%, 1% 12%, 0% 5%
  );
  z-index: -1;
  animation: badgeFlutter 4s ease-in-out infinite;
}

.card-category.poema::before {
  --category-bg: rgba(212, 175, 55, 0.95);
}

.card-category.relato::before {
  --category-bg: rgba(139, 38, 53, 0.95);
}

.card-category.reflexion::before {
  --category-bg: rgba(135, 169, 107, 0.95);
}

.reading-category.poema::before {
  --category-bg: rgba(212, 175, 55, 0.2);
}

.reading-category.relato::before {
  --category-bg: rgba(139, 38, 53, 0.2);
}

.reading-category.reflexion::before {
  --category-bg: rgba(135, 169, 107, 0.2);
}

/* Animación de viento en los badges */
@keyframes badgeFlutter {
  0%, 100% {
    transform: rotate(-1deg);
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.2));
  }
  25% {
    transform: rotate(0.5deg) translateY(-1px);
    filter: drop-shadow(3px 4px 4px rgba(0, 0, 0, 0.25));
  }
  50% {
    transform: rotate(-0.5deg) translateY(0.5px);
    filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.22));
  }
  75% {
    transform: rotate(0.3deg) translateY(-0.5px);
    filter: drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.23));
  }
}

/* ============================================================================
   ICONOS PALPITANTES
   ============================================================================ */

/* Icono de Poema - Corazón palpitante */
.card-category.poema i,
.reading-category.poema i,
.nav-filter-btn[data-filter="poema"] i {
  animation: heartbeat 1.5s ease-in-out infinite;
  transform-origin: center;
}


/* Icono de Relato - Libro abriéndose */
.card-category.relato i,
.reading-category.relato i,
.nav-filter-btn[data-filter="relato"] i {
  animation: bookOpen 2s ease-in-out infinite;
  transform-origin: center;
}

@keyframes bookOpen {
  0%, 100% {
    transform: scale(1) rotateY(0deg);
  }
  50% {
    transform: scale(1.1) rotateY(15deg);
  }
}

/* Icono de Reflexión - Bombilla parpadeando */
.card-category.reflexion i,
.reading-category.reflexion i,
.nav-filter-btn[data-filter="reflexion"] i {
  animation: lightbulb 2.5s ease-in-out infinite;
  transform-origin: center;
}

@keyframes lightbulb {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  25% {
    transform: scale(1.2);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
  75% {
    transform: scale(1.2);
    opacity: 0.9;
  }
}

/* Responsive - reducir animación en móviles */
@media (max-width: 768px) {
  @keyframes badgeFlutter {
    0%, 100% {
      transform: rotate(-0.5deg);
    }
    50% {
      transform: rotate(0.5deg);
    }
  }
  
  @keyframes heartbeat {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
  }
  
  @keyframes bookOpen {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }
  
  @keyframes lightbulb {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.1);
      opacity: 0.9;
    }
  }
}

/* Desactivar animaciones si el usuario prefiere reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  .card-category::before,
  .reading-category::before,
  .card-category i,
  .reading-category i,
  .nav-filter-btn i {
    animation: none;
  }
}