/* ==========================================================================
   Visit Qatar page refresh (2026-10-06) - loaded after alkhaleej-travel.web.css
   1. Visit Qatar brand font (all screen sizes)
   2. Phone / small-tablet fixes (<= 991px)
   3. Phone / small-tablet motion (<= 991px, only while <html> has .vq-motion,
      which the inline script in index.php adds - see js/vq-motion.js)
   ========================================================================== */

/* 1. Brand font ----------------------------------------------------------- */
@font-face {
  font-family: "Visit Qatar";
  src: url("../fonts/VisitQatar-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Visit Qatar";
  src: url("../fonts/VisitQatar-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Visit Qatar";
  src: url("../fonts/VisitQatar-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Visit Qatar";
  src: url("../fonts/VisitQatar-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bbt-colours--paragraphs: "Visit Qatar", "Segoe UI", Arial, sans-serif;
  --bbt-colours--headings: "Visit Qatar", "Segoe UI", Arial, sans-serif;
}

/* Hero background slideshow (all screen sizes) - photos come from the CMS */
.vq-hero-slides {
  overflow: hidden;
  background-color: #0b2a33;
}
.vq-hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.vq-hero-slide.is-active {
  opacity: 1;
  animation: vq-slide-zoom 7.6s ease-out both;
}
@keyframes vq-slide-zoom {
  from { scale: 1.08; }
  to { scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .vq-hero-slide.is-active { animation: none; }
}

/* Hero on phones: lighter overlay (dark only behind the title and the ticker),
   title a little higher so it sits over sky / stands rather than faces,
   and gentler zoom so the photos stay sharp */
@keyframes vq-slide-zoom-sm {
  from { scale: 1.04; }
  to { scale: 1; }
}
@keyframes vq-kenburns-sm {
  from { scale: 1.08; }
  to { scale: 1; }
}
@media screen and (max-width: 767px) {
  .bt-header-home-background-video-wrapper .bt-image-overlay-layer {
    background-color: transparent;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.15) 14%, rgba(0, 0, 0, 0.42) 27%, rgba(0, 0, 0, 0.48) 45%, rgba(0, 0, 0, 0.2) 62%, rgba(0, 0, 0, 0.18) 80%, rgba(0, 0, 0, 0.6) 100%);
  }
  .bt-section-header-home .bt-header-content {
    align-items: flex-start;
    padding-top: 19vh;
    padding-top: 19svh;
  }
  .vq-hero-slide.is-active {
    animation-name: vq-slide-zoom-sm;
  }
  html.vq-motion .bt-header-home-background-video.vq-hero-slides {
    animation-name: vq-kenburns-sm;
  }
}
@media screen and (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .vq-hero-slide.is-active { animation: none; }
}

/* 2. Phone / small-tablet fixes ------------------------------------------- */
@media screen and (max-width: 991px) {

  /* Hero ticker: one line per label, calm continuous scroll */
  .bt-banner-hero-component {
    overflow: hidden;
  }
  .bt-banner-hero-wrapper {
    width: max-content;
  }
  .bt-banner-hero-marquee {
    width: max-content;
    flex: 0 0 auto;
    justify-content: flex-start;
    animation: vq-ticker 26s linear infinite;
  }
  .bt-banner-hero-text-wrapper {
    flex: 0 0 auto;
    position: relative;
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }
  .bt-banner-hero-text-wrapper::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -2px;
    width: 4px;
    height: 4px;
    margin-top: -2px;
    border-radius: 50%;
    background-color: rgba(255, 253, 248, 0.6);
  }
  .bt-banner-hero-link-text {
    white-space: nowrap;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
  }

  /* About text: left-aligned (justified text leaves big gaps on narrow screens) */
  .bt-layout-offers-component .w-richtext p {
    text-align: left !important;
  }

  /* Explore cards: darker gradient so the white text stays readable */
  .bt-layout-packages-card .bt-layout-overlay {
    background-color: transparent !important;
    background-image: linear-gradient(180deg, rgba(0, 24, 32, 0.3) 0%, rgba(0, 24, 32, 0.64) 30%, rgba(0, 24, 32, 0.78) 100%) !important;
  }
  .bt-layout-packages-card-content .bt-heading-style-h3,
  .bt-layout-packages-card-content .bt-text-style-regular {
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
  }

  /* Menu: solid bar while the menu is open + the burger turns into a close (X) */
  #menuBar.vq-menu-open {
    background-color: rgb(0, 98, 123) !important;
    box-shadow: none;
  }
  .bt-menu-icon_line-top,
  .bt-menu-icon-line-middle,
  .bt-menu-icon_line-bottom {
    transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.3s ease;
  }
  .w-nav-button.w--open .bt-menu-icon_line-top {
    transform: translateY(8px) rotate(45deg);
  }
  .w-nav-button.w--open .bt-menu-icon-line-middle {
    opacity: 0;
    transform: scaleX(0.2);
  }
  .w-nav-button.w--open .bt-menu-icon_line-bottom {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* Explore intro: normal sentence case */
  .vq-explore-intro {
    text-transform: none !important;
  }

  /* Buttons: small press feedback on touch */
  .bt-button {
    transition: transform 0.2s ease;
  }
  .bt-button:active {
    transform: scale(0.97);
  }
}

/* Same solid menu bar for browsers that support :has() (no script needed) */
@media screen and (max-width: 991px) {
  #menuBar:has(.w-nav-button.w--open) {
    background-color: rgb(0, 98, 123) !important;
    box-shadow: none;
  }
}

/* 3. Phone / small-tablet motion ------------------------------------------ */
@keyframes vq-ticker {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-100%, 0, 0); }
}
@keyframes vq-rise {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes vq-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes vq-drop {
  from { opacity: 0; transform: translate3d(0, -16px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes vq-letter {
  from { transform: translate3d(0, 110%, 0); }
  to { transform: none; }
}
@keyframes vq-kenburns {
  from { scale: 1.18; }
  to { scale: 1; }
}
@keyframes vq-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

@media screen and (max-width: 991px) and (prefers-reduced-motion: no-preference) {
  /* Menu links slide in one after another when the menu opens */
  .w-nav-menu[data-nav-menu-open] .bt-navbar-link {
    animation: vq-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .w-nav-menu[data-nav-menu-open] .bt-navbar-link:nth-child(2) { animation-delay: 0.07s; }
  .w-nav-menu[data-nav-menu-open] .bt-navbar-link:nth-child(3) { animation-delay: 0.14s; }
  .w-nav-menu[data-nav-menu-open] .bt-navbar-link:nth-child(4) { animation-delay: 0.21s; }
  .w-nav-menu[data-nav-menu-open] .bt-navbar-link:nth-child(5) { animation-delay: 0.28s; }
}

@media screen and (max-width: 991px) {

  /* Webflow's own whole-block fade-ups are replaced by the finer reveals below */
  html.vq-motion .bt-layout-offers-component,
  html.vq-motion .bt-layout-alkhaleej-content-wrapper {
    opacity: 1 !important;
    transform: none !important;
  }

  /* -- Hero: entrance on load -- */
  html.vq-motion .bt-header-home-background-video-wrapper {
    overflow: hidden;
  }
  html.vq-motion .bt-header-home-background-video {
    animation: vq-kenburns 2.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  html.vq-motion #menuBar .bt-navbar-container,
  html.vq-motion .mob .bt-padding-section-large > p,
  html.vq-motion .bt-section-hero-banner {
    opacity: 0;
  }
  html.vq-motion.vq-ready #menuBar .bt-navbar-container {
    animation: vq-drop 0.8s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  html.vq-motion.vq-ready .mob .bt-padding-section-large > p:first-child {
    animation: vq-rise 0.9s 0.25s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  html.vq-motion.vq-ready .mob .bt-padding-section-large > p:last-child {
    animation: vq-rise 0.9s 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  html.vq-motion.vq-ready .bt-section-hero-banner {
    animation: vq-fade 1.2s 1.3s ease both;
  }
  /* "QATAR": letters rise out of a mask, one after another */
  html.vq-motion .mob .section-hero:not(.vq-split) {
    opacity: 0;
  }
  html.vq-motion .mob .section-hero .vq-w > span {
    transform: translate3d(0, 110%, 0);
  }
  html.vq-motion.vq-ready .mob .section-hero .vq-w > span {
    animation: vq-letter 1s calc(0.4s + var(--i) * 0.07s) cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  /* Split text: each word / letter sits in a mask (room left for the Q's tail) */
  html.vq-motion .vq-w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.16em;
    margin-bottom: -0.16em;
  }
  html.vq-motion .vq-w > span {
    display: inline-block;
  }

  /* -- Section headings: words rise when they scroll into view -- */
  html.vq-motion .bt-section-layout-offers .bt-heading-style-h2:not(.vq-split),
  html.vq-motion .bt-section-layout-packages .bt-heading-style-h2:not(.vq-split),
  html.vq-motion .bt-section-layout-image .bt-heading-style-h2:not(.vq-split),
  html.vq-motion .bt-section-layout-alkhaleej .bt-heading-style-h2:not(.vq-split) {
    opacity: 0;
  }
  html.vq-motion .bt-heading-style-h2.vq-split .vq-w > span {
    transform: translate3d(0, 110%, 0);
    transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: calc(var(--i) * 0.08s);
  }
  html.vq-motion .bt-heading-style-h2.vq-split.vq-in .vq-w > span {
    transform: none;
  }

  /* -- Text, buttons, footer: fade and rise into place -- */
  html.vq-motion .bt-section-layout-offers .w-richtext,
  html.vq-motion .vq-explore-intro,
  html.vq-motion .bt-section-layout-image .bt-text-style-regular,
  html.vq-motion .bt-layout-content-right > .bt-text-style-regular,
  html.vq-motion .bt-section-layout-offers .bt-button,
  html.vq-motion .bt-section-layout-image .bt-button,
  html.vq-motion .bt-section-layout-alkhaleej .bt-button,
  html.vq-motion .bt-footer-logo-link,
  html.vq-motion .bt-footer-link,
  html.vq-motion .bt-footer-social-link,
  html.vq-motion .bt-footer-credit-text {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--vq-d, 0s);
  }
  html.vq-motion .bt-section-layout-offers .bt-button,
  html.vq-motion .bt-section-layout-image .bt-button,
  html.vq-motion .bt-section-layout-alkhaleej .bt-button {
    transition-delay: 0.15s;
  }
  html.vq-motion .vq-in.w-richtext,
  html.vq-motion .vq-in.vq-explore-intro,
  html.vq-motion .vq-in.bt-text-style-regular,
  html.vq-motion .vq-in.bt-button,
  html.vq-motion .vq-in.bt-footer-logo-link,
  html.vq-motion .vq-in.bt-footer-link,
  html.vq-motion .vq-in.bt-footer-social-link,
  html.vq-motion .vq-in.bt-footer-credit-text {
    opacity: 1;
    transform: none;
  }

  /* -- Arch photos: a curtain lifts while the photo settles from a zoom -- */
  html.vq-motion .arch-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background-color: #fffdf8;
    transform-origin: 50% 0;
    transition: transform 1.15s cubic-bezier(0.77, 0, 0.18, 1);
    transition-delay: var(--vq-d, 0s);
  }
  html.vq-motion .bt-section-layout-image .arch-card::after {
    background-color: #00627b;
  }
  html.vq-motion .arch-card.vq-in::after {
    transform: scaleY(0);
  }
  html.vq-motion .arch-card img {
    scale: 1.35;
    transition: scale 1.8s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--vq-d, 0s);
  }
  html.vq-motion .arch-card.vq-in img {
    scale: 1.12;
  }

  /* -- Explore cards: rise in, photo settles, text follows -- */
  html.vq-motion .bt-layout-packages-card {
    opacity: 0;
    transform: translate3d(0, 48px, 0);
    transition: opacity 1s cubic-bezier(0.2, 0.7, 0.2, 1), transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  html.vq-motion .bt-layout-packages-card.vq-in {
    opacity: 1;
    transform: none;
  }
  html.vq-motion .bt-layout-packages-card .bt-layout-image {
    scale: 1.32;
    transition: scale 1.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  html.vq-motion .bt-layout-packages-card.vq-in .bt-layout-image {
    scale: 1.12;
  }
  html.vq-motion .bt-layout-packages-card .bt-heading-style-h3,
  html.vq-motion .bt-layout-packages-card .bt-text-style-regular,
  html.vq-motion .bt-layout-packages-card .bt-package-button {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  html.vq-motion .bt-layout-packages-card .bt-heading-style-h3 { transition-delay: 0.35s; }
  html.vq-motion .bt-layout-packages-card .bt-text-style-regular { transition-delay: 0.5s; }
  html.vq-motion .bt-layout-packages-card .bt-package-button { transition-delay: 0.65s; }
  html.vq-motion .bt-layout-packages-card.vq-in .bt-heading-style-h3,
  html.vq-motion .bt-layout-packages-card.vq-in .bt-text-style-regular,
  html.vq-motion .bt-layout-packages-card.vq-in .bt-package-button {
    opacity: 1;
    transform: none;
  }
  html.vq-motion .bt-layout-packages-card.vq-in .bt-icon-embed-xxsmall {
    animation: vq-nudge 1.6s 1.8s ease-in-out infinite;
  }
}