/* =============================================
   ASERRADERO FECHNER — animations.css
   Scroll reveal + Hero entrance + Parallax
   ============================================= */

/* ----- Hero entrance (keyframes, no IntersectionObserver) ----- */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scrollPulse {
  0%   { opacity: 0; transform: scaleY(0.2); transform-origin: top; }
  40%  { opacity: 1; transform: scaleY(1);   transform-origin: top; }
  41%  { transform-origin: bottom; }
  80%  { opacity: 1; transform: scaleY(0.2); transform-origin: bottom; }
  100% { opacity: 0; transform: scaleY(0.2); transform-origin: bottom; }
}

/* ----- Hero staggered entrance ----- */
.hero-badge {
  opacity: 0;
  animation: heroFadeUp 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.15s;
}
.hero-title-line {
  opacity: 0;
  animation: heroFadeUp 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.35s;
}
.hero-title-brand {
  opacity: 0;
  animation: heroFadeUp 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.6s;
}
.hero-subtitle {
  opacity: 0;
  animation: heroFadeUp 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.95s;
}
.hero-cta {
  opacity: 0;
  animation: heroFadeUp 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 1.2s;
}
.hero-scroll {
  opacity: 0;
  animation: heroFadeUp 0.75s ease forwards, scrollPulse 2.8s ease-in-out 2s infinite;
  animation-delay: 1.6s, 2s;
}

/* ----- Scroll reveal — estado inicial ----- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.75s ease var(--reveal-delay, 0s),
    transform 0.75s ease var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal-left {
  opacity: 0;
  transform: translateX(-36px);
  transition:
    opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--reveal-delay, 0s),
    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal-right {
  opacity: 0;
  transform: translateX(36px);
  transition:
    opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--reveal-delay, 0s),
    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--reveal-delay, 0s);
  will-change: opacity, transform;
}

/* ----- Scroll reveal — estado visible (activado por JS) ----- */
.reveal.visible,
.reveal-left.visible,
.reveal-right.visible {
  opacity: 1;
  transform: translate(0, 0);
  /* will-change se libera desde JS con transitionend */
}

/* ----- Scroll reveal del hero-scroll indicator ----- */
.scroll-line {
  animation: scrollPulse 2.8s ease-in-out infinite;
  animation-delay: 2.2s;
}