/*
 * SUAR SERVICES — Motion System
 * Phase 3 Visual Polish
 * Rules: short durations, smooth easing, prefers-reduced-motion respected
 */

/* ── Base animation states ── */
.suar-animate {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}
.suar-animate.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.suar-stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}
.suar-stagger.in-view > *:nth-child(1) { transition-delay: 0.00s; opacity: 1; transform: none; }
.suar-stagger.in-view > *:nth-child(2) { transition-delay: 0.07s; opacity: 1; transform: none; }
.suar-stagger.in-view > *:nth-child(3) { transition-delay: 0.14s; opacity: 1; transform: none; }
.suar-stagger.in-view > *:nth-child(4) { transition-delay: 0.21s; opacity: 1; transform: none; }
.suar-stagger.in-view > *:nth-child(5) { transition-delay: 0.28s; opacity: 1; transform: none; }
.suar-stagger.in-view > *:nth-child(6) { transition-delay: 0.35s; opacity: 1; transform: none; }

/* ── Card hover lift ── */
.cap-card,
.blog-card,
.service-pillar-card,
.diff-card,
.model-card,
.journey-card,
.tech-group,
.cert-group,
.cred-group {
  transition:
    border-color 0.22s ease,
    background 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease;
}
.cap-card:hover,
.blog-card:hover,
.service-pillar-card:hover,
.diff-card:hover,
.model-card:hover,
.journey-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}

/* ── Nav link underline slide ── */
.nav-item,
.header-nav a {
  position: relative;
}
.nav-item::after,
.header-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  inset-inline-start: 0;
  width: 0;
  height: 2px;
  background: var(--accent, #10B981);
  transition: width 0.2s ease;
  border-radius: 1px;
}
.nav-item:hover::after,
.header-nav a:hover::after,
.nav-item.is-current::after {
  width: 100%;
}

/* ── Primary button pulse on hover ── */
.btn-primary,
.header-cta-btn {
  transition:
    background 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
}
.btn-primary:hover,
.header-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
}

/* ── CTA link arrow micro-motion ── */
.cap-card-link,
.pillar-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.cap-card-link::after,
.pillar-cta-link::after {
  content: '→';
  display: inline-block;
  transition: transform 0.18s ease;
}
.cap-card-link:hover::after,
.pillar-cta-link:hover::after {
  transform: translateX(4px);
}

/* ── Lang switcher hover ── */
.lang-item {
  transition: color 0.18s ease, background 0.18s ease, transform 0.12s ease;
}
.lang-item:hover {
  transform: translateY(-1px);
}

/* ── Chip tag hover ── */
.chip-tag {
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.chip-tag:hover {
  border-color: rgba(16, 185, 129, 0.45);
  color: rgba(240, 244, 248, 0.96);
  background: rgba(16, 185, 129, 0.08);
}

/* ── Lifecycle step hover ── */
.lifecycle-step {
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}
.lifecycle-step:hover {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.5);
  transform: translateY(-1px);
}

/* ── Footer link hover ── */
.footer-col a {
  transition: color 0.18s ease, transform 0.12s ease;
}
.footer-col a:hover {
  transform: translateX(2px);
}
[dir="rtl"] .footer-col a:hover {
  transform: translateX(-2px);
}

/* ── Prefers-reduced-motion override ── */
@media (prefers-reduced-motion: reduce) {
  .suar-animate,
  .suar-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .cap-card:hover,
  .blog-card:hover,
  .service-pillar-card:hover,
  .diff-card:hover,
  .model-card:hover,
  .journey-card:hover {
    transform: none !important;
  }
  .btn-primary:hover,
  .header-cta-btn:hover {
    transform: none !important;
  }
  .nav-item::after,
  .header-nav a::after {
    transition: none !important;
  }
  .lang-item:hover,
  .lifecycle-step:hover,
  .footer-col a:hover,
  .cap-card-link::after,
  .pillar-cta-link::after {
    transform: none !important;
    transition: none !important;
  }
}