/* ==========================================================================
   More Luxury Egypt — Homepage Scroll Hero Prototype
   Namespace: every rule is scoped to .mlesh- (More Luxury Egypt Scroll Hero)
   to avoid collisions when this is later ported into the live theme/CSS.
   ========================================================================== */

:root{
  --mlesh-navy:      #0a0d12;
  --mlesh-navy-soft:  #10151d;
  --mlesh-gold:      #c8a44f;
  --mlesh-gold-soft: rgba(200,164,79,.22);
  --mlesh-off:       #f2efe9;
  --mlesh-off-dim:   #c9cdd4;
  --mlesh-serif:     'Newsreader', Georgia, serif;
  --mlesh-sans:      'Archivo', -apple-system, Segoe UI, Roboto, sans-serif;
  --mlesh-mono:      'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --mlesh-ease:      cubic-bezier(.22,.61,.36,1);
}

.mlesh-root, .mlesh-root *{ box-sizing:border-box; }

.mlesh-root{
  background:var(--mlesh-navy);
  color:var(--mlesh-off);
  font-family:var(--mlesh-sans);
  overflow-x:clip; /* guards against any transform overflow on mobile */
}

.mlesh-skip{
  position:absolute; left:-9999px; top:0;
  background:var(--mlesh-gold); color:var(--mlesh-navy);
  font:600 14px/1 var(--mlesh-sans); padding:12px 18px; z-index:999;
  text-decoration:none;
}
.mlesh-skip:focus{ left:12px; top:12px; }

/* ---------- shared type helpers ---------- */
.mlesh-eyebrow{
  display:inline-block;
  font:500 12px/1 var(--mlesh-mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mlesh-gold);
  margin:0 0 18px;
}
.mlesh-eyebrow.gold{ color:var(--mlesh-gold); }

.mlesh-headline{
  font:500 clamp(2.1rem, 5.4vw, 4.6rem)/1.06 var(--mlesh-serif);
  color:var(--mlesh-off);
  margin:0 0 18px;
  max-width:16ch;
}

.mlesh-sub{
  font:400 clamp(1rem, 1.6vw, 1.2rem)/1.55 var(--mlesh-sans);
  color:var(--mlesh-off-dim);
  max-width:46ch;
  margin:0;
}

/* ==========================================================================
   BASE LAYOUT — no-JS / reduced-motion / mobile default.
   This is the real content, in normal document flow. It is the permanent
   fallback: if JS never runs, this is exactly what every visitor sees, and
   it is fully readable and usable on its own — the noscript block below
   carries the message in plain text; the SVG scene itself is aria-hidden
   and only meaningfully animates once enhanced.
   ========================================================================== */

.mlesh-track{ position:relative; }

.mlesh-viewport{
  position:relative;
  display:block;
  min-height:100svh;
  overflow:hidden;
  background:var(--mlesh-navy);
  border-bottom:1px solid var(--mlesh-gold-soft);
}

.mlesh-photofield{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:.4;
  filter:saturate(.9) brightness(.88);
}
/* Localized text scrim, not a global dark wash: the photo stays clearly
   recognizable across the frame; darkening is concentrated low, behind
   where .mlesh-copy actually sits (bottom ~9vh), so the image itself is
   never crushed just to make room for text. */
.mlesh-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,
      rgba(10,13,18,.12) 0%,
      rgba(10,13,18,.18) 45%,
      rgba(10,13,18,.42) 70%,
      rgba(10,13,18,.82) 88%,
      rgba(10,13,18,.92) 100%);
}

.mlesh-scene{
  position:relative;
  display:block;
  width:100%; height:100%;
  min-height:100svh;
}
.mlesh-scene #mlesh-spine, .mlesh-scene #mlesh-spine-glow{ opacity:.28; }
.mlesh-scene .mlesh-node{ opacity:0; } /* only revealed once enhanced (hero.js fades them in) */
.mlesh-scene #mlesh-brief{ opacity:0; }
.mlesh-scene #mlesh-gate-label,
.mlesh-scene .mlesh-brief-tag{ opacity:0; }
.mlesh-scene #mlesh-brief-title{
  fill:var(--mlesh-gold); font:600 13px/1 var(--mlesh-mono); letter-spacing:.12em;
}
.mlesh-scene .mlesh-brief-tag{
  fill:var(--mlesh-off-dim); font:500 11px/1 var(--mlesh-mono); letter-spacing:.06em;
}
.mlesh-scene #mlesh-gate-l, .mlesh-scene #mlesh-gate-r, .mlesh-scene #mlesh-gate-lintel{
  stroke:var(--mlesh-gold); stroke-width:1.4; opacity:.6;
}
.mlesh-scene #mlesh-gate-label{
  fill:var(--mlesh-gold); font:500 12px/1 var(--mlesh-mono); letter-spacing:.18em;
}

/* base (non-enhanced) state: the SVG scene is decorative and only meaningful
   once it can animate, so mobile / reduced-motion / no-JS visitors get a
   clean dark field and the always-real .mlesh-copy text below instead of a
   frozen diagram. Nothing is lost — the same message, just not drawn. */
html:not(.mlesh-enhanced) .mlesh-scene{ display:none; }

.mlesh-noscript{
  position:relative; z-index:2;
  max-width:640px; margin:0 auto; padding:6vh 6vw 0;
  text-align:center;
  font:400 1rem/1.6 var(--mlesh-sans);
  color:var(--mlesh-off-dim);
}

.mlesh-copy{
  position:relative;
  z-index:2;
  padding:4vh 6vw 9vh;
  max-width:900px;
  margin:0 auto;
  text-align:center;
}

/* progress dots + scroll cue are decorative and only meaningful once the
   cinematic (enhanced) experience is active */
.mlesh-progress, .mlesh-scrollcue{ display:none; }

/* ---------- handoff / CTA section: matches the live site's dark header
   treatment (navy + gold hairline) so the scroll experience resolves
   into the existing brand system rather than a new one ---------- */
.mlesh-handoff{
  position:relative;
  background:var(--mlesh-navy);
  padding:14vh 6vw 12vh;
  border-top:1px solid var(--mlesh-gold-soft);
  text-align:left;
}
.mlesh-container{ max-width:860px; margin:0 auto; text-align:left; }

.mlesh-handoff-brand{
  display:flex; align-items:center; gap:14px;
  margin-bottom:48px;
  padding-bottom:22px;
  border-bottom:1px solid var(--mlesh-gold-soft);
}
.mlesh-handoff-brand img{ width:52px; height:auto; display:block; }
.mlesh-handoff-word{
  font:500 14px/1 var(--mlesh-serif);
  letter-spacing:.18em;
  color:var(--mlesh-off);
}

.mlesh-handoff-title{
  font:500 clamp(2rem, 4.4vw, 3.4rem)/1.1 var(--mlesh-serif);
  margin:0 0 20px;
  max-width:14ch;
}
.mlesh-handoff-sub{
  font:400 1.05rem/1.6 var(--mlesh-sans);
  color:var(--mlesh-off-dim);
  max-width:58ch;
  margin:0 0 40px;
}

.mlesh-handoff-actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:26px;
  margin-bottom:52px;
}

.mlesh-button{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--mlesh-gold); color:var(--mlesh-navy);
  font:600 13px/1 var(--mlesh-sans); letter-spacing:.03em;
  padding:17px 28px; border-radius:2px;
  text-decoration:none;
  transition:background .2s var(--mlesh-ease), color .2s var(--mlesh-ease), transform .2s var(--mlesh-ease);
}
.mlesh-button:hover{ background:#e0bd6b; }
.mlesh-button:focus-visible{
  outline:2px solid var(--mlesh-off); outline-offset:3px;
}

/* second, equally-valid request route (email) — same weight, distinct treatment */
.mlesh-button--outline{
  background:transparent; color:var(--mlesh-off);
  border:1px solid var(--mlesh-gold-soft);
}
.mlesh-button--outline:hover{ background:rgba(200,164,79,.08); border-color:var(--mlesh-gold); color:var(--mlesh-off); }

.mlesh-textlink{
  color:var(--mlesh-off); text-decoration:none;
  font:500 13px/1 var(--mlesh-sans);
  border-bottom:1px solid var(--mlesh-gold-soft);
  padding-bottom:2px;
}
.mlesh-textlink:hover{ border-color:var(--mlesh-gold); color:var(--mlesh-gold); }
.mlesh-textlink:focus-visible, .mlesh-button:focus-visible{
  outline:2px solid var(--mlesh-gold); outline-offset:3px;
}

.mlesh-proof{
  list-style:none; margin:0; padding:22px 0 0; border-top:1px solid var(--mlesh-gold-soft);
  display:flex; flex-wrap:wrap; gap:14px 30px;
  font:500 11.5px/1 var(--mlesh-mono); letter-spacing:.04em;
  color:var(--mlesh-off-dim);
}
.mlesh-proof li::before{ content:"✓ "; color:var(--mlesh-gold); }

.mlesh-footnote{
  background:var(--mlesh-navy);
  color:var(--mlesh-off-dim);
  text-align:center;
  font:400 12px/1.6 var(--mlesh-mono);
  padding:22px 6vw 34px;
  border-top:1px solid var(--mlesh-gold-soft);
}
.mlesh-footnote p{ margin:0; }

/* ==========================================================================
   ENHANCED LAYOUT — added only by JS, only when:
     - GSAP + ScrollTrigger load successfully
     - viewport is desktop-sized (see hero.js DESKTOP_MIN)
     - the visitor has NOT requested reduced motion
   Everything below is additive on top of the base rules above.
   ========================================================================== */
html.mlesh-enhanced .mlesh-track{
  height:270vh; /* opening (fragmented) → brief forms → gate opens */
}

html.mlesh-enhanced .mlesh-viewport{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
}

html.mlesh-enhanced .mlesh-scene{
  display:block;
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:1;
  /* Keep the animated operational drawing in its own upper-stage zone.
     This is a structural collision guard: gate/spine geometry can never
     enter the lower copy zone, at any scroll position or direction. */
  clip-path:inset(0 0 37% 0);
}

/* depth: far nodes sit smaller, dimmer and softly blurred behind the mid
   layer; near nodes sit larger and sharpest — a restrained CSS parallax
   read as depth without any real 3D engine. hero.js only ever animates
   position/opacity/scale on top of this. */
html.mlesh-enhanced .mlesh-node[data-depth="far"]{ filter:blur(1.1px); opacity:.55; }
html.mlesh-enhanced .mlesh-node[data-depth="mid"]{ opacity:.8; }
html.mlesh-enhanced .mlesh-node[data-depth="near"]{ opacity:1; }

html.mlesh-enhanced .mlesh-copy{
  position:absolute; left:7vw; right:11vw; bottom:7vh;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0, 1.7fr) minmax(270px, .7fr);
  grid-template-areas:
    "eyebrow eyebrow"
    "headline supporting";
  align-items:end;
  column-gap:clamp(34px, 5vw, 86px);
  padding:0;
  max-width:none;
  margin:0;
  text-align:left;
}

html.mlesh-enhanced .mlesh-copy .mlesh-eyebrow{
  grid-area:eyebrow;
  margin-bottom:14px;
}

html.mlesh-enhanced .mlesh-copy .mlesh-headline{
  grid-area:headline;
  max-width:none;
  margin:0;
  font-size:clamp(2.8rem, 4vw, 4.6rem);
  line-height:1.02;
}

html.mlesh-enhanced .mlesh-copy .mlesh-sub{
  grid-area:supporting;
  max-width:34ch;
  margin:0 0 .35rem;
  padding:2px 0 2px clamp(20px, 2.2vw, 34px);
  border-left:1px solid rgba(200,164,79,.48);
  font-size:clamp(.98rem, 1.25vw, 1.13rem);
  line-height:1.5;
}

html.mlesh-enhanced .mlesh-progress{
  display:flex; gap:10px; list-style:none; margin:0; padding:0;
  position:absolute; right:5vw; top:50%; transform:translateY(-50%);
  z-index:4; flex-direction:column;
}
html.mlesh-enhanced .mlesh-progress li{
  width:6px; height:6px; border-radius:50%;
  background:rgba(242,239,233,.28);
  transition:background .3s var(--mlesh-ease), transform .3s var(--mlesh-ease);
}
html.mlesh-enhanced .mlesh-progress li.is-active{
  background:var(--mlesh-gold);
  transform:scale(1.35);
}

html.mlesh-enhanced .mlesh-scrollcue{
  display:none; align-items:center; gap:10px;
  position:absolute; left:8vw; bottom:5vh; z-index:4;
  font:500 11px/1 var(--mlesh-mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--mlesh-off-dim);
  transition:opacity .3s var(--mlesh-ease);
}
html.mlesh-enhanced .mlesh-scrollcue i{
  display:block; width:1px; height:26px;
  background:linear-gradient(180deg, var(--mlesh-gold), transparent);
}
html.mlesh-enhanced .mlesh-scrollcue.is-hidden{ opacity:0; }

/* ---------- lightweight, non-pinned reveal used on mobile / reduced motion:
   the base layout is just .mlesh-copy's real heading/paragraph text plus the
   photofield — a gentle fade-up as it enters view, nothing pinned. ---------- */
.mlesh-copy.mlesh-reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .55s var(--mlesh-ease), transform .55s var(--mlesh-ease);
}
.mlesh-copy.mlesh-reveal.is-visible{
  opacity:1; transform:none;
}

/* ==========================================================================
   Reduced motion — hard safety net regardless of JS branch taken above.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .mlesh-copy.mlesh-reveal{
    transition:opacity .01s linear;
    transform:none;
  }
  html.mlesh-enhanced .mlesh-progress li{
    transition:none !important;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:900px){
  .mlesh-copy{ padding:6vh 6vw 7vh; }
  .mlesh-handoff{ padding:10vh 6vw 9vh; }
  .mlesh-handoff-actions{ flex-direction:column; align-items:flex-start; gap:18px; }
  .mlesh-button{ width:100%; }
}

/* Mobile opening parity: keep the approved three-beat gateway timeline, but
   place the SVG stage above an isolated copy rail. This prevents the gate,
   brief and headline from competing for the same small-screen space while
   preserving native forward/reverse scrolling. */
@media (max-width:1023px) and (prefers-reduced-motion:no-preference){
  html.mlesh-enhanced.mlesh-mobile-enhanced .mlesh-track{ height:360svh; }
  html.mlesh-enhanced.mlesh-mobile-enhanced .mlesh-viewport{
    position:sticky; top:0;
    width:100%; height:100svh; min-height:100svh;
    display:grid; grid-template-columns:1fr; grid-template-rows:54svh 46svh;
    gap:0; align-items:stretch; overflow:hidden;
  }
  html.mlesh-enhanced.mlesh-mobile-enhanced .mlesh-photofield{
    opacity:.62; object-position:center 42%;
  }
  html.mlesh-enhanced.mlesh-mobile-enhanced .mlesh-scrim{
    background:linear-gradient(180deg,rgba(10,13,18,.10) 0%,rgba(10,13,18,.20) 42%,rgba(10,13,18,.74) 64%,rgba(10,13,18,.97) 100%);
  }
  html.mlesh-enhanced.mlesh-mobile-enhanced .mlesh-scene{
    position:relative; inset:auto;
    display:block; grid-column:1; grid-row:1;
    width:100%; height:100%; min-height:0;
    align-self:stretch; overflow:hidden; clip-path:none;
  }
  html.mlesh-enhanced.mlesh-mobile-enhanced body .mlesh-copy{
    position:relative; inset:auto;
    display:block; grid-column:1; grid-row:2;
    width:100%; min-width:0; max-width:none;
    margin:0; padding:clamp(18px,3svh,26px) 7vw max(20px,env(safe-area-inset-bottom));
    align-self:stretch; text-align:left; overflow:hidden;
    background:linear-gradient(180deg,rgba(10,13,18,.72),rgba(10,13,18,.98) 24%);
  }
  html.mlesh-enhanced.mlesh-mobile-enhanced .mlesh-eyebrow{
    margin-bottom:10px; font-size:9px; line-height:1.35;
  }
  html.mlesh-enhanced.mlesh-mobile-enhanced .mlesh-headline{
    margin:0 0 10px; max-width:19ch;
    font-size:clamp(1.75rem,8vw,2.2rem); line-height:1.08;
  }
  html.mlesh-enhanced.mlesh-mobile-enhanced .mlesh-sub{
    margin:0; padding:0; max-width:40ch; border:0;
    font-size:clamp(.82rem,3.55vw,.96rem); line-height:1.45;
  }
  html.mlesh-enhanced.mlesh-mobile-enhanced .mlesh-progress{
    display:flex; flex-direction:row; gap:8px;
    left:7vw; right:auto; top:calc(54svh - 18px); transform:none;
  }
  html.mlesh-enhanced.mlesh-mobile-enhanced .mlesh-progress li{ width:7px; height:7px; }
}

/* Short desktop windows expose collisions that conventional 16:9 QA misses.
   Tighten vertical rhythm without shrinking the message into illegibility. */
@media (min-width:1024px) and (max-height:620px){
  html.mlesh-enhanced .mlesh-copy{ bottom:7vh; }
  html.mlesh-enhanced .mlesh-scrollcue{ display:none; }
  html.mlesh-enhanced .mlesh-copy .mlesh-eyebrow{ margin-bottom:10px; }
  html.mlesh-enhanced .mlesh-copy .mlesh-headline{
    font-size:clamp(2.65rem, 4vw, 3.8rem);
  }
  html.mlesh-enhanced .mlesh-copy .mlesh-sub{
    font-size:.96rem;
    line-height:1.42;
  }
}

@media (max-width:520px){
  .mlesh-headline{ max-width:none; }
  .mlesh-eyebrow{ font-size:11px; }
}