/* ============================================================
   ANIMATIONS.CSS — scroll reveal & entrance animations
   ============================================================ */

/* ── PAGE LOAD — staggered header entrance ─────────────────── */
.nav {
  animation: fadeDown 0.8s var(--ease-out) both;
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── SCROLL REVEAL BASE ─────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--dur-xslow) var(--ease-out),
              transform var(--dur-xslow) var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── DELAY VARIANTS ─────────────────────────────────────────── */
.reveal--delay-1 { transition-delay: 120ms; }
.reveal--delay-2 { transition-delay: 240ms; }
.reveal--delay-3 { transition-delay: 360ms; }
.reveal--delay-4 { transition-delay: 480ms; }
.reveal--delay-5 { transition-delay: 600ms; }

/* ── HERO SECTION — overrides for above-fold elements ───────── */
/* These are triggered by JS removing a class, not IntersectionObserver */
.hero .reveal {
  transition-duration: 1.1s;
}

/* ── CASE STUDY ROW HOVER ───────────────────────────────────── */
.case-study {
  transition: padding-left var(--dur-base) var(--ease-out);
}
.case-study:hover {
  padding-left: var(--space-4);
}

/* ── MARQUEE PAUSE ON HOVER ─────────────────────────────────── */
.hero__marquee:hover .marquee__track {
  animation-play-state: paused;
}

/* ── SERVICE CARD NUMBER pulse ──────────────────────────────── */
.service-card:hover .service-card__num {
  animation: pulse-glow 1.2s ease infinite;
}
@keyframes pulse-glow {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* ── STAT NUMBER COUNT animation (CSS-only trigger) ─────────── */
.stat.visible .stat__number {
  animation: countUp 0.6s var(--ease-out) both;
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── CANVAS SECTION text glow ───────────────────────────────── */
.canvas-section__headline em {
  text-shadow: 0 0 60px rgba(201,169,110,0.4);
}

/* ── GRAIN OVERLAY ──────────────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  background-size: 200px;
  pointer-events: none;
  z-index: 9997;
  opacity: 0.4;
}