/* ============================================================
   Happy Miracle Tour & Safari — Custom Styles
   Supplements Tailwind CSS. Only includes what Tailwind can't do:
   animations, parallax, custom UI components.
   ============================================================ */

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

::selection {
  background: rgba(201, 168, 76, 0.3);
  color: #0F2B24;
}

/* ── Scroll-driven reveal animations ──────── */
[data-animate] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-animate="fade"] {
  transform: translateY(0);
}

[data-animate="slide-left"] {
  transform: translateX(-60px);
}
[data-animate="slide-left"].is-visible {
  transform: translateX(0);
}

[data-animate="slide-right"] {
  transform: translateX(60px);
}
[data-animate="slide-right"].is-visible {
  transform: translateX(0);
}

[data-animate="scale"] {
  transform: scale(0.9);
}
[data-animate="scale"].is-visible {
  transform: scale(1);
}

/* Stagger children */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-stagger].is-visible > *:nth-child(1) { transition-delay: 0s; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: 0.1s; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: 0.2s; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: 0.3s; }
[data-stagger].is-visible > *:nth-child(5) { transition-delay: 0.35s; }
[data-stagger].is-visible > *:nth-child(6) { transition-delay: 0.4s; }
[data-stagger].is-visible > *:nth-child(7) { transition-delay: 0.45s; }
[data-stagger].is-visible > *:nth-child(8) { transition-delay: 0.5s; }
[data-stagger].is-visible > *:nth-child(9) { transition-delay: 0.55s; }

[data-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ── Parallax helper ──────────────────────── */
.parallax-bg {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ── Hero video/image overlay gradient ────── */
.hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0.15) 40%,
    rgba(0, 0, 0, 0.5) 100%
  );
}

/* ── Translucent header states ────────────── */
.site-header {
  transition: background-color 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
}

.site-header.scrolled {
  background-color: rgba(15, 43, 36, 0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 24px rgba(0, 0, 0, 0.15);
}

/* ── Image hover zoom ─────────────────────── */
.img-zoom {
  overflow: hidden;
}
.img-zoom img {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.img-zoom:hover img {
  transform: scale(1.08);
}

/* ── Card lift on hover ───────────────────── */
.card-hover {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

/* ── Section divider parallax image ───────── */
.section-divider {
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

@supports (-webkit-touch-callout: none) {
  /* iOS doesn't support background-attachment: fixed */
  .section-divider {
    background-attachment: scroll;
  }
}

/* ── Hamburger animation ──────────────────── */
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ── Mobile nav overlay ───────────────────── */
.mobile-nav-overlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.mobile-nav-overlay.open {
  opacity: 1;
  visibility: visible;
}

.mobile-nav-panel {
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-nav-overlay.open .mobile-nav-panel {
  transform: translateX(0);
}

/* ── Counter animation ────────────────────── */
.counter-number {
  font-variant-numeric: tabular-nums;
}

/* ── WhatsApp floating button ─────────────── */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.5);
}

/* ── Scroll-to-top button ─────────────────── */
.scroll-top-btn {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}
.scroll-top-btn.visible {
  opacity: 1;
  visibility: visible;
}
.scroll-top-btn:hover {
  transform: translateY(-3px);
}

/* ── Cookie banner ────────────────────────── */
.cookie-banner {
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.cookie-banner.show {
  transform: translateY(0);
}

/* ── Accordion ────────────────────────────── */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-item.active .accordion-content {
  max-height: 500px;
}

.accordion-icon {
  transition: transform 0.3s ease;
}
.accordion-item.active .accordion-icon {
  transform: rotate(180deg);
}

/* ── Wizard progress bar ──────────────────── */
.wizard-progress-fill {
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Tags / Badge chips ───────────────────── */
.tag-chip {
  font-size: 0.75rem;
  letter-spacing: 0.03em;
}

/* ── Loading shimmer ──────────────────────── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background: linear-gradient(90deg, #f0ebe1 25%, #e8e2d6 50%, #f0ebe1 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ── Horizontal scroll for mobile cards ──── */
.scroll-x-snap {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.scroll-x-snap > * {
  scroll-snap-align: start;
}
.scroll-x-snap::-webkit-scrollbar {
  display: none;
}

/* ── Language switcher dropdown ────────────── */
.lang-dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.25s ease;
}
.lang-trigger:hover .lang-dropdown,
.lang-trigger:focus-within .lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ── Print ────────────────────────────────── */
@media print {
  .site-header, .site-footer, .whatsapp-float, .scroll-top-btn, .cookie-banner {
    display: none !important;
  }
}