/* ===========================================================
   Al Qaswa Travel & Tours — Design System
   Navy #0B2350 / Gold #B8842A, drawn from brand mark
   Display: Playfair Display  |  Body: Inter  |  Utility: Space Grotesk
=========================================================== */

:root{
  --navy-950:#081633;
  --navy-900:#0B2350;
  --navy-800:#123069;
  --navy-700:#1B3E82;
  --gold-600:#9C6F1F;
  --gold-500:#B8842A;
  --gold-400:#CB9C42;
  --gold-300:#DFB968;
  --ivory-50:#FAF6EC;
  --ivory-100:#F3ECDB;
  --paper:#FDFBF6;
  --ink-900:#161B22;
  --ink-600:#4B5563;
  --brick-600:#8C3A26;
  --line:#E4DCC7;
}

*{scroll-behavior:smooth;}

body{
  background:var(--paper);
  color:var(--ink-900);
  font-family:'Inter',sans-serif;
}

.font-display{font-family:'Playfair Display',serif;}
.font-utility{font-family:'Space Grotesk',sans-serif; letter-spacing:.06em;}

/* ---------- texture: faint topographic wash on ivory sections ---------- */
.topo-wash{
  background-color:var(--ivory-50);
  background-image:
    radial-gradient(circle at 15% 20%, rgba(184,132,42,0.07) 0, transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(11,35,80,0.06) 0, transparent 45%);
}

/* ---------- signature: triple-peak ridge divider (echoes the mark) ---------- */
.ridge-divider{
  display:block;
  width:100%;
  height:46px;
  line-height:0;
}
.ridge-divider svg{width:100%; height:100%; display:block;}

/* ---------- nav ---------- */
.nav-link{
  position:relative;
  font-family:'Space Grotesk',sans-serif;
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ivory-100);
  opacity:.85;
  transition:opacity .2s ease;
}
.nav-link:hover{opacity:1;}
.nav-link.active{opacity:1;}
.nav-link.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-10px;
  height:2px;
  background:var(--gold-500);
}

/* ---------- buttons ---------- */
.btn-gold{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:linear-gradient(180deg,var(--gold-400),var(--gold-600));
  color:var(--navy-950);
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:.85rem 1.6rem;
  border-radius:2px;
  box-shadow:0 8px 20px -8px rgba(184,132,42,.55);
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 12px 24px -8px rgba(184,132,42,.65);}

.btn-outline{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border:1px solid rgba(250,246,236,.4);
  color:var(--ivory-50);
  font-family:'Space Grotesk',sans-serif;
  font-weight:500;
  font-size:.8rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:.8rem 1.5rem;
  border-radius:2px;
  transition:border-color .18s ease, background .18s ease;
}
.btn-outline:hover{border-color:var(--gold-400); background:rgba(184,132,42,.08);}

.btn-navy{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--navy-900);
  color:var(--ivory-50);
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:.8rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:.8rem 1.5rem;
  border-radius:2px;
  transition:background .18s ease;
}
.btn-navy:hover{background:var(--navy-800);}

/* ---------- eyebrow label ---------- */
.eyebrow{
  font-family:'Space Grotesk',sans-serif;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-500);
}

/* ---------- cards ---------- */
.card{
  background:var(--paper);
  border:1px solid var(--line);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 40px -22px rgba(11,35,80,.35);
  border-color:var(--gold-400);
}

.stat-frame{border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

/* ---------- destination art (CSS-generated, mountain-motif) ---------- */
.dest-art{position:relative; overflow:hidden;}
.dest-art svg{position:absolute; inset:0; width:100%; height:100%;}

/* ---------- glass search bar ---------- */
.glass{
  background:rgba(250,246,236,.10);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(250,246,236,.22);
}
.glass select, .glass input{
  background:transparent;
  color:var(--ivory-50);
  font-family:'Space Grotesk',sans-serif;
  font-size:.85rem;
}
.glass select option{color:var(--ink-900);}
.glass ::placeholder{color:rgba(250,246,236,.55);}

/* ---------- step connector ---------- */
.step-line{background:repeating-linear-gradient(90deg,var(--gold-400) 0 8px, transparent 8px 16px);}

/* ---------- map pulse dots ---------- */
.pulse-dot{position:relative;}
.pulse-dot::before{
  content:"";
  position:absolute; inset:-8px;
  border-radius:9999px;
  background:rgba(184,132,42,.35);
  animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{
  0%{ transform:scale(.4); opacity:.9;}
  100%{ transform:scale(1.9); opacity:0;}
}

/* ---------- whatsapp float ---------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:50;
  width:56px; height:56px; border-radius:9999px;
  background:#1FBE5D;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 26px -10px rgba(0,0,0,.4);
  transition:transform .2s ease;
}
.wa-float:hover{transform:scale(1.08);}

/* ---------- fade-in on scroll ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- mobile menu ---------- */
#mobileMenu{transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;}
#mobileMenu.open{transform:translateY(0); opacity:1; pointer-events:auto;}

/* scrollbar accent (subtle) */
::selection{background:var(--gold-300); color:var(--navy-950);}

/* ===========================================================
   MODERN / ANIMATED UPGRADE LAYER
=========================================================== */

/* page load fade */
html{opacity:0; animation:page-in .6s ease forwards;}
@keyframes page-in{to{opacity:1;}}

/* ---------- sticky nav: shrinks + gains shadow on scroll ---------- */
#siteHeader{transition:box-shadow .35s ease, background-color .35s ease, height .35s ease;}
#siteHeader.scrolled{box-shadow:0 12px 30px -18px rgba(0,0,0,.55); background-color:rgba(8,22,51,.98);}
#siteHeader.scrolled .brand-logo{height:2.5rem; width:2.5rem;}

/* underline sweep on nav links */
.nav-link::before{
  content:"";
  position:absolute; left:0; bottom:-10px; height:2px; width:0;
  background:var(--gold-500);
  transition:width .25s ease;
}
.nav-link:hover::before{width:100%;}
.nav-link.active::before{width:100%;}
.nav-link.active::after{display:none;}

/* ---------- staggered reveal (JS assigns --d) ---------- */
.reveal{transition-delay:var(--d,0ms);}
.reveal-up{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.22,.8,.32,1), transform .7s cubic-bezier(.22,.8,.32,1); transition-delay:var(--d,0ms);}
.reveal-up.in{opacity:1; transform:translateY(0);}
.reveal-scale{opacity:0; transform:scale(.92); transition:opacity .6s ease, transform .6s cubic-bezier(.22,.8,.32,1); transition-delay:var(--d,0ms);}
.reveal-scale.in{opacity:1; transform:scale(1);}
.reveal-left{opacity:0; transform:translateX(-28px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.8,.32,1); transition-delay:var(--d,0ms);}
.reveal-left.in{opacity:1; transform:translateX(0);}
.reveal-right{opacity:0; transform:translateX(28px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.8,.32,1); transition-delay:var(--d,0ms);}
.reveal-right.in{opacity:1; transform:translateX(0);}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-up, .reveal-scale, .reveal-left, .reveal-right{opacity:1 !important; transform:none !important; transition:none !important;}
  html{animation:none; opacity:1;}
  .float-layer, .drift, .shimmer, .gradient-shift{animation:none !important;}
}

/* ---------- button shine sweep ---------- */
.btn-gold, .btn-navy{position:relative; overflow:hidden;}
.btn-gold::after, .btn-navy::after{
  content:"";
  position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-20deg);
  transition:left .55s ease;
}
.btn-gold:hover::after, .btn-navy:hover::after{left:130%;}

/* ---------- hero: animated gradient + parallax mountain layers ---------- */
.hero-gradient{
  background:radial-gradient(circle at 50% 0%, rgba(184,132,42,.22), transparent 55%),
             linear-gradient(120deg, var(--navy-950), var(--navy-900) 45%, var(--navy-800));
  background-size:200% 200%;
  animation:gradient-shift 14s ease-in-out infinite;
}
@keyframes gradient-shift{
  0%,100%{background-position:0% 0%;}
  50%{background-position:100% 60%;}
}
.float-layer{animation:float-y 7s ease-in-out infinite;}
.float-layer.delay-1{animation-delay:.8s;}
.float-layer.delay-2{animation-delay:1.6s;}
@keyframes float-y{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}
.drift{animation:drift-x 22s linear infinite;}
@keyframes drift-x{
  0%{transform:translateX(0);}
  50%{transform:translateX(-2.5%);}
  100%{transform:translateX(0);}
}

/* twinkling stars in hero */
.star{position:absolute; width:3px; height:3px; border-radius:9999px; background:var(--gold-300); animation:twinkle 3.4s ease-in-out infinite;}
@keyframes twinkle{
  0%,100%{opacity:.15; transform:scale(.8);}
  50%{opacity:.9; transform:scale(1.3);}
}

/* ---------- hero headline gradient text ---------- */
.text-shine{
  background:linear-gradient(90deg, var(--gold-300), var(--gold-500) 45%, var(--gold-300));
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 5s linear infinite;
}
@keyframes shimmer{
  0%{background-position:0% center;}
  100%{background-position:220% center;}
}

/* ---------- card image zoom on hover ---------- */
.dest-art{transform:translateZ(0);}
.dest-art svg{transition:transform .5s cubic-bezier(.22,.8,.32,1);}
.card:hover .dest-art svg{transform:scale(1.08);}

/* card top accent line that grows on hover */
.card{position:relative;}
.card::before{
  content:""; position:absolute; top:0; left:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--gold-400),var(--gold-600));
  transition:width .4s ease; z-index:1;
}
.card:hover::before{width:100%;}

/* ---------- counters ---------- */
.counter{font-variant-numeric:tabular-nums;}

/* ---------- star rating (animated fill) ---------- */
.stars{display:inline-flex; gap:2px;}
.stars svg{width:15px; height:15px; opacity:0; transform:scale(.4) rotate(-15deg); animation:star-pop .4s ease forwards;}
.stars svg:nth-child(1){animation-delay:.05s;}
.stars svg:nth-child(2){animation-delay:.15s;}
.stars svg:nth-child(3){animation-delay:.25s;}
.stars svg:nth-child(4){animation-delay:.35s;}
.stars svg:nth-child(5){animation-delay:.45s;}
@keyframes star-pop{to{opacity:1; transform:scale(1) rotate(0);}}

/* ---------- review cards ---------- */
.review-card{
  background:var(--paper);
  border:1px solid var(--line);
  transition:transform .3s cubic-bezier(.22,.8,.32,1), box-shadow .3s ease, border-color .3s ease;
}
.review-card:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 46px -24px rgba(11,35,80,.4);
  border-color:var(--gold-400);
}
.avatar-ring{
  background:conic-gradient(var(--gold-400), var(--gold-600), var(--gold-300), var(--gold-400));
  padding:2px; border-radius:9999px;
}
.avatar-inner{
  background:var(--navy-900); color:var(--ivory-50);
  border-radius:9999px; display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display',serif;
}
.rating-bar-track{background:var(--line); border-radius:9999px; overflow:hidden;}
.rating-bar-fill{
  background:linear-gradient(90deg,var(--gold-400),var(--gold-600));
  height:100%; width:0; border-radius:9999px;
  transition:width 1.1s cubic-bezier(.22,.8,.32,1);
}
.rating-bar-fill.in{width:var(--w,0%);}

/* quote mark */
.quote-mark{font-family:'Playfair Display',serif; line-height:1; color:var(--gold-400); opacity:.5;}

/* ---------- section label rule ---------- */
.rule-flank{position:relative; display:inline-block;}
.rule-flank::before, .rule-flank::after{
  content:""; position:absolute; top:50%; width:34px; height:1px; background:var(--gold-500); opacity:.6;
}
.rule-flank::before{right:calc(100% + 14px);}
.rule-flank::after{left:calc(100% + 14px);}

/* ---------- link underline utility (footer/nav polish) ---------- */
.link-fade{transition:color .2s ease, opacity .2s ease;}

/* ---------- back to top ---------- */
.back-top{
  position:fixed; right:22px; bottom:88px; z-index:49;
  width:44px; height:44px; border-radius:9999px;
  background:var(--navy-900); color:var(--ivory-50);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, background .2s ease;
  box-shadow:0 12px 24px -12px rgba(0,0,0,.5);
}
.back-top.show{opacity:1; pointer-events:auto; transform:translateY(0);}
.back-top:hover{background:var(--gold-600);}