/* Reveal on scroll base styles */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-visible {
  opacity: 1;
  transform: none;
}

/* Dark mode fallback styles */
html.dark body {
  background-color: #0f172a;
  /* slate-900 */
  color: #e2e8f0;
  /* slate-200 */
}

html.dark header {
  background-color: rgba(15, 23, 42, 0.8);
}

html.dark footer {
  border-color: #334155;
  /* slate-700 */
  color: #94a3b8;
  /* slate-400 */
}

/* Convert common light backgrounds to dark surfaces */
html.dark .bg-white {
  background-color: #1f2937 !important;
  /* slate-800 */
}

/* Tweak common text utilities to lighter shades */
html.dark .text-slate-800 {
  color: #f8fafc !important;
  /* slate-50 */
}

html.dark .text-slate-700,
html.dark .text-slate-600 {
  color: #cbd5e1 !important;
  /* slate-300 */
}

/* Subtle borders on cards */
html.dark .border-slate-100 {
  border-color: #334155 !important;
  /* slate-700 */
}

/* Section backgrounds that were light gradients */
html.dark #packages,
html.dark #gallery,
html.dark #reviews,
html.dark #about,
html.dark #contact {
  background: #0f172a;
}

/* Mobile menu hover */
html.dark #mobileMenu a:hover {
  background-color: #1f2937;
}

/* --- Animation Utilities --- */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.animated-gradient-text {
  background-image: linear-gradient(90deg, #0ea5e9, #14b8a6, #f59e0b, #f97316);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientShift 12s ease infinite;
}

@keyframes blobMove {
  0% {
    transform: translate(0px, 0px) scale(1);
  }

  33% {
    transform: translate(30px, -20px) scale(1.05);
  }

  66% {
    transform: translate(-20px, 20px) scale(0.95);
  }

  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

.animate-blob {
  animation: blobMove 14s ease-in-out infinite;
}

.animation-delay-2s {
  animation-delay: 2s;
}

.animation-delay-4s {
  animation-delay: 4s;
}

/* Card hover lift */
.card-animated {
  transition: transform 300ms ease, box-shadow 300ms ease;
}

.card-animated:hover {
  transform: translateY(-6px);
}

/* card 2 package */
@keyframes slideDown {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }

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

.animate-slideDown {
  animation: slideDown 0.3s ease-out;
}

/* Lightbox pop-in */
@keyframes scaleFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

#lightbox.lightbox-open img {
  animation: scaleFadeIn 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Counter pop at end */
@keyframes counterPop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

.counter-pop {
  animation: counterPop 300ms ease-out;
}