/* ============================================================
   EMS TEXTILES — animations.css  v3
   All keyframes + reveal system
   ============================================================ */

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes signalPulse {
  0%   { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0;   transform: scale(2.2); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-14px); }
}

@keyframes floatX {
  0%, 100% { transform: translateX(0px); }
  50%       { transform: translateX(8px); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes meshDrift {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes borderGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(26,86,219,0.15); }
  50%      { box-shadow: 0 0 0 8px rgba(26,86,219,0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes progressDash {
  from { stroke-dashoffset: 400; }
  to   { stroke-dashoffset: 0; }
}

@keyframes dotPop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Hero slide-in delays ─────────────────────────────────── */
.hero-anim-1 { animation: fadeInUp var(--dur-reveal) var(--ease-out) 0.1s both; }
.hero-anim-2 { animation: fadeInUp var(--dur-reveal) var(--ease-out) 0.2s both; }
.hero-anim-3 { animation: fadeInUp var(--dur-reveal) var(--ease-out) 0.35s both; }
.hero-anim-4 { animation: fadeInUp var(--dur-reveal) var(--ease-out) 0.5s both; }
.hero-anim-5 { animation: fadeInUp var(--dur-reveal) var(--ease-out) 0.65s both; }
.hero-anim-6 { animation: fadeInUp var(--dur-reveal) var(--ease-out) 0.8s both; }
.hero-media-anim { animation: fadeInRight 0.8s var(--ease-out) 0.3s both; }

/* ── Float utility ────────────────────────────────────────── */
.hero-float { animation: float 8s ease-in-out infinite; }

/* ── Reveal system (IntersectionObserver driven) ──────────── */
.ems-reveal,
.ems-reveal-left,
.ems-reveal-right,
.ems-reveal-scale {
  opacity: 0;
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

.ems-reveal       { transform: translateY(28px); }
.ems-reveal-left  { transform: translateX(-40px); }
.ems-reveal-right { transform: translateX(40px); }
.ems-reveal-scale { transform: scale(0.90); }

.ems-reveal.visible,
.ems-reveal-left.visible,
.ems-reveal-right.visible,
.ems-reveal-scale.visible {
  opacity: 1;
  transform: none;
}

/* Staggered children */
.ems-stagger > *:nth-child(1)  { transition-delay: 0ms; }
.ems-stagger > *:nth-child(2)  { transition-delay: 80ms; }
.ems-stagger > *:nth-child(3)  { transition-delay: 160ms; }
.ems-stagger > *:nth-child(4)  { transition-delay: 240ms; }
.ems-stagger > *:nth-child(5)  { transition-delay: 320ms; }
.ems-stagger > *:nth-child(6)  { transition-delay: 400ms; }
.ems-stagger > *:nth-child(7)  { transition-delay: 480ms; }
.ems-stagger > *:nth-child(8)  { transition-delay: 560ms; }

/* Process line animation */
.process-line-animated {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.5s var(--ease-out);
}
.process-line-animated.animated {
  stroke-dashoffset: 0;
}