/* ============================================================
   NOCTUA CARE — ANIMACIONES
   ============================================================ */

/* --- Keyframes --- */

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

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes floatLeaf {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-8px) rotate(2deg); }
  66%       { transform: translateY(-4px) rotate(-1deg); }
}

@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0); }
  50%       { opacity: 1; transform: scale(1); }
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  15%       { transform: scale(1.22); }
  30%       { transform: scale(1); }
  45%       { transform: scale(1.15); }
  60%       { transform: scale(1); }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes shimmer {
  0%   { opacity: 0.4; }
  50%  { opacity: 1; }
  100% { opacity: 0.4; }
}

/* --- Clases de reveal por scroll --- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.from-left {
  transform: translateX(-32px);
}

.reveal.from-right {
  transform: translateX(32px);
}

.reveal.visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Stagger delays para grupos de tarjetas */
.stagger > *:nth-child(1) { transition-delay: 0ms;   }
.stagger > *:nth-child(2) { transition-delay: 100ms;  }
.stagger > *:nth-child(3) { transition-delay: 200ms;  }
.stagger > *:nth-child(4) { transition-delay: 300ms;  }
.stagger > *:nth-child(5) { transition-delay: 400ms;  }

/* --- Sparkles decorativos en hero --- */

.sparkle-group {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.sparkle-dot {
  position: absolute;
  border-radius: var(--radius-full);
  background-color: var(--color-accent-light);
}

.sparkle-dot:nth-child(1) {
  width: 8px; height: 8px;
  top: 18%; left: 60%;
  animation: sparkle 2.8s 0s ease-in-out infinite;
}
.sparkle-dot:nth-child(2) {
  width: 5px; height: 5px;
  top: 35%; left: 78%;
  animation: sparkle 3.4s 0.6s ease-in-out infinite;
}
.sparkle-dot:nth-child(3) {
  width: 6px; height: 6px;
  top: 65%; left: 52%;
  animation: sparkle 2.5s 1.2s ease-in-out infinite;
}
.sparkle-dot:nth-child(4) {
  width: 4px; height: 4px;
  top: 50%; left: 85%;
  animation: sparkle 3.8s 0.3s ease-in-out infinite;
}
.sparkle-dot:nth-child(5) {
  width: 7px; height: 7px;
  top: 80%; left: 70%;
  animation: sparkle 3.1s 1.8s ease-in-out infinite;
}

/* --- Hojas flotantes decorativas --- */

.leaf-deco {
  position: absolute;
  pointer-events: none;
}

.leaf-deco svg {
  animation: floatLeaf 6s ease-in-out infinite;
}

.leaf-deco:nth-child(2) svg {
  animation-delay: 1.5s;
  animation-duration: 7s;
}

/* --- Icono de servicio hover --- */

.service-icon-wrap {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.service-icon-wrap:hover {
  transform: translateY(-5px);
  filter: drop-shadow(0 8px 16px rgba(184,135,107,0.25));
}

/* --- Paso de proceso hover --- */

.step-item {
  transition: transform var(--transition-base);
}

.step-item:hover {
  transform: translateY(-4px);
}

.step-item:hover .step-number {
  background-color: var(--color-accent);
  color: var(--color-white);
  transform: scale(1.1);
}

.step-number {
  transition: background-color var(--transition-base), color var(--transition-base), transform var(--transition-base);
}