/* ============================================================
   EMS TEXTILES — animations.css
   Keyframes · Scroll Reveal · Motion Tokens
   ============================================================ */

/* ── Signal / WiFi Pulse ──────────────────────────────────── */
@keyframes signalPulse {
  0%   { transform: scale(0.8); opacity: 0.8; }
  70%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ── Slow expanding ring (for floating widget) ────────────── */
@keyframes ringExpand {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ── Button shine sweep ───────────────────────────────────── */
@keyframes shimmer {
  0%   { transform: translateX(-100%) rotate(15deg); }
  100% { transform: translateX(200%) rotate(15deg); }
}

/* ── Hero image float ─────────────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0.5deg); }
  50%       { transform: translateY(-12px) rotate(-0.5deg); }
}

/* ── Mesh/gradient drift for hero background ─────────────── */
@keyframes meshDrift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── SVG process line draw ────────────────────────────────── */
@keyframes drawPath {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* ── Count-up fade in ─────────────────────────────────────── */
@keyframes countIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Bounce in for tags ───────────────────────────────────── */
@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.7); }
  60%  { transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

/* ── Slide in from right (floating widget) ───────────────── */
@keyframes slideInRight {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ── Slide in from bottom ────────────────────────────────── */
@keyframes slideInUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ── Spin (loading) ─────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Callout bubble pop ─────────────────────────────────── */
@keyframes calloutPop {
  0%   { opacity: 0; transform: scale(0.85) translateY(6px); }
  70%  { transform: scale(1.03) translateY(-1px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Border gradient rotate (card glow) ─────────────────── */
@keyframes borderSpin {
  to { --border-angle: 360deg; }
}

/* ============================================================
   SCROLL REVEAL SYSTEM
   ============================================================ */

/* Base state: hidden */
.ems-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
}

/* Visible state: triggered by IntersectionObserver */
.ems-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade only (no movement) */
.ems-reveal-fade {
  opacity: 0;
  transition: opacity var(--duration-reveal) var(--ease-out);
}
.ems-reveal-fade.visible { opacity: 1; }

/* Slide from left */
.ems-reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
}
.ems-reveal-left.visible { opacity: 1; transform: translateX(0); }

/* Slide from right */
.ems-reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
}
.ems-reveal-right.visible { opacity: 1; transform: translateX(0); }

/* Scale pop */
.ems-reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
}
.ems-reveal-scale.visible { opacity: 1; transform: scale(1); }

/* ── Stagger delays for child elements ───────────────────── */
.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; }

/* ── Hero headline word reveal ───────────────────────────── */
.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(32px);
  animation: slideInUp var(--duration-reveal) var(--ease-out) forwards;
}

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

/* ── Hero image float animation ─────────────────────────── */
.hero-float {
  animation: float 6s ease-in-out infinite;
}

/* ── Dashboard callout pop sequence ─────────────────────── */
.callout-1 { animation: calloutPop 0.5s var(--ease-out) 0.8s both; }
.callout-2 { animation: calloutPop 0.5s var(--ease-out) 1.2s both; }
.callout-3 { animation: calloutPop 0.5s var(--ease-out) 1.6s both; }

/* ── Blog tag bounce ─────────────────────────────────────── */
.blog-card:hover .blog-tag {
  animation: bounceIn 0.3s var(--ease-out);
}

/* ============================================================
   PREFERS-REDUCED-MOTION OVERRIDE
   Must be last so it overrides all above
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

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

  .hero-word {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .hero-float { animation: none; }
  .callout-1, .callout-2, .callout-3 { animation: none; opacity: 1; }
  .signal-dot::before, .signal-dot::after { animation: none; }
  .process-line-animated { transition: none; }
}