/* ============================================================
   STAYFRAME — animations.css
   Keyframes, scroll-reveal, transiciones, hover states
   ============================================================ */

/* ---------- Scroll-reveal ---------- */

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

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

.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

/* ---------- Hero entrance ---------- */

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

.hero-badge-in {
  animation: fadeUp 0.9s var(--ease-cine) both;
}

.hero-title-in {
  animation: fadeUp 0.9s var(--ease-cine) 0.1s both;
}

.hero-lead-in {
  animation: fadeUp 0.9s var(--ease-cine) 0.2s both;
}

.hero-actions-in {
  animation: fadeUp 0.9s var(--ease-cine) 0.3s both;
}

.hero-stats-in {
  animation: fadeUp 1s var(--ease-cine) 0.42s both;
}

/* ---------- Scroll hint ---------- */

@keyframes scrollHintBob {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(8px); opacity: 1; }
}

.scroll-hint-mark {
  width: 1px;
  height: 26px;
  background: linear-gradient(var(--rausch), transparent);
  animation: scrollHintBob 2.2s ease-in-out infinite;
}

/* ---------- Fondo fallback cálido ---------- */

@keyframes warmDrift {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 60%; }
  100% { background-position: 0% 0%; }
}

/* ---------- Badge dot pulso ---------- */

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

.badge-dot {
  animation: pulseDot 1.8s ease-in-out infinite;
}

/* ---------- Toast ---------- */

@keyframes toastMarkPop {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.toast.is-visible .toast-mark {
  animation: toastMarkPop 0.35s var(--ease-cine);
}

/* ---------- Hover states adicionales ---------- */

.nav-logo {
  transition: transform var(--dur-fast) var(--ease-cine);
}

.nav-brand:hover .nav-logo {
  transform: rotate(-6deg) scale(1.05);
}

.faq-question {
  transition: background var(--dur-fast) var(--ease-cine);
}

.faq-question:hover {
  background: var(--surface);
}

.compare-panel {
  transition: transform var(--dur-med) var(--ease-cine);
}

.compare-card:hover .compare-panel.is-after {
  transform: scale(1.015);
}

.testimonial-card,
.pricing-card,
.process-card,
.pain-card {
  transition: transform var(--dur-med) var(--ease-cine),
    box-shadow var(--dur-med) var(--ease-cine),
    border-color var(--dur-med) var(--ease-cine);
}

.process-num {
  transition: color var(--dur-fast) var(--ease-cine);
}

.process-card:hover .process-num {
  color: var(--rausch);
}