/* Frontend enhancements for GoPayana — simple, small CSS to add polish */
:root{
  --accent:#10b981; /* emerald-400 */
  --accent-600:#059669;
}

/* Hero animations */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade-in-down {
  animation: fadeInDown 0.8s ease-out forwards;
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
  animation-delay: 0.2s;
}

.animate-fade-in {
  animation: fadeIn 0.8s ease-out forwards;
  animation-delay: 0.4s;
}

/* small utility shadows and transitions */
.card-hover{
  transition: transform .18s ease, box-shadow .18s ease;
}
.card-hover:hover{
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 12px 30px rgba(2,6,23,0.35);
}

/* subtle gradient text */
.text-gradient{
  background:linear-gradient(90deg,#06b6d4,#10b981,#60a5fa);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}

/* trip card accent */
.trip-card{background:linear-gradient(180deg, rgba(2,6,23,0.55), rgba(2,6,23,0.6)); border:1px solid rgba(148,163,184,0.06)}

/* hero overlay cleanliness */
header + main{scroll-margin-top:80px}

/* responsive tweak for hero */
@media (max-width:640px){
  .animate-fade-in-up,
  .animate-fade-in-down {
    animation-delay: 0s;
  }
}

/* Header category button styles */
header a[href*="#"] {
  transition: all 0.2s ease;
}
header a[href*="#"]:active {
  transform: scale(0.98);
}

/* Popular destinations */
.dest-card .h-28 { height: 7rem; }
.dest-card { overflow: hidden; border-radius: 12px; }

/* Testimonials */
.testimonial { background: linear-gradient(180deg, #ffffff, #fbfbfb); border: 1px solid rgba(2,6,23,0.04); }

/* Newsletter backdrop tweak for better readability */
.backdrop-blur-sm { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* small utility to keep image tiles consistent */
.grid img, .card-hover img { display:block; width:100%; height:auto; }

/* Floating search card styling */
.floating-search-card{ z-index:40; transform:translateY(0); transition: z-index 0.3s ease; }
.floating-search-card.scrolled-down{ z-index:5; }
@media (max-width:768px){
  .floating-search-card{ width:calc(100% - 2rem) !important; margin:0 1rem; }
}

/* Sticky-aware z-index for scroll behavior */
.sticky-aware-z-40{ position:relative; z-index:40; }

/* Mobile 3D card effect */
@media (max-width: 768px) {
    .card-3d {
        position: relative;
        transform-style: preserve-3d;
        transform: perspective(900px) translateY(0) rotateX(6deg);
        transition: transform 0.35s ease, box-shadow 0.35s ease;
        box-shadow:
            0 12px 25px rgba(2, 6, 23, 0.25),
            0 4px 8px rgba(2, 6, 23, 0.2);
        border-radius: 18px;
        background: white;
    }

    .card-3d::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 18px;
        background: linear-gradient(
            180deg,
            rgba(255,255,255,0.15),
            rgba(255,255,255,0)
        );
        pointer-events: none;
    }

    .card-3d:active {
        transform: perspective(900px) translateY(2px) rotateX(0deg) scale(0.98);
        box-shadow:
            0 6px 14px rgba(2, 6, 23, 0.25);
    }
}
#mainHeader {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.hamburger,
.hamburger::before,
.hamburger::after {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  background: white;
  content: '';
  transform: translateX(-50%);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.hamburger {
  top: 50%;
}

.hamburger::before {
  top: -6px;
}

.hamburger::after {
  top: 6px;
}

/* Open state */
.menu-open .hamburger {
  background: transparent;
}

.menu-open .hamburger::before {
  transform: translateX(-50%) rotate(45deg);
  top: 0;
}

.menu-open .hamburger::after {
  transform: translateX(-50%) rotate(-45deg);
  top: 0;
}
/* Hide horizontal scrollbar (mobile swipe) */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Mega menu stagger animation */
.mega-card {
  opacity: 0;
  transform: translateY(8px);
  animation: megaFadeUp 0.45s ease forwards;
}

.mega-card:nth-child(1) { animation-delay: 0.05s; }
.mega-card:nth-child(2) { animation-delay: 0.10s; }
.mega-card:nth-child(3) { animation-delay: 0.15s; }
.mega-card:nth-child(4) { animation-delay: 0.20s; }

@keyframes megaFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.moment-card {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease-out;
}

.moment-card.show {
  opacity: 1;
  transform: translateY(0);
}