/* =====================================================
   Easy Taxi Pattaya – Page-specific styles (index.php)
   ===================================================== */

/* Section Animation on Scroll - Progressive Enhancement */
/* Elements start VISIBLE - JS will add animation only when ready */
.js-ready .reveal-pending {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.js-ready .reveal-pending.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero gradient text */
.gradient-text {
  background: linear-gradient(135deg, #febb02, #ffdd66);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Trust strip */
.trust-strip {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
}

/* Pricing highlight row */
.pricing-highlight {
  background: linear-gradient(90deg, #eff6ff, #ffffff) !important;
}

/* Section gradient heading */
.heading-accent {
  position: relative;
  display: inline-block;
}

.heading-accent::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #006ce4, #003580);
  border-radius: 2px;
}

/* Smooth card entrance */
@keyframes cardEntrance {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.card-entrance {
  animation: cardEntrance 0.5s ease forwards;
}

/* WhatsApp/LINE button glow */
.btn-whatsapp {
  background: linear-gradient(135deg, #25D366, #20bd5a);
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.35);
}

.btn-whatsapp:hover {
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.5);
  transform: translateY(-2px);
}

.btn-line {
  background: linear-gradient(135deg, #06C755, #05b34c);
  box-shadow: 0 4px 20px rgba(6, 199, 85, 0.35);
}

.btn-line:hover {
  box-shadow: 0 6px 28px rgba(6, 199, 85, 0.5);
  transform: translateY(-2px);
}

/* Hero CTA button animation */
@keyframes ctaPulse {
  0%,
  100% {
    box-shadow: 0 4px 20px rgba(254, 187, 2, 0.4);
  }

  50% {
    box-shadow: 0 8px 32px rgba(254, 187, 2, 0.7);
  }
}

.cta-pulse {
  animation: ctaPulse 2s ease-in-out infinite;
}