/* animations.css — Scroll reveals + transitions. No layout changes. */

/* ── Keyframes ── */

@keyframes cs-fade-up {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cs-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes cs-scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Scroll reveal base ── */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  will-change: opacity, transform;
}

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

/* Variante: sólo fade (sin movimiento) */
.reveal--fade {
  transform: none;
}
.reveal--fade.is-visible {
  transform: none;
}

/* Variante: escala */
.reveal--scale {
  transform: scale(0.95);
}
.reveal--scale.is-visible {
  transform: scale(1);
}

/* ── Stagger delays ── */
.reveal--d1 { transition-delay: 0.08s; }
.reveal--d2 { transition-delay: 0.16s; }
.reveal--d3 { transition-delay: 0.24s; }
.reveal--d4 { transition-delay: 0.32s; }
.reveal--d5 { transition-delay: 0.40s; }
.reveal--d6 { transition-delay: 0.48s; }
.reveal--d7 { transition-delay: 0.56s; }
.reveal--d8 { transition-delay: 0.64s; }
.reveal--d9 { transition-delay: 0.72s; }

/* ── Hover enhancements para cards ── */

.qa-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.qa-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* .caso-card hover se define en css/pages/casos-de-exito.css */

.ssl-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ssl-card:hover {
  transform: translateY(-4px);
}

.partners-benefit-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.why-item {
  transition: transform 0.25s ease;
}
.why-item:hover {
  transform: translateY(-3px);
}

/* ── Botones: efecto ripple suave ── */
.btn {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease,
              border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.btn:active {
  transform: scale(0.97);
}

/* ── Logo: suavizar el shrink ── */
.image-10 {
  transition: height 0.35s ease, opacity 0.25s ease;
}

/* ── Nav links: subrayado animado ── */
.nav-link-2 {
  transition: color 0.2s ease, border-color 0.2s ease;
}

/* ── Brands logos: entrada escalonada ── */
.brands__logo {
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}
.brands__logo:hover {
  transform: scale(1.05);
}

/* ── Hero trust logos ── */
.hero__trust-logo {
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.hero__trust-logo:hover {
  transform: scale(1.08);
}

/* Reduce motion: respeta preferencias del usuario */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--fade,
  .reveal--scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .qa-card:hover,
  .caso-card:hover,
  .ssl-card:hover,
  .why-item:hover {
    transform: none;
  }
}