/* ==========================================================================
   NAPOLI DATA — Motion System CSS
   Todas las clases son opt-in; si el elemento no tiene .nd-reveal/.nd-strike/etc
   se comporta como siempre.
   ========================================================================== */

/* ---------- Fade-up reveal ---------- */
.nd-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 800ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}
.nd-reveal-in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Line-through draw ---------- */
.nd-strike {
  position: relative;
  display: inline-block;
  color: var(--nd-text-muted);
  white-space: nowrap;
}
.nd-strike::after {
  content: "";
  position: absolute;
  left: 0;
  top: 55%;
  height: 2.5px;
  width: 0;
  background: currentColor;
  opacity: 0.6;
  border-radius: 2px;
  transition: width 900ms cubic-bezier(0.7, 0, 0.3, 1);
}
.nd-strike.nd-strike-drawn::after {
  width: 100%;
}

/* ---------- Breath glow (hero / CTA) ---------- */
@keyframes nd-breath {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}
.nd-breath {
  animation: nd-breath 7s ease-in-out infinite;
}

/* ---------- Soft pulse (badges) ---------- */
@keyframes nd-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.08); }
}
.nd-pulse {
  animation: nd-pulse 3s ease-in-out infinite;
}

/* ---------- Glow pulse (featured metric highlight) ---------- */
@keyframes nd-glow-pulse {
  0%, 100% { text-shadow: 0 0 0 rgba(16, 185, 129, 0); }
  50%      { text-shadow: 0 0 22px rgba(16, 185, 129, 0.35); }
}
.nd-glow-pulse {
  animation: nd-glow-pulse 4s ease-in-out infinite;
}

/* ---------- Hover shine (pills, cards) ---------- */
.nd-shine {
  position: relative;
  overflow: hidden;
}
.nd-shine::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255,255,255,0.08) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 700ms ease;
  pointer-events: none;
}
.nd-shine:hover::before {
  transform: translateX(100%);
}

/* ---------- Chat bubbles (typing indicator) ---------- */
.nd-typing {
  display: inline-flex;
  gap: 4px;
  padding: 0 2px;
  align-items: center;
  height: 16px;
}
.nd-typing span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--nd-text-muted);
  animation: nd-typing-dot 1.3s ease-in-out infinite;
}
.nd-typing span:nth-child(2) { animation-delay: 0.15s; }
.nd-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes nd-typing-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-3px); opacity: 1; }
}

/* ---------- Arrow nudge on hover ---------- */
.nd-nudge span,
.nd-nudge .nd-arrow {
  display: inline-block;
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nd-nudge:hover span,
.nd-nudge:hover .nd-arrow {
  transform: translateX(4px);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .nd-reveal, .nd-reveal-in,
  .nd-strike::after,
  .nd-breath, .nd-pulse, .nd-glow-pulse,
  .nd-shine::before, .nd-typing span,
  .nd-nudge span, .nd-nudge .nd-arrow {
    animation: none !important;
    transition: none !important;
  }
  .nd-reveal { opacity: 1; transform: none; }
  .nd-strike::after { width: 100%; }
}