/* =====================================================
   Smart Doctor Booking Pro — Animations CSS
   Extra micro-interactions and keyframe animations
   ===================================================== */

/* ─── Entry Animations ─────────────────────────────── */
@keyframes sdb-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sdb-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sdb-scale-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes sdb-slide-right {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─── Utility classes ──────────────────────────────── */
.sdb-fade-up       { animation: sdb-fade-up   .5s cubic-bezier(.4,0,.2,1) both; }
.sdb-fade-in       { animation: sdb-fade-in   .4s ease both; }
.sdb-scale-in      { animation: sdb-scale-in  .35s cubic-bezier(.4,0,.2,1) both; }
.sdb-slide-right   { animation: sdb-slide-right .4s ease both; }

/* Stagger children */
.sdb-stagger > *:nth-child(1) { animation-delay: .05s; }
.sdb-stagger > *:nth-child(2) { animation-delay: .10s; }
.sdb-stagger > *:nth-child(3) { animation-delay: .15s; }
.sdb-stagger > *:nth-child(4) { animation-delay: .20s; }
.sdb-stagger > *:nth-child(5) { animation-delay: .25s; }
.sdb-stagger > *:nth-child(6) { animation-delay: .30s; }

/* ─── Card hover 3D effect ─────────────────────────── */
.sdb-card-3d {
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s;
  transform-style: preserve-3d;
  will-change: transform;
}
.sdb-card-3d:hover {
  transform: perspective(800px) rotateX(2deg) rotateY(-2deg) translateY(-6px);
  box-shadow: 0 20px 48px rgba(79,70,229,.18);
}

/* ─── Floating animation ───────────────────────────── */
@keyframes sdb-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
.sdb-float {
  animation: sdb-float 3s ease-in-out infinite;
}

/* ─── Pulse ring (for emergency badge) ─────────────── */
@keyframes sdb-pulse-ring {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
.sdb-pulse-ring {
  position: relative;
}
.sdb-pulse-ring::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .4;
  animation: sdb-pulse-ring 1.5s ease-out infinite;
}

/* ─── Gradient border animation ────────────────────── */
@keyframes sdb-border-rotate {
  to { --angle: 360deg; }
}
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.sdb-gradient-border {
  border: 3px solid transparent;
  background-image: linear-gradient(var(--sdb-surface), var(--sdb-surface)),
                    conic-gradient(from var(--angle), #4f46e5, #7c3aed, #06b6d4, #4f46e5);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  animation: sdb-border-rotate 3s linear infinite;
}

/* ─── Typing cursor ─────────────────────────────────── */
@keyframes sdb-blink {
  50% { opacity: 0; }
}
.sdb-cursor::after {
  content: '|';
  animation: sdb-blink .7s step-end infinite;
  color: var(--sdb-primary);
}

/* ─── Button ripple effect ──────────────────────────── */
.sdb-btn {
  position: relative;
  overflow: hidden;
}
.sdb-btn::after {
  content: '';
  position: absolute;
  inset: 50%;
  background: rgba(255,255,255,.3);
  border-radius: 50%;
  transform: scale(0);
  transition: transform .4s, opacity .4s;
  opacity: 0;
}
.sdb-btn:active::after {
  inset: 0;
  transform: scale(1);
  opacity: 0;
  transition: 0s;
}

/* ─── Slot pulse (newly available) ─────────────────── */
@keyframes sdb-slot-appear {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}
.sdb-slot {
  animation: sdb-slot-appear .2s ease both;
}
.sdb-slot:nth-child(1)  { animation-delay: .02s; }
.sdb-slot:nth-child(2)  { animation-delay: .04s; }
.sdb-slot:nth-child(3)  { animation-delay: .06s; }
.sdb-slot:nth-child(4)  { animation-delay: .08s; }
.sdb-slot:nth-child(5)  { animation-delay: .10s; }
.sdb-slot:nth-child(6)  { animation-delay: .12s; }
.sdb-slot:nth-child(7)  { animation-delay: .14s; }
.sdb-slot:nth-child(8)  { animation-delay: .16s; }
.sdb-slot:nth-child(9)  { animation-delay: .18s; }
.sdb-slot:nth-child(10) { animation-delay: .20s; }

/* ─── Loading dots ──────────────────────────────────── */
@keyframes sdb-dot-bounce {
  0%, 80%, 100% { transform: scale(0); opacity: .3; }
  40%           { transform: scale(1); opacity: 1; }
}
.sdb-loading-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.sdb-loading-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sdb-primary);
  animation: sdb-dot-bounce 1.2s infinite ease-in-out;
}
.sdb-loading-dots span:nth-child(2) { animation-delay: .16s; }
.sdb-loading-dots span:nth-child(3) { animation-delay: .32s; }

/* ─── Counter up animation ──────────────────────────── */
.sdb-counter { transition: all .6s cubic-bezier(.4,0,.2,1); }

/* ─── Page transition ───────────────────────────────── */
.sdb-page-enter {
  animation: sdb-fade-up .4s ease both;
}

/* ─── Search bar focus glow ─────────────────────────── */
.sdb-hero__search-box:focus-within {
  box-shadow: 0 0 0 4px rgba(255,255,255,.35), var(--sdb-shadow-lg);
  transform: translateY(-2px);
  transition: all .3s;
}

/* ─── Notification badge bounce ─────────────────────── */
@keyframes sdb-badge-bounce {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.2); }
}
.sdb-badge-new {
  animation: sdb-badge-bounce .5s ease 3;
}

/* ─── WhatsApp float pulse ──────────────────────────── */
@keyframes sdb-wa-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
  70%  { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
.sdb-whatsapp-float {
  animation: sdb-wa-pulse 2s infinite;
}

/* ─── Scroll-triggered reveal (JS required) ─────────── */
.sdb-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease;
}
.sdb-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Glassmorphism card variant ────────────────────── */
.sdb-glass-card {
  background: var(--sdb-glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--sdb-glass-border);
  border-radius: var(--sdb-radius-xl);
  box-shadow: 0 8px 32px rgba(79,70,229,.12);
}

/* ─── Neumorphism card variant ──────────────────────── */
.sdb-neumorphic {
  background: var(--sdb-bg);
  border-radius: var(--sdb-radius-xl);
  box-shadow:
    8px 8px 16px rgba(174,174,192,.3),
    -8px -8px 16px rgba(255,255,255,.7);
}
.sdb-neumorphic:hover {
  box-shadow:
    4px 4px 8px rgba(174,174,192,.25),
    -4px -4px 8px rgba(255,255,255,.6);
}

/* ─── Intersection Observer reveal JS helper ─────────── */
/* Include in footer: */
/*
document.addEventListener('DOMContentLoaded', () => {
  const obs = new IntersectionObserver(entries => {
    entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
  }, { threshold: 0.15 });
  document.querySelectorAll('.sdb-reveal').forEach(el => obs.observe(el));
});
*/