/* ===================================================================
   FPI — animations.css
   Animaciones sutiles: reveal on scroll, fade, slide, parallax leve.
   =================================================================== */

/* ---------- REVEAL ON SCROLL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible { opacity: 1; transform: none; }

.reveal--fade { transform: none; }

.reveal--slide-left { transform: translateX(-32px); }
.reveal--slide-left.is-visible { transform: none; }

.reveal--slide-right { transform: translateX(32px); }
.reveal--slide-right.is-visible { transform: none; }

.reveal--scale { transform: scale(0.96); }
.reveal--scale.is-visible { transform: none; }

/* Stagger helper: aplicado vía JS con --reveal-delay en línea,
   se mantiene aquí el fallback por nth-child para grillas estáticas */
.services-grid .service-card:nth-child(1) { --reveal-delay: 0s; }
.services-grid .service-card:nth-child(2) { --reveal-delay: 0.05s; }
.services-grid .service-card:nth-child(3) { --reveal-delay: 0.1s; }
.services-grid .service-card:nth-child(4) { --reveal-delay: 0.15s; }
.services-grid .service-card:nth-child(5) { --reveal-delay: 0.2s; }
.services-grid .service-card:nth-child(6) { --reveal-delay: 0.25s; }
.services-grid .service-card:nth-child(7) { --reveal-delay: 0.3s; }
.services-grid .service-card:nth-child(8) { --reveal-delay: 0.35s; }

/* ---------- HERO ENTRADA (page load) ---------- */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.hero-eyebrow-anim { animation: heroFadeUp 0.8s var(--ease) 0.1s both; }
.hero-title-anim   { animation: heroFadeUp 0.9s var(--ease) 0.22s both; }
.hero-sub-anim     { animation: heroFadeUp 0.9s var(--ease) 0.36s both; }
.hero-cta-anim     { animation: heroFadeUp 0.9s var(--ease) 0.48s both; }
.hero-visual-anim  { animation: heroFadeUp 1.1s var(--ease) 0.3s both; }

/* ---------- SCROLL CUE ---------- */
@keyframes scrollcue {
  0%   { transform: translateY(-100%); }
  50%  { transform: translateY(100%); }
  100% { transform: translateY(-100%); }
}

/* ---------- SPINNER ---------- */
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- PARALLAX MUY LEVE ---------- */
.parallax-el {
  transition: transform 0.2s linear;
  will-change: transform;
}

/* ---------- HOVER MICRO-INTERACCIONES ---------- */
@keyframes softPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.pulse-dot { animation: softPulse 2.4s ease-in-out infinite; }

/* ---------- FORMULARIO ÉXITO ---------- */
@keyframes successPop {
  0%   { transform: scale(0.5) rotate(-10deg); opacity: 0; }
  65%  { transform: scale(1.12) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes successFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes checkDraw {
  from { stroke-dashoffset: 60; }
  to   { stroke-dashoffset: 0; }
}
@keyframes ringPulse {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.7); opacity: 0; }
}
@keyframes formFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-14px); }
}
@keyframes sparkle {
  0%   { transform: scale(0) rotate(0deg); opacity: 1; }
  100% { transform: scale(1.4) rotate(180deg); opacity: 0; }
}

.form-success-overlay {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: 3.5rem 2.5rem;
  text-align: center;
  min-height: 320px;
}
.form-success-overlay.is-visible {
  display: flex;
  animation: successFadeUp 0.5s var(--ease) both;
}

/* Icono con anillo pulsante */
.form-success-icon-wrap {
  position: relative;
  width: 88px;
  height: 88px;
}
.form-success-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(36,85,201,0.5);
  animation: ringPulse 1.2s ease-out 0.6s forwards;
}
.form-success-icon {
  width: 88px;
  height: 88px;
  background: linear-gradient(135deg, #1a44b0, #2455C9 50%, #5C90F2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: successPop 0.6s cubic-bezier(.34,1.56,.64,1) 0.1s both;
  box-shadow: 0 12px 40px rgba(36,85,201,0.45), 0 0 0 8px rgba(36,85,201,0.1);
}
.form-success-icon svg {
  width: 42px;
  height: 42px;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: checkDraw 0.45s ease 0.55s forwards;
}

/* Texto */
.form-success-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--navy);
  letter-spacing: -0.02em;
  animation: successFadeUp 0.5s var(--ease) 0.6s both;
}
.form-success-sub {
  font-size: 1rem;
  color: var(--graphite);
  line-height: 1.65;
  max-width: 300px;
  animation: successFadeUp 0.5s var(--ease) 0.75s both;
}
.form-success-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(36,85,201,0.08);
  color: var(--blue);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.45rem 0.9rem;
  border-radius: 100px;
  border: 1px solid rgba(36,85,201,0.18);
  animation: successFadeUp 0.5s var(--ease) 0.88s both;
}

.contact-form.is-sent {
  animation: formFadeOut 0.35s var(--ease) forwards;
  pointer-events: none;
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}