/* ============================================
   AAPoker - Custom Stylesheet
   ============================================ */

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

/* ---------- Selection ---------- */
::selection {
  background-color: #4f46e5;
  color: #ffffff;
}

/* ---------- Focus Outline ---------- */
*:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */

/* Fade In Up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade In Left */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade In Right */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale In */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------- Utility Animation Classes ---------- */
.animate-fadeInUp {
  animation: fadeInUp 0.7s ease-out forwards;
}

.animate-fadeInLeft {
  animation: fadeInLeft 0.7s ease-out forwards;
}

.animate-fadeInRight {
  animation: fadeInRight 0.7s ease-out forwards;
}

.animate-scaleIn {
  animation: scaleIn 0.5s ease-out forwards;
}

/* Staggered animation delays */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* ============================================
   NAVBAR SCROLL EFFECT
   ============================================ */

#navbar.scrolled {
  background-color: rgba(79, 70, 229, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
}

#navbar.scrolled .text-white {
  text-shadow: none;
}

/* Navbar transition */
#navbar {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* ============================================
   FEATURE CARDS HOVER EFFECTS
   ============================================ */

.feature-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

.feature-card .w-14 {
  transition: background-color 0.3s ease;
}

.feature-card i {
  transition: color 0.3s ease;
}

/* ============================================
   FAQ ACCORDION STYLES
   ============================================ */

.faq-item {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.faq-item:hover {
  background-color: #f3f4f6;
}

.faq-item.active {
  background-color: #eef2ff;
  border-color: #c7d2fe;
  box-shadow: 0 4px 20px rgba(79, 70, 229, 0.08);
}

.faq-toggle i {
  transition: transform 0.3s ease;
}

.faq-item.active .faq-toggle i {
  transform: rotate(180deg);
}

.faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease;
  opacity: 0;
}

.faq-item.active .faq-body {
  display: block !important;
  max-height: 500px;
  opacity: 1;
}

/* ============================================
   BUTTON HOVER EFFECTS
   ============================================ */

a[href]:not([href="#"]):not(.no-hover-effect),
button:not(.no-hover-effect) {
  transition: all 0.2s ease;
}

/* CTA buttons pulse animation */
@keyframes ctaPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4);
  }
  50% {
    box-shadow: 0 0 0 15px rgba(79, 70, 229, 0);
  }
}

#cta .bg-white {
  animation: ctaPulse 2.5s infinite;
}

/* ============================================
   MOBILE MENU
   ============================================ */

#mobile-menu {
  transition: max-height 0.3s ease, opacity 0.3s ease;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

#mobile-menu.open {
  max-height: 500px;
  opacity: 1;
}

/* Mobile menu link hover */
#mobile-menu a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* ============================================
   HERO SECTION EXTRA
   ============================================ */

/* Hero image floating badges animation */
@keyframes floatBadge {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

#hero .absolute.-bottom-5 {
  animation: floatBadge 3s ease-in-out infinite;
}

#hero .absolute.-top-5 {
  animation: floatBadge 3s ease-in-out 0.5s infinite;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Tablet and below: 1024px */
@media (max-width: 1024px) {
  #hero h1 {
    font-size: 2.5rem;
    line-height: 1.2;
  }

  #hero .lg\\:text-left {
    text-align: center;
  }

  .feature-card {
    padding: 1.5rem;
  }

  #stats .text-4xl {
    font-size: 2rem;
  }
}

/* Mobile: 768px */
@media (max-width: 768px) {
  #hero {
    min-height: auto;
    padding-top: 6rem;
    padding-bottom: 4rem;
  }

  #hero h1 {
    font-size: 2rem;
  }

  #hero .text-lg {
    font-size: 1rem;
  }

  #features,
  #testimonials,
  #faq,
  #cta {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  #stats .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  #cta h2 {
    font-size: 1.75rem;
  }

  footer .grid {
    gap: 2rem;
  }
}

/* Small Mobile: 480px */
@media (max-width: 480px) {
  #hero h1 {
    font-size: 1.75rem;
  }

  #hero .flex-col.sm\\:flex-row {
    flex-direction: column;
  }

  #hero a {
    width: 100%;
    justify-content: center;
  }

  #stats .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  #stats .text-4xl {
    font-size: 1.5rem;
  }

  .feature-card {
    padding: 1.25rem;
  }

  #cta .flex-col.sm\\:flex-row {
    flex-direction: column;
    width: 100%;
  }

  #cta a {
    width: 100%;
    justify-content: center;
  }

  footer {
    text-align: center;
  }

  footer .flex.items-start {
    justify-content: center;
  }
}

/* ============================================
   COUNTER ANIMATION TRIGGER
   ============================================ */

.counter {
  display: inline-block;
}

/* ============================================
   SCROLL-REVEAL CLASSES
   ============================================ */

.reveal {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.reveal-up {
  transform: translateY(30px);
}

.reveal.reveal-left {
  transform: translateX(-30px);
}

.reveal.reveal-right {
  transform: translateX(30px);
}

.reveal.revealed {
  opacity: 1;
  transform: translate(0);
}

/* ============================================
   PRINT STYLES (HIDE NAV & CTA)
   ============================================ */

@media print {
  #navbar,
  #cta,
  #mobile-menu {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }
}