/* ==========================================================================
   SilenVet — Animaciones discretas
   Fade-in al scroll, transiciones suaves y hover elegantes
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Estado inicial de elementos con reveal
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.reveal--delay {
  transition-delay: 0.15s;
}

/* Visible cuando entra en viewport */
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   2. Fade-in de la cabecera al cargar
   -------------------------------------------------------------------------- */
.site-header {
  animation: fadeInDown 0.6s ease forwards;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   3. Hero: entrada escalonada del contenido
   -------------------------------------------------------------------------- */
.hero__content.reveal.is-visible .hero__intro {
  animation: fadeIn 0.6s ease 0.1s both;
}

.hero__content.reveal.is-visible .hero__title-wrap {
  animation: fadeIn 0.6s ease 0.2s both;
}

.hero__content.reveal.is-visible .hero__quote {
  animation: fadeIn 0.6s ease 0.35s both;
}

.hero__content.reveal.is-visible .hero__author {
  animation: fadeIn 0.6s ease 0.5s both;
}

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

/* --------------------------------------------------------------------------
   4. Hover en tarjetas de servicio (refuerzo sutil)
   -------------------------------------------------------------------------- */
.service-card {
  will-change: transform;
}

.service-card__icon {
  transition: transform 0.4s ease;
}

.service-card:hover .service-card__icon {
  transform: scale(1.08);
}

/* --------------------------------------------------------------------------
   5. Hover en tarjetas de valor
   -------------------------------------------------------------------------- */
.value-card {
  transition: transform 0.3s ease;
}

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

.value-card__icon-wrap img {
  transition: transform 0.4s ease;
}

.value-card:hover .value-card__icon-wrap img {
  transform: scale(1.05);
}

/* --------------------------------------------------------------------------
   6. Iconos del timeline
   -------------------------------------------------------------------------- */
.process__icon img {
  transition: transform 0.3s ease;
}

.process__step:hover .process__icon img {
  transform: scale(1.06);
}

/* --------------------------------------------------------------------------
   7. Enlaces de contacto
   -------------------------------------------------------------------------- */
.contact__item {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

a.contact__item:hover {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   8. Respeto a preferencias de movimiento reducido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .site-header {
    animation: none;
  }

  .hero__content.reveal.is-visible .hero__intro,
  .hero__content.reveal.is-visible .hero__title-wrap,
  .hero__content.reveal.is-visible .hero__quote,
  .hero__content.reveal.is-visible .hero__author {
    animation: none;
  }

  .service-card:hover,
  .service-card:hover .service-card__icon,
  .value-card:hover,
  .value-card:hover .value-card__icon-wrap img,
  .process__step:hover .process__icon img,
  a.contact__item:hover {
    transform: none;
  }
}