/* ============================================================
   TOURNAAMA — shared design system
   Blue→teal gradient on near-black. Cormorant / Jost / Inter.
   ============================================================ */

:root{
  /* neutrals */
  --ink:#04070B;        /* page bg, OLED-deep */
  --ink2:#08161F;       /* deep blue-teal dark */
  --ink3:#060D14;       /* alt section bg */
  --paper:#EAF4F6;      /* primary text */
  --muted:rgba(234,244,246,.58);
  --faint:rgba(234,244,246,.40);
  --line:rgba(234,244,246,.12);
  --line2:rgba(234,244,246,.07);

  /* brand */
  --blue:#2C94ED;
  --cyan:#14C5D7;
  --teal:#03E8CB;
  --accent:#14C5D7;                 /* tweakable */
  --grad-angle:100deg;              /* tweakable */
  --grad:linear-gradient(var(--grad-angle),#2C94ED 0%,#14C5D7 50%,#03E8CB 100%);

  /* type */
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
  --label:'Jost',sans-serif;

  /* motion (tweakable: --mo scales durations, 0 disables) */
  --mo:1;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-curtain:cubic-bezier(.76,0,.24,1);

  --grain-op:.05;       /* tweakable */
  --pad-x:clamp(1.5rem,6vw,6rem);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-weight:300;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.lock{overflow:hidden;height:100vh}
::selection{background:var(--cyan);color:var(--ink)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* gradient text */
.gt{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
em,.it{font-style:italic}

/* ---- texture layers ---- */
.grain{
  position:fixed;inset:0;z-index:90;pointer-events:none;
  background-image:url("../assets/grain.png");
  opacity:var(--grain-op);mix-blend-mode:overlay;
}
.vig{position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 280px 80px rgba(0,0,0,.7)}

/* ---- scroll progress ---- */
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:120;background:var(--grad);box-shadow:0 0 14px rgba(20,197,215,.6)}

/* ============================================================
   HEADER / NAV
   ============================================================ */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.6rem var(--pad-x);
  border-bottom:1px solid transparent;
  transition:padding .45s var(--ease),background .45s var(--ease),border-color .45s var(--ease);
  opacity:0;transform:translateY(-14px);
}
header.in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
header.scrolled{
  padding:.95rem var(--pad-x);
  background:rgba(4,7,11,.72);backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:.85rem;cursor:pointer}
.brand .icon{height:34px;width:auto;transition:height .45s var(--ease);filter:drop-shadow(0 2px 12px rgba(20,197,215,.25))}
header.scrolled .brand .icon{height:28px}
.brand .word{
  font-family:var(--label);font-weight:500;
  font-size:clamp(.95rem,1.25vw,1.12rem);letter-spacing:.4em;text-indent:.4em;
}
nav.menu{display:flex;gap:clamp(1.3rem,2.4vw,2.4rem);align-items:center}
nav.menu a{
  font-family:var(--label);font-weight:400;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--paper);opacity:.74;
  position:relative;padding:.2rem 0;transition:opacity .3s,color .3s;
}
nav.menu a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--accent);transition:width .35s var(--ease)}
nav.menu a:hover{opacity:1;color:var(--accent)}
nav.menu a:hover::after{width:100%}
nav.menu a.nav-cta{
  border:1px solid var(--line);padding:.55rem 1.1rem;opacity:.9;border-radius:2px;
}
nav.menu a.nav-cta:hover{border-color:var(--accent);opacity:1}
nav.menu a.nav-cta::after{display:none}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:.4rem;background:none;border:0}
.burger span{display:block;width:24px;height:1.5px;background:var(--paper);transition:.3s}
@media(max-width:860px){
  nav.menu{position:fixed;inset:0;z-index:110;background:rgba(4,7,11,.96);backdrop-filter:blur(20px);
    flex-direction:column;justify-content:center;gap:1.8rem;
    clip-path:circle(0% at calc(100% - 3rem) 2.4rem);visibility:hidden;
    transition:clip-path .6s var(--ease-curtain),visibility 0s linear .6s;pointer-events:none}
  nav.menu.open{clip-path:circle(150% at calc(100% - 3rem) 2.4rem);visibility:visible;
    transition:clip-path .6s var(--ease-curtain),visibility 0s linear 0s;pointer-events:auto}
  nav.menu a{font-size:1.05rem;letter-spacing:.22em;opacity:.9}
  .burger{display:flex;z-index:120}
  nav.menu.open ~ .burger span:nth-child(1),.burger.x span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .burger.x span:nth-child(2){opacity:0}
  .burger.x span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}

/* ============================================================
   BUTTONS
   ============================================================ */
.cta{
  display:inline-flex;align-items:center;gap:.7rem;cursor:pointer;
  font-family:var(--label);font-weight:400;font-size:12.5px;
  letter-spacing:.2em;text-transform:uppercase;
  padding:1.05rem 2.1rem;border:1px solid var(--accent);color:var(--paper);
  background:transparent;border-radius:2px;will-change:transform;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
}
.cta .arr{transition:transform .4s var(--ease)}
.cta:hover{background:var(--grad);color:var(--ink);border-color:transparent}
.cta:hover .arr{transform:translateX(6px)}
.cta.fill{background:var(--grad);color:var(--ink);border-color:transparent}
.cta.fill:hover{filter:brightness(1.08)}
.cta.ghost{border-color:var(--line)}
.cta.ghost:hover{border-color:transparent}
.text-link{
  font-family:var(--label);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  opacity:.72;cursor:pointer;border-bottom:1px solid transparent;padding-bottom:3px;
  display:inline-flex;gap:.5rem;align-items:center;transition:.3s;
}
.text-link:hover{opacity:1;color:var(--accent);border-color:var(--accent)}

/* ============================================================
   LOADER
   ============================================================ */
.loader{
  position:fixed;inset:0;z-index:200;background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:transform 1.05s var(--ease-curtain);
}
.loader.done{transform:translateY(-100%)}
.loader .lw{
  font-family:var(--label);font-weight:500;
  font-size:clamp(1.3rem,4vw,2.3rem);letter-spacing:.5em;text-indent:.5em;display:flex;
}
.loader .lw span{
  display:inline-block;opacity:0;transform:translateY(22px);
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:lin .6s var(--ease) forwards;
}
@keyframes lin{to{opacity:1;transform:none}}
.loader .lline{margin-top:1.5rem;width:0;height:2px;background:var(--grad);animation:lgrow 1s ease .5s forwards}
@keyframes lgrow{to{width:clamp(140px,30vw,260px)}}
.loader .ltag{margin-top:1.05rem;font-family:var(--label);font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);opacity:0;animation:lin .7s ease .9s forwards}

/* ============================================================
   SECTION PRIMITIVES
   ============================================================ */
section.block{position:relative;padding:clamp(4rem,8vw,6.5rem) var(--pad-x)}
.eyebrow,.sec-label{
  font-family:var(--label);font-weight:400;font-size:11.5px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--accent);
}
.eyebrow{display:inline-flex;align-items:center;gap:.9rem}
.eyebrow::before{content:"";width:38px;height:1px;background:currentColor;opacity:.7}
.sec-index{font-family:var(--label);font-size:11px;letter-spacing:.24em;color:var(--faint)}

/* ---- statement ---- */
.statement{background:var(--ink3)}
.statement p{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1.16;max-width:20ch;letter-spacing:-.01em;
}

/* ============================================================
   DESTINATION CARDS
   ============================================================ */
.dest-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1.2rem;margin-bottom:2.8rem}
.dest-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(2.1rem,4.6vw,3.2rem);line-height:1}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.card{
  position:relative;aspect-ratio:3/4;border-radius:2px;overflow:hidden;cursor:pointer;display:block;
  clip-path:inset(0 0 100% 0);transition:clip-path calc(1.1s * var(--mo)) var(--ease);
  background:var(--ink2);
}
.card.in{clip-path:inset(0 0 0 0)}
.card-photo{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform calc(1.2s * var(--mo)) var(--ease);
}
.card:hover .card-photo{transform:scale(1.07)}
.card-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(2,5,9,.86) 0%,rgba(2,5,9,.30) 32%,rgba(2,5,9,.04) 58%,rgba(2,5,9,.20) 100%)}
.card-meta{position:absolute;left:0;right:0;bottom:0;padding:1.5rem 1.6rem;z-index:2}
.card-region{font-family:var(--label);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.card-meta h3{
  font-family:var(--serif);font-weight:500;font-size:1.95rem;line-height:1.06;margin-top:.25rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.card-meta h3 .arr{font-size:1rem;opacity:0;transform:translateX(-8px);transition:.45s var(--ease);color:var(--accent)}
.card:hover .card-meta h3 .arr{opacity:1;transform:none}
.card .hairline{position:absolute;left:1.6rem;bottom:0;height:1px;width:0;background:var(--grad);transition:width .6s var(--ease)}
.card:hover .hairline{width:calc(100% - 3.2rem)}

/* editorial feature card (spans wide) */
.card.feature{aspect-ratio:16/10}
@media(min-width:760px){.card.feature{grid-column:span 2}}

/* ============================================================
   STATS
   ============================================================ */
.stats{background:var(--ink3);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-top:clamp(3rem,5.5vw,4.4rem);padding-bottom:clamp(3rem,5.5vw,4.4rem)}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2.5rem;text-align:center}
.stat .num{font-family:var(--serif);font-weight:500;font-size:clamp(2.5rem,5.2vw,3.7rem);line-height:1}
.stat-ico{width:38px;height:38px;color:var(--accent);opacity:.85;margin:0 auto 1.1rem;display:block}
.stat .cap{font-family:var(--label);font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.62;margin-top:.7rem}
.stat .rule{width:24px;height:1px;background:var(--accent);margin:.85rem auto 0;opacity:.5}

/* ============================================================
   ENQUIRE CTA
   ============================================================ */
.enquire{text-align:center;overflow:hidden}
.enquire .eb{position:absolute;inset:-12%;z-index:0;
  background:radial-gradient(ellipse 60% 50% at 28% 24%,rgba(44,148,237,.34),transparent 58%),
             radial-gradient(ellipse 60% 50% at 74% 82%,rgba(3,232,203,.28),transparent 58%),
             linear-gradient(170deg,var(--ink2),var(--ink));
  animation:ken calc(28s * var(--mo)) ease-in-out infinite alternate;
}
@keyframes ken{from{transform:scale(1.02)}to{transform:scale(1.12)}}
.enquire .inner2{position:relative;z-index:3;max-width:680px;margin:0 auto}
.enquire h2{font-family:var(--serif);font-weight:500;font-size:clamp(2.5rem,6.5vw,4.4rem);line-height:1.02}
.enquire .lede{margin:1.5rem auto 2.4rem;max-width:44ch;font-weight:300;opacity:.82;line-height:1.65}
.btn-pair{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ============================================================
   FOOTER
   ============================================================ */
footer{padding:clamp(3.5rem,6vw,5rem) var(--pad-x) 2.5rem;border-top:1px solid var(--line);position:relative}
.foot-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:2.5rem;margin-bottom:3.2rem}
.foot-logo{height:96px;width:auto;filter:drop-shadow(0 4px 24px rgba(20,197,215,.18))}
@media(max-width:720px){.foot-logo{height:76px}}
.foot-cols{display:flex;gap:clamp(2rem,5vw,4.5rem);flex-wrap:wrap;font-family:var(--label)}
.foot-col h4{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:1.1rem;font-weight:500}
.foot-col a{display:block;font-size:13.5px;opacity:.66;margin-bottom:.7rem;transition:.3s}
.foot-col a:hover{opacity:1;color:var(--accent);transform:translateX(3px)}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:11px;letter-spacing:.05em;opacity:.46;border-top:1px solid var(--line);padding-top:1.8rem;font-family:var(--label)}

/* ============================================================
   REVEAL UTILITIES
   ============================================================ */
.reveal{opacity:0;transform:translateY(30px);transition:opacity calc(1.1s * var(--mo)) var(--ease),transform calc(1.1s * var(--mo)) var(--ease)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:calc(.1s * var(--mo))}
.d2{transition-delay:calc(.22s * var(--mo))}
.d3{transition-delay:calc(.34s * var(--mo))}
.d4{transition-delay:calc(.46s * var(--mo))}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .loader{display:none!important}
  .card{clip-path:none}
  .reveal,.eyebrow,header{opacity:1;transform:none}
}
body.nomotion *{animation:none!important}
body.nomotion .loader{display:none!important}
body.nomotion .card{clip-path:none!important}
body.nomotion .reveal{opacity:1!important;transform:none!important}