/* ============================================================
   VALLE'S GROUP — animations.css
   Keyframes + scroll-reveal utilities
============================================================ */

/* ─── Keyframes ─── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes growWidth {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes pulseGold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(238, 174, 42, 0.45); }
  50%      { box-shadow: 0 0 0 14px rgba(238, 174, 42, 0); }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ─── Reveal on scroll (IntersectionObserver toggles .is-visible) ─── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity var(--duration-reveal) var(--ease-out),
              transform var(--duration-reveal) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--left {
  transform: translateX(-40px);
}
.reveal--left.is-visible { transform: translateX(0); }

.reveal--right {
  transform: translateX(40px);
}
.reveal--right.is-visible { transform: translateX(0); }

.reveal--scale {
  transform: scale(0.94);
}
.reveal--scale.is-visible { transform: scale(1); }

/* Stagger delays */
.reveal[data-delay="50"]  { transition-delay: 50ms; }
.reveal[data-delay="100"] { transition-delay: 100ms; }
.reveal[data-delay="150"] { transition-delay: 150ms; }
.reveal[data-delay="200"] { transition-delay: 200ms; }
.reveal[data-delay="250"] { transition-delay: 250ms; }
.reveal[data-delay="300"] { transition-delay: 300ms; }
.reveal[data-delay="350"] { transition-delay: 350ms; }
.reveal[data-delay="400"] { transition-delay: 400ms; }
.reveal[data-delay="500"] { transition-delay: 500ms; }
.reveal[data-delay="600"] { transition-delay: 600ms; }

/* ─── Hero animations ─── */
.hero-anim {
  opacity: 0;
  animation: fadeInUp 0.85s var(--ease-out) forwards;
}
.hero-anim[data-delay="0"]   { animation-delay: 0.1s; }
.hero-anim[data-delay="100"] { animation-delay: 0.25s; }
.hero-anim[data-delay="200"] { animation-delay: 0.40s; }
.hero-anim[data-delay="300"] { animation-delay: 0.55s; }
.hero-anim[data-delay="400"] { animation-delay: 0.70s; }
.hero-anim[data-delay="500"] { animation-delay: 0.85s; }

/* ─── Counter animation helper ─── */
.counter-done {
  animation: pulseGold 1.2s var(--ease-out);
}

/* ─── Float (decorative) ─── */
.float-y { animation: floatY 4s ease-in-out infinite; }

/* ─── Shimmer (skeleton) ─── */
.shimmer {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}

/* ─── Underline grow ─── */
.underline-grow { position: relative; }
.underline-grow::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width var(--duration-base) var(--ease-out);
}
.underline-grow:hover::after,
.underline-grow.is-visible::after { width: 100%; }

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--left, .reveal--right, .reveal--scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-anim { opacity: 1; animation: none; }
  .float-y, .shimmer { animation: none; }
}