/* MocoPros Premium CSS — Animations & Custom Styles */
/* Tailwind CDN handles layout/spacing/color; this handles keyframes & overrides */

/* ===== FONTS ===== */
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

/* ===== CHAT WIDGET VISIBILITY ===== */
#chat-widget {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#chat-widget.hidden {
  display: block !important;
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  pointer-events: none;
}

/* ===== CHAT PULSE ANIMATION ===== */
@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2.4); opacity: 0; }
}
.chat-pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #3b82f6;
  animation: pulse-ring 2.5s ease-out infinite;
  z-index: -1;
}

/* ===== TYPING DOTS ===== */
@keyframes typing-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
  40%            { transform: scale(1);   opacity: 1; }
}
.typing-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;
  animation: typing-bounce 1.4s ease-in-out infinite;
  margin: 0 2px;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

/* ===== MOBILE NAV DRAWER ===== */
.nav-drawer {
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-drawer.open { transform: translateX(0); }

/* ===== SERVICES DROPDOWN ===== */
.nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 280px;
  z-index: 50;
}
.nav-dropdown-trigger:hover .nav-dropdown,
.nav-dropdown-trigger:focus-within .nav-dropdown { display: block; }

/* ===== STICKY SIDEBAR ===== */
@media (min-width: 1024px) {
  .sticky-sidebar { position: sticky; top: 5.5rem; }
}

/* ===== CHAT MESSAGES SCROLLBAR ===== */
.chat-messages-panel::-webkit-scrollbar { width: 4px; }
.chat-messages-panel::-webkit-scrollbar-track { background: transparent; }
.chat-messages-panel::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }

/* ===== FORM SUCCESS STATE ===== */
@keyframes checkmark-draw {
  from { stroke-dashoffset: 50; }
  to   { stroke-dashoffset: 0; }
}
.form-success-check { stroke-dasharray: 50; stroke-dashoffset: 50; animation: checkmark-draw 0.5s ease forwards; }

/* ===== GRADIENT TEXT (hero accent) ===== */
.gradient-text {
  background: linear-gradient(135deg, #ffffff, #93c5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== HERO PATTERN OVERLAY ===== */
.hero-grid-pattern {
  background-image: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ===== GLOBAL LINK RESET FOR CARD LINKS ===== */
a { text-decoration: none; }
a:hover { text-decoration: none; }

/* ===== PROSE STYLES (rich text) ===== */
.prose p { margin: 0 0 1.1rem; line-height: 1.75; }
.prose h2 { font-size: 1.5rem; font-weight: 800; color: #1e3a5f; margin: 2rem 0 0.75rem; }
.prose h3 { font-size: 1.2rem; font-weight: 700; color: #1e3a5f; margin: 1.5rem 0 0.5rem; }
.prose ul { padding-left: 1.5rem; margin: 0 0 1.1rem; }
.prose li { margin-bottom: 0.4rem; line-height: 1.65; }

/* ===== FAQ ACCORDION STYLE ===== */
.faq-item { border-bottom: 1px solid #e2e8f0; }
.faq-item:last-child { border-bottom: none; }

/* ===== SCROLL ANIMATIONS ===== */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-on-scroll.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* ===== FORM FOCUS MICRO-INTERACTIONS ===== */
input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  border-color: #3b82f6;
  outline: none;
  transition: box-shadow 0.2s, border-color 0.2s;
}

/* ===== SHAKE ANIMATION (empty required fields) ===== */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60%  { transform: translateX(-5px); }
  40%, 80%  { transform: translateX(5px); }
}
.shake { animation: shake 0.4s ease-in-out; }

/* ===== BACK TO TOP BUTTON ===== */
#back-to-top {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 39;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1e3a5f;
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
#back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#back-to-top:hover {
  background: #3b82f6;
  transform: translateY(-2px);
}

/* ===== CHATBOT MP AVATAR ===== */
.mp-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #3b82f6;
  color: #fff;
  font-weight: 900;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: -0.5px;
}