/* ============================================================
   ANIMATIONS — Fade-ins, hover effects, scroll reveals
   ============================================================ */

/* ── Keyframes ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes shimmer {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Utility classes ── */
.fade-up   { animation: fadeUp   0.7s ease both; }
.fade-in   { animation: fadeIn   0.5s ease both; }
.delay-1   { animation-delay: 0.1s; }
.delay-2   { animation-delay: 0.2s; }
.delay-3   { animation-delay: 0.3s; }
.delay-4   { animation-delay: 0.4s; }
.delay-5   { animation-delay: 0.5s; }

/* ── Scroll reveal (added by JS) ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── WhatsApp pulse ── */
.whatsapp-btn { animation: pulse 2.5s ease-in-out infinite; }
.whatsapp-btn:hover { animation: none; }

/* ── Nalla Neram shimmer ── */
.nalla-badge { animation: shimmer 2s ease-in-out infinite; }

/* ── Stat numbers ── */
.stat-num, .astat-num {
  transition: color var(--transition), transform var(--transition);
}
.stat-item:hover .stat-num,
.astat-box:hover .astat-num {
  color: var(--gold);
  transform: scale(1.08);
}

/* ── Service card hover glow ── */
.svc-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at center, rgba(184,135,58,0.04) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}
.svc-card:hover::after { opacity: 1; }

/* ── Hero dot grid subtle animation ── */
.hero-bg-dots {
  animation: fadeIn 1.5s ease both;
}

/* ── Info items hover ── */
.info-item {
  transition: border-color var(--transition), box-shadow var(--transition);
}
.info-item:hover {
  border-color: var(--gold);
  box-shadow: 0 2px 12px rgba(184,135,58,0.1);
}

/* ── Highlight items ── */
.highlight-item {
  transition: background var(--transition), border-color var(--transition);
}
.highlight-item:hover {
  background: var(--gold-pale);
  border-color: var(--border2);
}

/* ── Button ripple ── */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.12);
  opacity: 0;
  transition: opacity 0.15s;
}
.btn:active::after { opacity: 1; }