/*
 * Setvia Marketing — Animations
 * Sistema de animaciones en tres tiers.
 * GPU-only: solo transform y opacity. Respeta prefers-reduced-motion.
 */


/* ============================================================
   TIER 1 — SCROLL REVEAL
   ============================================================ */

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

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

/* Variantes de dirección */
.svm-reveal--left  { transform: translateX(-28px); }
.svm-reveal--right { transform: translateX(28px); }
.svm-reveal--scale { transform: scale(0.94); }

.svm-reveal--left.is-visible,
.svm-reveal--right.is-visible,
.svm-reveal--scale.is-visible { transform: none; }


/* ── Stagger en grids ──────────────────────────────────────── */

.svm-stagger > .svm-reveal {
  opacity: 0;
  transform: translateY(28px);
}

.svm-stagger.is-triggered > .svm-reveal {
  opacity: 1;
  transform: translateY(0);
}

.svm-stagger.is-triggered > .svm-reveal:nth-child(1) { transition-delay:   0ms; }
.svm-stagger.is-triggered > .svm-reveal:nth-child(2) { transition-delay:  80ms; }
.svm-stagger.is-triggered > .svm-reveal:nth-child(3) { transition-delay: 160ms; }
.svm-stagger.is-triggered > .svm-reveal:nth-child(4) { transition-delay: 240ms; }
.svm-stagger.is-triggered > .svm-reveal:nth-child(5) { transition-delay: 320ms; }
.svm-stagger.is-triggered > .svm-reveal:nth-child(6) { transition-delay: 400ms; }


/* ── Hero gradient mesh ────────────────────────────────────── */

.svm-hero { isolation: isolate; }

.svm-hero::before,
.svm-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  filter: blur(72px);
}

.svm-hero::before {
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(10, 92, 42, 0.10) 0%, transparent 70%);
  top: -120px;
  right: -80px;
  animation: svm-orb-a 9s ease-in-out infinite alternate;
}

.svm-hero::after {
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, rgba(224, 93, 45, 0.08) 0%, transparent 70%);
  bottom: -80px;
  left: 5%;
  animation: svm-orb-b 11s ease-in-out infinite alternate;
}

@keyframes svm-orb-a {
  0%   { transform: translateY(0)     scale(1); }
  100% { transform: translateY(-50px) scale(1.12); }
}

@keyframes svm-orb-b {
  0%   { transform: translateY(0)    scale(1); }
  100% { transform: translateY(40px) scale(1.08); }
}


/* ── Hero content: slide en página carga ───────────────────── */

.svm-hero__badge,
.svm-hero__title,
.svm-hero__sub,
.svm-hero__actions,
.svm-hero__trust {
  opacity: 0;
  transform: translateY(20px);
  animation: svm-hero-in 0.7s var(--svm-ease-out) forwards;
}

.svm-hero__badge   { animation-delay: 0.1s; }
.svm-hero__title   { animation-delay: 0.25s; }
.svm-hero__sub     { animation-delay: 0.4s; }
.svm-hero__actions { animation-delay: 0.55s; }
.svm-hero__trust   { animation-delay: 0.7s; }

.svm-hero__visual {
  opacity: 0;
  transform: translateX(32px) scale(0.97);
  animation: svm-hero-visual-in 0.9s var(--svm-ease-out) 0.35s forwards;
}

@keyframes svm-hero-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes svm-hero-visual-in {
  to { opacity: 1; transform: translateX(0) scale(1); }
}


/* ============================================================
   TIER 2 — MICRO-INTERACCIONES
   ============================================================ */

/* ── CTA shimmer ───────────────────────────────────────────── */

.svm-btn--primary,
.svm-btn--accent {
  position: relative;
  overflow: hidden;
}

.svm-btn--primary::after,
.svm-btn--accent::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 100%
  );
  transform: skewX(-18deg);
  pointer-events: none;
}

.svm-btn--primary:hover::after,
.svm-btn--accent:hover::after {
  animation: svm-shimmer 0.55s ease-out forwards;
}

@keyframes svm-shimmer {
  from { left: -80%; }
  to   { left: 130%; }
}


/* ── Card hover lift (más pronunciado) ────────────────────── */

.svm-feature-card,
.svm-pricing-card,
.svm-scenario,
.svm-testimonial {
  transition:
    box-shadow 0.25s var(--svm-ease-out),
    transform 0.25s var(--svm-ease-out),
    border-color 0.25s var(--svm-ease-out);
}

.svm-feature-card:hover  { transform: translateY(-4px); }
.svm-pricing-card:hover  { transform: translateY(-4px); }
.svm-scenario:hover      { transform: translateY(-4px); }
.svm-testimonial:hover   { transform: translateY(-3px); }

.svm-pricing-card--featured:hover { transform: scale(1.02) translateY(-4px); }


/* ── Steps: icono rebota en hover ─────────────────────────── */

.svm-step:hover .svm-step__num {
  animation: svm-bounce 0.4s var(--svm-ease-sport);
}

@keyframes svm-bounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  70%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}


/* ── Nav links underline ──────────────────────────────────── */

.svm-nav__links a {
  position: relative;
}

.svm-nav__links a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--svm-color-primary);
  border-radius: 99px;
  transition: width 0.25s var(--svm-ease-out);
}

.svm-nav__links a:hover::after { width: 100%; }


/* ============================================================
   TIER 3 — CARÁCTER
   ============================================================ */

/* ── Word reveal en headline ──────────────────────────────── */

.svm-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.55s var(--svm-ease-out),
    transform 0.55s var(--svm-ease-sport);
  will-change: transform, opacity;
}

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

.svm-word--accent { color: var(--svm-color-primary); }


/* ── Sport cycle en hero badge ────────────────────────────── */

.svm-sport-cycle {
  position: relative;
  display: inline-block;
}

.svm-sport-item {
  display: none;
  font-weight: 700;
  transition: color 0.4s var(--svm-ease-out);
}

.svm-sport-item.is-active {
  display: inline;
  animation: svm-sport-fade-in 0.4s var(--svm-ease-out);
}

@keyframes svm-sport-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── Página load: nav slide in ────────────────────────────── */

.svm-nav {
  animation: svm-nav-in 0.5s var(--svm-ease-out) both;
}

@keyframes svm-nav-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── Page hero (páginas internas): reveal ─────────────────── */

.svm-page-hero .svm-eyebrow,
.svm-page-hero__title,
.svm-page-hero__sub {
  opacity: 0;
  animation: svm-hero-in 0.65s var(--svm-ease-out) forwards;
}

.svm-page-hero .svm-eyebrow { animation-delay: 0.1s; }
.svm-page-hero__title       { animation-delay: 0.22s; }
.svm-page-hero__sub         { animation-delay: 0.36s; }


/* ============================================================
   SILHOUETTES — siluetas deportivas decorativas
   ============================================================ */

.svm-silhouette {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.svm-silhouette--float {
  animation: svm-silhouette-float 8s ease-in-out infinite alternate;
}

.svm-silhouette--float-slow {
  animation: svm-silhouette-float 12s ease-in-out infinite alternate;
}

.svm-silhouette--float-delay {
  animation: svm-silhouette-float 9s ease-in-out 2s infinite alternate;
}

@keyframes svm-silhouette-float {
  0%   { transform: translateY(0)     rotate(0deg); }
  40%  { transform: translateY(-12px) rotate(0.4deg); }
  100% { transform: translateY(-18px) rotate(-0.3deg); }
}


/* ============================================================
   PREFERS-REDUCED-MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .svm-reveal,
  .svm-stagger > .svm-reveal,
  .svm-word,
  .svm-hero__badge,
  .svm-hero__title,
  .svm-hero__sub,
  .svm-hero__actions,
  .svm-hero__trust,
  .svm-hero__visual,
  .svm-nav,
  .svm-page-hero .svm-eyebrow,
  .svm-page-hero__title,
  .svm-page-hero__sub {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  .svm-hero::before,
  .svm-hero::after { animation: none !important; }

  .svm-btn--primary::after,
  .svm-btn--accent::after { display: none; }

  .svm-feature-card:hover,
  .svm-pricing-card:hover,
  .svm-scenario:hover,
  .svm-testimonial:hover { transform: none !important; }
}