/* ==========================================================================
   ANIMACIONES, EFECTOS DE LUZ Y SISTEMA DE MARIPOSAS
   ========================================================================== */

/* Flote suave orgánico */
@keyframes gentleFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-9px) rotate(2deg);
  }
}

/* Pulso dorado */
@keyframes goldPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(200, 155, 60, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(200, 155, 60, 0);
  }
}

/* Pulso púrpura */
@keyframes purplePulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(110, 63, 160, 0.45);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(110, 63, 160, 0);
  }
}

/* Aleteo de mariposa en SVG */
@keyframes wingFlap {
  0%, 100% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(0.25);
  }
}

/* Mariposas ambientales flotantes */
.ambient-butterfly {
  position: absolute;
  pointer-events: none;
  z-index: 4;
  opacity: 0.85;
  filter: drop-shadow(0 4px 10px rgba(75, 38, 120, 0.25));
  animation: floatFlight 18s ease-in-out infinite;
}

@keyframes floatFlight {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(35px, -25px) rotate(6deg);
  }
  50% {
    transform: translate(70px, 10px) rotate(-4deg);
  }
  75% {
    transform: translate(30px, -35px) rotate(5deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* =========================================================
   MARIPOSA COMO CURSOR + ESCARCHA BRILLANTE (DESKTOP)
   ========================================================= */

/* Ocultar cursor nativo cuando la mariposa está activa */
body.butterfly-cursor-enabled,
body.butterfly-cursor-enabled a,
body.butterfly-cursor-enabled button,
body.butterfly-cursor-enabled [role="button"],
body.butterfly-cursor-enabled .btn,
body.butterfly-cursor-enabled .btn-primary,
body.butterfly-cursor-enabled .btn-outline,
body.butterfly-cursor-enabled .btn-primary-gradient,
body.butterfly-cursor-enabled .btn-secondary-glass,
body.butterfly-cursor-enabled .btn-header-cta,
body.butterfly-cursor-enabled .cta-btn,
body.butterfly-cursor-enabled .nav-links a,
body.butterfly-cursor-enabled .slider-dot,
body.butterfly-cursor-enabled .slider-btn,
body.butterfly-cursor-enabled .chat-bubble-toggle,
body.butterfly-cursor-enabled .faq-question,
body.butterfly-cursor-enabled .faq-question-btn,
body.butterfly-cursor-enabled .faq-item,
body.butterfly-cursor-enabled select,
body.butterfly-cursor-enabled .service-card,
body.butterfly-cursor-enabled .interactive-element {
  cursor: none !important;
}

/* Mantener cursor I-beam en campos de texto */
body.butterfly-cursor-enabled input[type="text"],
body.butterfly-cursor-enabled input[type="email"],
body.butterfly-cursor-enabled input[type="tel"],
body.butterfly-cursor-enabled input[type="date"],
body.butterfly-cursor-enabled textarea {
  cursor: text !important;
}

/* Contenedor de la Mariposa Cursor */
#butterfly-cursor-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  pointer-events: none;
  z-index: 100000;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.25, 1, 0.5, 1), filter 0.3s ease;
  will-change: transform, opacity;
  filter: drop-shadow(0 0 12px rgba(228, 199, 122, 0.85)) drop-shadow(0 0 18px rgba(184, 137, 240, 0.6));
}

#butterfly-cursor-container.visible {
  opacity: 1;
}

#butterfly-cursor-container.hovering {
  filter: drop-shadow(0 0 16px rgba(228, 199, 122, 0.98)) drop-shadow(0 0 24px rgba(216, 180, 254, 0.85));
}

#butterfly-cursor-container.text-hover {
  opacity: 0.35;
}

/* Lottie SVG interior */
.butterfly-lottie-anim {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Puntero guía sutil en el punto de clic (antena/cabeza) */
.butterfly-hotspot-glint {
  position: absolute;
  top: 15%;
  left: 50%;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #ffffff 40%, rgba(228, 199, 122, 0.9) 75%, transparent 100%);
  border-radius: 50%;
  box-shadow: 0 0 8px 3px rgba(255, 255, 255, 0.9), 0 0 14px 5px rgba(228, 199, 122, 0.8);
  pointer-events: none;
  opacity: 0.75;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#butterfly-cursor-container.hovering .butterfly-hotspot-glint {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.5);
  box-shadow: 0 0 10px 4px rgba(255, 255, 255, 1), 0 0 18px 7px rgba(228, 199, 122, 0.95);
}

/* Canvas para la Escarcha / Glitter */
#escarcha-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 99999;
}

/* Animaciones de entrada por scroll */
.reveal-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal-fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Accesibilidad: Reducción de Movimiento */
@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;
  }
  .cursor-butterfly, .ambient-butterfly {
    display: none !important;
  }
}