/* ==========================================================================
   EL PATIO DE LGM — animations.css
   Keyframes y clases puramente animadas.
   Todo pensado para sentirse lento, suave y editorial. Nunca brusco.
   ========================================================================== */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes softScale {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

@keyframes cueBounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(6px); opacity: 1; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Entrada del hero al cargar la página */
.hero-eyebrow,
.hero-title,
.hero-sub {
  animation: riseIn 1.4s var(--ease-soft) both;
}
.hero-title { animation-delay: 0.15s; }
.hero-sub   { animation-delay: 0.35s; }

.hero-media img {
  animation: softScale 2.2s var(--ease-soft) both;
}

.hero-scroll-cue {
  animation: cueBounce 2.6s ease-in-out infinite;
}

/* Spinner de estado de envío del formulario */
.spinner {
  width: 1em;
  height: 1em;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}

/* Parallax ligero controlado desde scroll.js vía variable CSS */
.hero-media img {
  transform: translateY(calc(var(--parallax-y, 0) * 1px));
}

@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow, .hero-title, .hero-sub, .hero-media img, .hero-scroll-cue {
    animation: none !important;
  }
}