/* ============================================================
   animations.css — Keyframes, reveal system, marquee
   ============================================================ */

/* ── Scroll-reveal: hidden state ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

[data-reveal="from-left"] {
  transform: translateX(-32px);
}

[data-reveal="from-right"] {
  transform: translateX(32px);
}

[data-reveal="scale"] {
  transform: scale(0.95);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

/* ── Scroll-reveal: visible state ── */
[data-reveal].revealed {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* ── Stagger reveal ── */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-reveal-stagger].revealed > *:nth-child(1)  { transition-delay:   0ms; }
[data-reveal-stagger].revealed > *:nth-child(2)  { transition-delay:  80ms; }
[data-reveal-stagger].revealed > *:nth-child(3)  { transition-delay: 160ms; }
[data-reveal-stagger].revealed > *:nth-child(4)  { transition-delay: 240ms; }
[data-reveal-stagger].revealed > *:nth-child(5)  { transition-delay: 320ms; }
[data-reveal-stagger].revealed > *:nth-child(6)  { transition-delay: 400ms; }

[data-reveal-stagger].revealed > * {
  opacity: 1;
  transform: translateY(0);
}

/* ── Hero entrance animations (CSS-driven, no JS) ── */
@keyframes hero-fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__label    { animation: hero-fade-in 0.6s ease 0.2s both; }
.hero__headline { animation: hero-fade-in 0.7s ease 0.4s both; }
.hero__subtext  { animation: hero-fade-in 0.7s ease 0.6s both; }
.hero__actions  { animation: hero-fade-in 0.7s ease 0.8s both; }

/* ── Scroll indicator ── */
@keyframes bounce-down {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%       { transform: translateY(10px); opacity: 1; }
}

.hero__scroll-indicator {
  animation: bounce-down 1.8s ease-in-out infinite;
}

/* ── Hero orb float animations ── */
@keyframes float1 {
  0%,  100% { transform: translate(0,     0)    scale(1); }
  33%        { transform: translate(30px,  -40px) scale(1.05); }
  66%        { transform: translate(-20px, 20px)  scale(0.98); }
}

@keyframes float2 {
  0%,  100% { transform: translate(0,     0)    scale(1); }
  40%        { transform: translate(-35px, 25px)  scale(1.03); }
  70%        { transform: translate(20px, -30px)  scale(0.97); }
}

@keyframes float3 {
  0%,  100% { transform: translate(0,     0)    scale(1); }
  50%        { transform: translate(25px, -20px)  scale(1.04); }
}

/* ── Client marquee ── */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.clients__track {
  display: flex;
  width: max-content;
  gap: var(--space-3);
  animation: marquee-scroll 35s linear infinite;
}

.clients__track:hover {
  animation-play-state: paused;
}

/* ── Gradient border pulse (service cards) ── */
@keyframes glow-pulse {
  0%,  100% { box-shadow: var(--shadow-card); }
  50%        { box-shadow: var(--shadow-card), var(--shadow-glow); }
}

/* ── Prefers-reduced-motion: disable everything ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal],
  [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .clients__track {
    animation: none;
  }
}