/**
 * microinteractions.css
 * Sistema avanzado de microinteracciones para mejorar engagement y experiencia de usuario
 * Respeta prefers-reduced-motion y optimizado para performance
 */

/* === Hover Effects === */

/* Efecto de subrayado animado */
.hover-underline {
  position: relative;
}

.hover-underline::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: var(--color-accent, oklch(0.63 0.24 180));
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s ease-out;
}

.hover-underline:hover::after,
.hover-underline:focus::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Efecto de resplandor suave */
.hover-glow {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-glow:hover,
.hover-glow:focus {
  box-shadow: 0 0 15px var(--glow-color, rgba(20, 184, 166, 0.5));
}

/* Efecto de elevación */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hover-lift:hover,
.hover-lift:focus {
  transform: translateY(-5px);
}

/* Efecto de expansión */
.hover-expand {
  transform: scale(1);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hover-expand:hover,
.hover-expand:focus {
  transform: scale(1.05);
}

/* === Focus Effects === */

/* Anillo de focus personalizado */
.custom-focus-ring:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring-color, rgba(20, 184, 166, 0.5));
  transition: box-shadow 0.2s ease-out;
}

/* === Fade Effects === */

.fade-in {
  opacity: 0;
  animation: fadeIn 0.5s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.5s ease-out forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === Button Effects === */

/* Efecto de pulso */
.btn-pulse {
  position: relative;
  overflow: hidden;
}

.btn-pulse:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%;
  opacity: 0;
  transition: all 0.5s ease-out;
}

.btn-pulse:active:before {
  opacity: 0.3;
  background-size: 0%;
  transition: 0s;
}

/* Efectos para botones principales */
.btn-primary {
  position: relative;
  z-index: 1;
  transition: all 0.3s;
}

.btn-primary:before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.8);
  background: var(--btn-hover-bg, oklch(0.63 0.24 180));
  transition: all 0.3s;
}

.btn-primary:hover:before {
  opacity: 1;
  transform: scale(1);
}

/* === Tag Effects === */

.tag-hover {
  transition: all 0.3s;
}

.tag-hover:hover {
  transform: translateY(-2px);
}

/* === Card Effects === */

.card-hover {
  transition: all 0.3s;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

/* === Scroll Effects === */

.scroll-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s, transform 0.6s;
}

.scroll-fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* === Skeleton Loading === */

.skeleton-loading {
  position: relative;
  background: linear-gradient(90deg,
    var(--skeleton-bg, #f0f0f0) 25%,
    var(--skeleton-highlight, #f8f8f8) 50%,
    var(--skeleton-bg, #f0f0f0) 75%);
  background-size: 200% 100%;
  animation: skeletonLoading 1.5s infinite;
  border-radius: 4px;
  height: 1em;
}

@keyframes skeletonLoading {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Esqueletos oscuros para modo oscuro */
:root.dark .skeleton-loading {
  --skeleton-bg: #2a2a2a;
  --skeleton-highlight: #3a3a3a;
}

/* === Accesibilidad === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .hover-underline::after,
  .hover-glow,
  .hover-lift,
  .hover-expand,
  .fade-in,
  .fade-in-up,
  .btn-pulse:before,
  .btn-primary,
  .tag-hover,
  .card-hover,
  .scroll-fade-in {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* === Utility Classes === */

/* Gestión de delays para animaciones en cascada */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* Duraciones personalizadas */
.duration-300 { animation-duration: 300ms; }
.duration-500 { animation-duration: 500ms; }
.duration-700 { animation-duration: 700ms; }
.duration-1000 { animation-duration: 1000ms; }

/* === Interacciones específicas para el blog === */

/* Efecto para el hover de las tarjetas de artículos */
.blog-card {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.blog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.15), 
              0 5px 15px -5px rgba(0, 0, 0, 0.1);
}

:root.dark .blog-card:hover {
  box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.5), 
              0 5px 15px -5px rgba(20, 184, 166, 0.2);
  border-color: rgba(20, 184, 166, 0.3);
}

/* Efecto para las imágenes en hover */
.image-hover-zoom {
  overflow: hidden;
}

.image-hover-zoom img {
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.image-hover-zoom:hover img {
  transform: scale(1.05);
}