/* QBH Travels — loader, reveal animations, responsive overrides */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: clip;
}

/* Lock scroll while loader plays */
html.qbh-loader-active,
body.qbh-loader-active {
  overflow: hidden !important;
}

body.qbh-loader-active {
  position: fixed;
  width: 100%;
  inset: 0;
}

body.qbh-loader-active #site-root {
  pointer-events: none;
}

body.qbh-scroll-ready:not(.qbh-loader-active) {
  position: static;
  width: auto;
}

/* --- Scroll reveal --- */
.animate-hidden {
  opacity: 0;
  transform: translateY(32px);
  filter: blur(4px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, filter;
}

.animate-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.animate-heading.animate-visible {
  letter-spacing: -0.02em;
}

/* --- Site root --- */
#site-root {
  width: 100%;
  min-height: 100vh;
}

/* Hero title responsive override */
#hero h1 {
  font-size: clamp(2.25rem, 8vw, 4.75rem) !important;
}

/* Hero background — hide top & bottom of image */
#hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 850px;
  z-index: 0;
  overflow: hidden;
}

#hero-bg .hero-bg-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      #0a0a0a 0%,
      rgba(10, 10, 10, 0.92) 8%,
      rgba(10, 10, 10, 0.45) 22%,
      transparent 38%,
      transparent 62%,
      rgba(10, 10, 10, 0.45) 78%,
      rgba(10, 10, 10, 0.92) 92%,
      #0a0a0a 100%
    ),
    radial-gradient(
      ellipse 95% 72% at 50% 48%,
      transparent 0%,
      rgba(10, 10, 10, 0.25) 35%,
      rgba(10, 10, 10, 0.75) 65%,
      #0a0a0a 100%
    );
}

/* Hero vertical rhythm — 20px between heading, tabs, bar, offers title */
#hero .qbh-hero-heading,
#hero #hero-tabs,
#hero #hero-search-bar {
  margin-bottom: 20px !important;
}

/* --- Mobile nav --- */
.qbh-nav-desktop {
  display: flex;
}

.qbh-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  cursor: pointer;
}

.qbh-mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: rgba(10, 10, 10, 0.97);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem;
}

.qbh-mobile-nav.is-open {
  display: flex;
}

.qbh-mobile-nav a {
  font-size: 1.25rem;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
}

.qbh-mobile-nav a:hover {
  color: #F8C400;
}

.qbh-mobile-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 1.5rem;
}

/* Hero tab active state */
.qbh-tab-active {
  border-color: rgba(248, 196, 0, 0.5) !important;
  background: rgba(248, 196, 0, 0.1) !important;
  color: #F8C400 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.qbh-tab-inactive {
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  border: none;
}

/* --- Hero: only bg visible until gate reveal, then 1s simultaneous entrance --- */
#site-root.qbh-hero-waiting .qbh-hero-el {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#site-root.qbh-hero-revealed .qbh-hero-el {
  visibility: visible;
  pointer-events: auto;
}

@keyframes qbhHeroNavDown {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes qbhHeroFromLeft {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes qbhHeroFromRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

#site-root.qbh-hero-revealed #hero-header,
#site-root.qbh-hero-revealed > .qbh-header--hero {
  animation: qbhHeroNavDown 2.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#site-root.qbh-hero-revealed .qbh-hero-heading,
#site-root.qbh-hero-revealed #hero-tabs,
#site-root.qbh-hero-revealed #hero-search-bar,
#site-root.qbh-hero-revealed #hero-packages-head {
  animation: qbhHeroFadeUp 2.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#site-root.qbh-hero-revealed .qbh-offer-card-left {
  animation: qbhHeroFromLeft 2.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#site-root.qbh-hero-revealed .qbh-offer-card-center {
  animation: qbhHeroFromBottom 2.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#site-root.qbh-hero-revealed .qbh-offer-card-right {
  animation: qbhHeroFromRight 2.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  #site-root.qbh-hero-waiting .qbh-hero-el {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  #site-root.qbh-hero-revealed .qbh-hero-el,
  #site-root.qbh-hero-revealed #hero-header,
  #site-root.qbh-hero-revealed > .qbh-header--hero,
  #site-root.qbh-hero-revealed .qbh-offer-card-left,
  #site-root.qbh-hero-revealed .qbh-offer-card-center,
  #site-root.qbh-hero-revealed .qbh-offer-card-right {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* FAQ */
.qbh-faq-answer {
  display: none;
}

.qbh-faq-item.is-open .qbh-faq-answer {
  display: block;
}

/* --- Responsive grids --- */
@media (max-width: 1023px) {
  .qbh-nav-desktop {
    display: none !important;
  }

  .qbh-menu-btn {
    display: flex;
  }

  #site-root .grid.grid-cols-3:not(.qbh-mobile-carousel-track),
  #site-root .grid.grid-cols-4:not(.qbh-mobile-carousel-track) {
    grid-template-columns: 1fr !important;
  }

  #site-root .grid.grid-cols-12 {
    grid-template-columns: 1fr !important;
  }

  #site-root .grid.grid-cols-12 > .col-span-4 {
    grid-column: span 1 !important;
  }

  #site-root header .flex.items-center.gap-6 button span {
    font-size: 0;
  }

  #site-root header .flex.items-center.gap-6 button {
    min-width: auto;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #site-root .grid.grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 767px) {
  #site-root .flex.flex-row.items-center {
    flex-direction: column !important;
  }

  #site-root .flex.flex-row.items-center > div {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .animate-hidden {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  #loader-wrapper .gate,
  #loader-wrapper .text-reveal {
    animation: none !important;
    transform: none !important;
  }
}