/* ═══════════════════════════════════════════════════════════
   MF Media Socials — Keyframe Animations
   ═══════════════════════════════════════════════════════════ */

/* ─── FAQ answer open animation ─────────────────────────── */
@keyframes faq-open {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Metric card platform switch ────────────────────────── */
@keyframes metric-switch {
  0%   { opacity: 1; transform: scale(1); }
  40%  { opacity: 0; transform: scale(0.96) translateY(4px); }
  60%  { opacity: 0; transform: scale(0.96) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ─── Hero Background Blobs ─────────────────────────────── */
@keyframes blob-drift-1 {
  0%   { transform: translateX(-50%) translateY(0px) scale(1); }
  33%  { transform: translateX(-48%) translateY(-30px) scale(1.05); }
  66%  { transform: translateX(-52%) translateY(20px) scale(0.97); }
  100% { transform: translateX(-50%) translateY(0px) scale(1); }
}
@keyframes blob-drift-2 {
  0%   { transform: translateY(0px) scale(1); }
  50%  { transform: translateY(-40px) scale(1.08); }
  100% { transform: translateY(0px) scale(1); }
}
@keyframes blob-drift-3 {
  0%   { transform: translateY(0px) scale(1); }
  40%  { transform: translateY(30px) scale(1.06); }
  80%  { transform: translateY(-20px) scale(0.96); }
  100% { transform: translateY(0px) scale(1); }
}

/* ─── Scroll Indicator ──────────────────────────────────── */
@keyframes scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.6; }
  50%       { transform: translateX(-50%) translateY(8px); opacity: 1; }
}

/* ─── Badge Dot Pulse ───────────────────────────────────── */
@keyframes pulse-dot {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1; transform: scale(1.3); }
}
@keyframes pulse-green {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4); }
  70%  { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* ─── Floating Badge ────────────────────────────────────── */
@keyframes float-badge {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ─── Shimmer (for placeholders) ───────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ─── Hero text lines reveal ───────────────────────────── */
@keyframes line-reveal {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ─── Fade slide up ─────────────────────────────────────── */
@keyframes fade-slide-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Count up flash ────────────────────────────────────── */
@keyframes count-flash {
  0%   { color: var(--silver-light); }
  50%  { color: var(--silver-mid); }
  100% { color: var(--text-primary); }
}

/* ─── Glow pulse (metric cards accent) ─────────────────── */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(26,58,107,0.2); }
  50%       { box-shadow: 0 0 40px rgba(26,58,107,0.4), 0 0 60px rgba(168,181,200,0.05); }
}

/* ─── Process line draw ─────────────────────────────────── */
@keyframes line-draw {
  to { height: 100%; }
}

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

/* ─── Apply initial hidden states ───────────────────────── */
.hero-line {
  transform: translateY(100%);
  opacity: 0;
}
.hero-line.revealed {
  animation: line-reveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-sub.revealed,
.hero-actions.revealed,
.hero-stats.revealed {
  animation: fade-slide-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ─── Metric card accent pulse ──────────────────────────── */
.metric-card--accent {
  animation: glow-pulse 4s ease-in-out infinite;
}

/* ─── Service card hover shimmer ────────────────────────── */
.service-card:hover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(168,181,200,0.03) 45%,
    rgba(168,181,200,0.06) 50%,
    rgba(168,181,200,0.03) 55%,
    transparent 80%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out;
  pointer-events: none;
  z-index: 1;
}

/* ─── Stagger helpers (used by JS) ─────────────────────── */
.stagger-in {
  opacity: 0;
  transform: translateY(30px);
}
.stagger-in.visible {
  animation: fade-slide-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ─── Nav link underline ────────────────────────────────── */
.nav-link::after {
  content: '';
  display: block;
  height: 1px;
  width: 0;
  background: var(--silver-mid);
  transition: width var(--trans-med);
  margin-top: 1px;
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* ─── Focus visible (accessibility) ────────────────────── */
:focus-visible {
  outline: 2px solid var(--navy-light);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ─── AOS overrides for dark theme ─────────────────────── */
[data-aos] {
  pointer-events: none;
}
[data-aos].aos-animate {
  pointer-events: auto;
}