@font-face {
  font-family: "The Hourse";
  src: url("assets/fonts/the-hourse.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "The Hourse";
  src: url("assets/fonts/the-hourse-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

html {
  scroll-behavior: smooth;
  background-color: #000;
}

body {
  font-family: "Montserrat", sans-serif;
}

.font-heading {
  font-family: "The Hourse", serif;
}

/* Hero heading: fluid view-width sizing from mobile up to just below the tablet
   breakpoint, so "Unforgettable" and "Stays in Agadir" each hold a single line and
   scale up smoothly with the viewport. From md (768px) up, Tailwind's fixed
   md:text-6xl / lg:text-7xl classes take over. */
@media (max-width: 767px) {
  .hero-heading {
    font-size: 12vw;
  }
}

/* Auto-scrolling client strip: Swiper loop + autoplay handles the motion,
   this just guarantees a linear (non-eased) continuous glide. */
.clients-swiper .swiper-wrapper {
  transition-timing-function: linear !important;
}

/* GLightbox: keep the sharp-corner, dark luxury feel inside the lightbox itself */
.gslide-image img {
  border-radius: 0 !important;
}

.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev {
  background-color: rgba(0, 0, 0, 0.6) !important;
  border-radius: 0 !important;
}

/* Villa "Watch Video" lightbox: GLightbox's inline slide defaults to a white content
   box — drop that so it's just Streamable's embed, on the normal dark backdrop. No sizing
   rules here: the embed's own padding-bottom wrapper is left to size itself as given. */
.gslide-inline,
.gslide-inline .ginlined-content {
  background: transparent !important;
}

/* Preloader: dark vignette background, staggered fade-up of label/logo/bar,
   then a fill animation on the thin gold line for a "loading" feel. */
#preloader {
  background: radial-gradient(ellipse at center, #2a2320 0%, #000 55%);
}

@media (max-width: 767px) {
  #preloader {
    background: radial-gradient(ellipse at center, #211b18 0%, #000 40%);
  }
}

#preloader.preloader-hide {
  opacity: 0;
  pointer-events: none;
}

.preloader-item {
  opacity: 0;
  transform: translateY(10px);
  animation: preloaderIn 0.9s ease forwards;
}

.preloader-item-1 {
  animation-delay: 0.1s;
}

.preloader-item-2 {
  animation-delay: 0.35s;
}

.preloader-item-3 {
  animation-delay: 0.7s;
}

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

.preloader-bar {
  width: 0%;
  animation: preloaderBar 1.4s ease-in-out 0.9s forwards;
}

@keyframes preloaderBar {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

/* Simple fade-in used for the hero content once the video is ready */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}