/* ==============================
   HHpoker Landing Page
   Custom Styles (Tailwind extended)
   ============================== */

/* ----- Smooth Scroll ----- */
html {
  scroll-behavior: smooth;
}

/* ----- Selection ----- */
::selection {
  background-color: #2563eb;
  color: #ffffff;
}

/* ----- Navbar Scroll Effect ----- */
#navbar.scrolled {
  background-color: rgba(255, 255, 255, 0.98);
  border-bottom-color: #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* ----- FAQ Accordion ----- */
.faq-item.active {
  background-color: #ffffff;
  border-color: #dbeafe;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.06);
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
  background-color: #2563eb;
}

.faq-item.active .faq-icon i {
  color: #ffffff;
}

.faq-toggle:hover .faq-icon {
  background-color: #eff6ff;
}

.faq-item.active .faq-toggle:hover .faq-icon {
  background-color: #1d4ed8;
}

/* ----- Counter Animation ----- */
.counter {
  font-variant-numeric: tabular-nums;
}

/* ----- Mobile Menu ----- */
#mobile-menu:not(.hidden) {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ----- Feature Card Hover ----- */
.group:hover .group-hover\:bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

/* ----- Focus Styles ----- */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ----- Image Fallback ----- */
img {
  text-indent: -9999px;
}

/* ----- Loading / Lazy Image Fade ----- */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.4s ease;
}

img[loading="lazy"].loaded,
img[loading="lazy"][src] {
  opacity: 1;
}

/* ----- Testimonial Quote Mark ----- */
#testimonials .bg-white.rounded-3xl .text-blue-100 {
  font-family: Georgia, serif;
  line-height: 1;
  user-select: none;
}

/* ----- Responsive Fine-Tuning ----- */
@media (max-width: 640px) {
  .text-5xl {
    font-size: 2.5rem;
    line-height: 1.1;
  }
  .text-6xl {
    font-size: 2.75rem;
    line-height: 1.1;
  }
  .text-9xl {
    font-size: 5rem;
  }
}

/* ----- Animation for Stats on Scroll ----- */
@media (prefers-reduced-motion: no-preference) {
  .counter.animated {
    animation: countIn 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }
}

/* ----- Floating Card Animation ----- */
.hero-floating-card {
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}