/* ============================================================
   Arc — Scroll Animations
   animations.css
   Uses Intersection Observer (no library needed)
   ============================================================ */

/* ── Initial hidden states ────────────────────────────────── */
.anim-fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.anim-fade-in {
  opacity: 0;
  transition: opacity 0.55s ease;
}

.anim-slide-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.anim-slide-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

/* ── Visible state (added by JS) ──────────────────────────── */
.anim-fade-up.in-view,
.anim-fade-in.in-view,
.anim-slide-left.in-view,
.anim-slide-right.in-view {
  opacity: 1;
  transform: none;
}

/* ── Stagger delays for groups ────────────────────────────── */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.stagger-children.in-view > *:nth-child(1)  { opacity: 1; transform: none; transition-delay: 0ms;   }
.stagger-children.in-view > *:nth-child(2)  { opacity: 1; transform: none; transition-delay: 80ms;  }
.stagger-children.in-view > *:nth-child(3)  { opacity: 1; transform: none; transition-delay: 160ms; }
.stagger-children.in-view > *:nth-child(4)  { opacity: 1; transform: none; transition-delay: 240ms; }
.stagger-children.in-view > *:nth-child(5)  { opacity: 1; transform: none; transition-delay: 320ms; }
.stagger-children.in-view > *:nth-child(6)  { opacity: 1; transform: none; transition-delay: 400ms; }

/* ── Hero entrance ────────────────────────────────────────── */
.hero-enter {
  animation: heroEnter 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-enter--delay-1 { animation-delay: 0.10s; }
.hero-enter--delay-2 { animation-delay: 0.20s; }
.hero-enter--delay-3 { animation-delay: 0.35s; }
.hero-enter--delay-4 { animation-delay: 0.50s; }

@keyframes heroEnter {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Pulse on CTA ─────────────────────────────────────────── */
@keyframes subtlePulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(224, 123, 42, 0.20); }
  50%       { box-shadow: 0 4px 20px rgba(224, 123, 42, 0.35); }
}

.btn--primary {
  animation: subtlePulse 3s ease-in-out infinite;
}

.btn--primary:hover {
  animation: none;
}

/* ── Respect reduced motion ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .anim-fade-up,
  .anim-fade-in,
  .anim-slide-left,
  .anim-slide-right,
  .stagger-children > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-enter {
    animation: none;
  }

  .btn--primary {
    animation: none;
  }
}