/* esc-theme.css — shared editorial brand + motion utilities. Self-contained. */

:root{
  /* ---- editorial brand tokens ---- */
  --paper:#f5efe6; --paper-warm:#ebe1d2; --pearl:#fbf8f3;
  --ink:#1a1410; --ink-soft:#3a2e26;
  --bahrain-red:#b8002e; --bahrain-red-deep:#7a001e;
  --gold:#c89b3c; --gold-soft:#d9b06a;
  --gulf-blue:#1e4a6b; --gulf-deep:#0d2a3f;
  --serif:"Cormorant Garamond","Amiri",Georgia,serif;
  --sans:"Tajawal","Inter",-apple-system,sans-serif;
  --mono:"JetBrains Mono",monospace;
  --radius:10px;
  --shadow-sm:0 2px 8px rgba(26,20,16,.08);
  --shadow-md:0 12px 32px rgba(26,20,16,.14);
  --shadow-lg:0 24px 60px rgba(26,20,16,.22);
  --ease:cubic-bezier(.22,1,.36,1); --dur:.45s;

  /* ---- app-token remap: editorial "Gulf night" dark (default) ---- */
  --bg:#0d1b26; --bg2:#13283a; --surface:#13283a; --surface2:#1a3347;
  --border:rgba(245,239,230,.10); --border2:rgba(245,239,230,.16);
  --text:#f1ece3; --text2:#d9cfbf; --muted:#9a8f80;
  --shadow:rgba(0,0,0,.5);
  --pri:#0d2a3f; --pri2:#1e4a6b; --pri-glow:rgba(200,155,60,.25);
  --acc:#c89b3c; --acc2:#d9b06a;
  --inp-bg:#102132; --inp-bd:rgba(245,239,230,.14);
}

/* ---- app-token remap: editorial light (paper) ---- */
[data-theme="light"]{
  --bg:#f5efe6; --bg2:#ebe1d2; --surface:#fbf8f3; --surface2:#ffffff;
  --border:rgba(26,20,16,.12); --border2:rgba(26,20,16,.18);
  --text:#1a1410; --text2:#3a2e26; --muted:#6b5d4f;
  --shadow:rgba(26,20,16,.12);
  --pri:#0d2a3f; --pri2:#1e4a6b; --pri-glow:rgba(200,155,60,.18);
  --acc:#c89b3c; --acc2:#d9b06a;
  --inp-bg:#ffffff; --inp-bd:rgba(26,20,16,.16);
}

/* ---- serif headings on major section titles (Arabic falls back to Amiri) ---- */
.section-head-txt h2, .section-head h2, .hero h1{ font-family:var(--serif); }

/* ---- scroll-reveal (motion only when user allows) ---- */
@media (prefers-reduced-motion: no-preference){
  [data-reveal]{
    opacity:0; transform:translateY(16px);
    transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  [data-reveal].is-visible{ opacity:1; transform:none; }
  [data-reveal-stagger] > *{
    opacity:0; transform:translateY(16px);
    transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  [data-reveal-stagger].is-visible > *{ opacity:1; transform:none; }
  [data-reveal-stagger].is-visible > *:nth-child(2){ transition-delay:.07s; }
  [data-reveal-stagger].is-visible > *:nth-child(3){ transition-delay:.14s; }
  [data-reveal-stagger].is-visible > *:nth-child(4){ transition-delay:.21s; }
  [data-reveal-stagger].is-visible > *:nth-child(5){ transition-delay:.28s; }

  /* hover lift + gold glow on existing cards */
  .section-card, .service, .dest-card, .postcard{
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .section-card:hover, .service:hover{
    transform:translateY(-3px); box-shadow:var(--shadow-md);
  }
  .dest-card:hover, .postcard:hover{ transform:translateY(-4px) scale(1.012); }

  /* button sheen + press */
  .btn{ position:relative; overflow:hidden; transition:transform .15s var(--ease); }
  .btn:active{ transform:scale(.97); }
  .btn::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);
    transform:translateX(-120%); transition:transform .6s var(--ease);
  }
  .btn:hover::after{ transform:translateX(120%); }
}

/* =====================================================================
   ELEVATION LAYER — "global-agency" polish. Additive + brand-safe.
   Applies across home, booking, reply-builder, about, packages,
   testimonials, contact (any page that loads this file).
   ===================================================================== */

/* ---- RTL hero headlines need more leading than the LTR clamp gives ---- */
[dir="rtl"] .about-hero h1,
[dir="rtl"] .page-hero h1,
[dir="rtl"] .t-hero h1,
[dir="rtl"] .c-hero h1{ line-height:1.18; }

/* ---- text selection + focus visibility (a11y + polish) ---- */
::selection{ background:var(--gold-soft); color:#1a1410; }
:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}
.btn:focus-visible,
.filter-chip:focus-visible,
.chip-group label:focus-within{
  outline:2px solid var(--gold);
  outline-offset:3px;
}
/* remove the ugly default ring only where we provide our own */
a:focus:not(:focus-visible){ outline:none; }

/* ---- refined custom scrollbar (webkit) ---- */
@media (pointer:fine){
  *::-webkit-scrollbar{ width:11px; height:11px; }
  *::-webkit-scrollbar-track{ background:transparent; }
  *::-webkit-scrollbar-thumb{
    background:rgba(120,100,70,.35); border-radius:99px;
    border:3px solid transparent; background-clip:content-box;
  }
  *::-webkit-scrollbar-thumb:hover{ background:rgba(120,100,70,.55); background-clip:content-box; }
}

/* ---- top scroll-progress bar (injected by esc-motion.js) ---- */
#esc-progress{
  position:fixed; inset-block-start:0; inset-inline-start:0;
  height:3px; width:0%;
  background:linear-gradient(90deg, var(--bahrain-red), var(--gold) 70%, var(--gold-soft));
  z-index:1000; pointer-events:none;
  box-shadow:0 0 14px rgba(200,155,60,.55);
  transition:width .1s linear;
}

/* ---- sticky header: scroll-state shrink + lift ---- */
.site-header{
  transition:padding .35s var(--ease), background .35s var(--ease),
             box-shadow .35s var(--ease), border-color .35s var(--ease);
  will-change:padding, box-shadow;
}
.site-header.scrolled{
  background:rgba(245,239,230,.96);
  box-shadow:0 10px 30px -16px rgba(26,20,16,.35);
  border-bottom-color:rgba(26,20,16,.10);
}
.site-header.scrolled .container{ padding-block:11px; }
.site-header .container{ transition:padding .35s var(--ease); }
.site-header .brand-logo{ transition:height .35s var(--ease); }
.site-header.scrolled .brand-logo{ height:36px; }

/* ---- three.js 3D mounts (esc-3d.js) ---- */
[data-esc-3d]{ position:relative; }
.esc-3d-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; pointer-events:none; z-index:0;
}
/* static fallback (reduced-motion / no-WebGL / CDN down): a soft brand glow.
   Removed once the live canvas reports ready. */
[data-esc-3d]::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:
    radial-gradient(closest-side, rgba(200,155,60,.16), transparent 70%),
    radial-gradient(closest-side at 65% 60%, rgba(30,74,107,.18), transparent 70%);
  opacity:1; transition:opacity .6s var(--ease);
}
[data-esc-3d].esc-3d-ready::before{ opacity:0; }

/* home hero globe sits behind the floating postcards */
.hero-visual .hero-3d{ position:absolute; inset:-12% -16%; z-index:0; }
.hero-visual .postcard, .hero-visual .hero-orbit{ z-index:3; }

/* contact "Bahrain → world" 3D globe replaces the flat map block area */
.locale .bahrain-3d{ position:absolute; inset:0; z-index:0; }

/* ambient particle layer for dark/light sections (covers section, behind content) */
.esc-3d-host{ position:relative; }
.esc-3d-ambient{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.esc-3d-host > .container{ position:relative; z-index:1; }
/* keep the dark-section grain behind the particle layer */
.esc-3d-host::after{ z-index:-1; }

/* ---- mobile navigation (hamburger → slide-down panel) ---- */
.nav-toggle{
  display:none;
  width:44px; height:44px; flex-direction:column; gap:5px;
  align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--border2, rgba(26,20,16,.18));
  border-radius:12px; cursor:pointer; padding:0;
}
.nav-toggle span{
  display:block; width:20px; height:2px; border-radius:2px;
  background:var(--ink, #1a1410); transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.site-header.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
.site-header.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:900px){
  .nav-toggle{ display:flex; }
  .site-header{ position:sticky; }
  .site-header .nav{
    display:flex; flex-direction:column; gap:2px;
    position:absolute; inset-inline:0; top:100%;
    background:var(--pearl, #fbf8f3);
    border-bottom:1px solid var(--rule, rgba(26,20,16,.12));
    box-shadow:0 24px 40px -24px rgba(26,20,16,.4);
    padding:10px max(5vw,16px) 18px;
    transform:translateY(-14px); opacity:0; pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease);
  }
  .site-header.nav-open .nav{ transform:none; opacity:1; pointer-events:auto; }
  .site-header .nav a{ padding:14px 14px; font-size:16px; border-radius:10px; }
}

/* ---- image placeholder tint: never flash raw gray while loading ---- */
.postcard .img, .dest-card, .insta-tile, .pkg-img,
.story-img, .t-img, .hero-visual .img{
  background-color:var(--paper-warm);
}

/* ---- card image zoom on hover (structurally safe: clipped parents) ---- */
@media (prefers-reduced-motion: no-preference){
  .pkg{ overflow:hidden; }
  .pkg-img{ transition:transform .7s var(--ease); transform-origin:center; }
  .pkg:hover .pkg-img{ transform:scale(1.07); }

  .insta-tile{ transition:transform .7s var(--ease); }
  .insta-tile:hover{ transform:scale(1.04); }

  .channel{ transition:transform .3s var(--ease), box-shadow .35s var(--ease); }
}

/* ---- richer dest-card overlay on hover ---- */
.dest-card .label{ transition:padding .4s var(--ease); }
@media (prefers-reduced-motion: no-preference){
  .dest-card:hover .label{ padding-block-end:32px; }
}

/* ---- refined primary buttons: depth + warmth ---- */
.btn-primary{ box-shadow:0 6px 18px -10px rgba(26,20,16,.5); }
.btn-primary:hover{ box-shadow:0 12px 26px -10px rgba(184,0,46,.45); }

/* ---- eyebrow: animated lead rule ---- */
@media (prefers-reduced-motion: no-preference){
  .eyebrow::before{ transition:width .5s var(--ease); }
  [data-reveal] .eyebrow::before,
  [data-reveal].eyebrow::before{ width:0; }
  [data-reveal].is-visible .eyebrow::before,
  [data-reveal].is-visible.eyebrow::before{ width:24px; }
}

/* ---- pearl divider: gentle living glow ---- */
@media (prefers-reduced-motion: no-preference){
  .pearl-divider .pearl{ animation:escPearl 3.2s var(--ease) infinite; }
  @keyframes escPearl{
    0%,100%{ box-shadow:0 0 10px rgba(200,155,60,.35); transform:scale(1); }
    50%{ box-shadow:0 0 20px rgba(200,155,60,.65); transform:scale(1.18); }
  }
}

/* ---- soft grain + vignette on dark sections (depth) ---- */
.values, .contact-strip, .locale{ position:relative; isolation:isolate; }
.values::after, .contact-strip::after, .locale::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(200,155,60,.10), transparent 60%),
    radial-gradient(circle at 18% 28%, rgba(255,255,255,.045) 1px, transparent 1px),
    radial-gradient(circle at 72% 64%, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:100% 100%, 90px 90px, 70px 70px;
}

/* ---- reveal: add a touch of scale for richer entrance ---- */
@media (prefers-reduced-motion: no-preference){
  [data-reveal]{ transform:translateY(20px) scale(.992); }
  [data-reveal].is-visible{ transform:none; }
}

/* ---- WhatsApp FAB: gentle attention pulse ---- */
@media (prefers-reduced-motion: no-preference){
  .fab-wa{ animation:escFab 2.6s ease-in-out infinite; }
  @keyframes escFab{
    0%,100%{ box-shadow:0 8px 24px rgba(37,211,102,.4); }
    50%{ box-shadow:0 8px 30px rgba(37,211,102,.6), 0 0 0 10px rgba(37,211,102,.07); }
  }
  .fab-wa:hover{ animation:none; }
}