/* ==========================================================================
   More Luxury Egypt — "The Curated Passage", Part 2: Behind the Scenes
   Namespace: .mlss- (More Luxury Scroll Story), isolated from .mlesh-
   (the hero) on purpose — this section can be dropped or reordered later
   without touching hero styling, and vice versa.

   Reuses the color/type tokens defined in hero.css's :root (both files
   load on the same page). If this file is ever used standalone, redefine
   --mlesh-navy / --mlesh-gold / etc. first.
   ========================================================================== */

.mlss-root{
  position:relative;
  background:var(--mlesh-navy-soft);
  color:var(--mlesh-off);
  font-family:var(--mlesh-sans);
  border-bottom:1px solid var(--mlesh-gold-soft);
}

.mlss-intro{
  max-width:900px;
  margin:0 auto;
  padding:12vh 6vw 6vh;
  text-align:left;
}
.mlss-intro-title{
  font:500 clamp(1.8rem, 3.6vw, 2.7rem)/1.18 var(--mlesh-serif);
  margin:0;
  max-width:20ch;
}

/* ==========================================================================
   BASE LAYOUT — no-JS / reduced-motion / mobile default. The scene is
   decorative (aria-hidden, only meaningful once animated); the real,
   always-readable content is .mlss-copy's heading/paragraph, exactly like
   the hero. On mobile this becomes a single calm readable block rather
   than a frozen diagram.
   ========================================================================== */
.mlss-track{ position:relative; }

.mlss-viewport{
  position:relative;
  display:block;
  min-height:70svh;
  overflow:hidden;
  background:var(--mlesh-navy-soft);
}

.mlss-photofield{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:.5;
  filter:saturate(.9) brightness(.94);
}
/* Localized text scrim, not a global dark wash — see hero.css for the same
   correction and rationale. Darkening is concentrated low, behind where
   .mlss-copy sits (bottom ~8vh), so the background stays recognizable. */
.mlss-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,
      rgba(16,21,29,.04) 0%,
      rgba(16,21,29,.08) 45%,
      rgba(16,21,29,.28) 70%,
      rgba(16,21,29,.66) 88%,
      rgba(16,21,29,.84) 100%);
}

.mlss-scene{ position:relative; display:none; width:100%; height:100%; min-height:70svh; }
html.mlss-enhanced .mlss-scene{ display:block; }

.mlss-scene text{ font:500 11px/1 var(--mlesh-mono); letter-spacing:.1em; fill:var(--mlesh-off-dim); }
.mlss-scene .mlss-stop text{ opacity:.4; }
.mlss-scene .mlss-stop.is-active text{ opacity:1; fill:var(--mlesh-gold); }
.mlss-scene .mlss-stop rect{ transition:none; }
.mlss-scene .mlss-stop.is-active rect{ fill:var(--mlesh-gold); }
.mlss-scene .mlss-node{ opacity:0; }
.mlss-scene .mlss-card-t1{ fill:var(--mlesh-gold); font:600 12px/1 var(--mlesh-mono); letter-spacing:.14em; }
.mlss-scene .mlss-card-t2{ fill:var(--mlesh-off-dim); font:500 11px/1 var(--mlesh-mono); letter-spacing:.06em; }
.mlss-scene .mlss-card-meta{ fill:rgba(242,239,233,.72); font:500 8px/1 var(--mlesh-mono); letter-spacing:.04em; }
.mlss-scene .mlss-card-meta{ fill:rgba(242,239,233,.7); font:500 9px/1 var(--mlesh-mono); letter-spacing:.05em; }
.mlss-scene .mlss-rel-title{ fill:var(--mlesh-off); font:600 12px/1 var(--mlesh-mono); letter-spacing:.1em; }
.mlss-scene #mlss-rel-note, .mlss-scene #mlss-rel-note-1, .mlss-scene #mlss-rel-note-2{ fill:var(--mlesh-gold); font:500 10px/1 var(--mlesh-mono); letter-spacing:.08em; font-style:italic; }

.mlss-copy{
  position:relative;
  z-index:2;
  max-width:640px;
  margin:0 auto;
  padding:6vh 6vw;
  text-align:center;
}
.mlss-eyebrow{
  display:block;
  font:500 11.5px/1 var(--mlesh-mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mlesh-gold);
  margin:0 0 14px;
  min-height:11px;
}
.mlss-headline{
  font:500 clamp(1.5rem, 3vw, 2.1rem)/1.25 var(--mlesh-serif);
  margin:0 0 12px;
}
.mlss-sub{
  font:400 1rem/1.55 var(--mlesh-sans);
  color:var(--mlesh-off-dim);
  max-width:48ch;
  margin:0 auto;
}

.mlss-mobile-options{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr; gap:12px;
  padding:0 6vw 7vh;
}
.mlss-mobile-options article{
  display:grid; grid-template-columns:92px 1fr; grid-template-rows:auto auto;
  gap:4px 14px; align-items:center;
  padding:8px; border:1px solid var(--mlesh-gold-soft);
  background:rgba(9,14,21,.84);
}
.mlss-mobile-options img{ grid-row:1 / 3; width:92px; height:68px; object-fit:cover; }
.mlss-mobile-options span{ color:var(--mlesh-gold); font:500 9px/1.2 var(--mlesh-mono); letter-spacing:.1em; text-transform:uppercase; }
.mlss-mobile-options strong{ color:var(--mlesh-off); font:500 .9rem/1.25 var(--mlesh-sans); }

.mlss-progress{ display:none; list-style:none; margin:0; padding:0; } /* only meaningful once enhanced */

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

/* lightweight fade-up reveal — same technique as the hero's mobile treatment */
.mlss-copy.mlss-reveal{
  opacity:0; transform:translateY(16px);
  transition:opacity .5s var(--mlesh-ease), transform .5s var(--mlesh-ease);
}
.mlss-copy.mlss-reveal.is-visible{ opacity:1; transform:none; }

/* ==========================================================================
   ENHANCED LAYOUT - added only by story.js on capable viewports with motion
   allowed and GSAP present. Mobile receives the protected vertical variant.
   ========================================================================== */
/* Longer deliberate passage: the same timeline is distributed across more
   physical scroll, giving every chapter and the three-option hold room to
   breathe without changing the reversible position-driven animation. */
html.mlss-enhanced .mlss-track{ height:760vh; }
html.mlss-enhanced .mlss-mobile-options{ display:none; }

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

html.mlss-enhanced .mlss-copy{
  position:absolute; left:0; right:0; bottom:4vh;
  z-index:2;
  margin:0 auto;
}

html.mlss-enhanced .mlss-node[data-depth="far"]{ filter:blur(1.1px); opacity:.5; }
html.mlss-enhanced .mlss-node[data-depth="mid"]{ opacity:.75; }
html.mlss-enhanced .mlss-node[data-depth="near"]{ opacity:1; }

html.mlss-enhanced .mlss-progress{
  display:flex; gap:8px; list-style:none; margin:0; padding:0;
  position:absolute; right:5vw; top:50%; transform:translateY(-50%);
  z-index:3; flex-direction:column;
}
html.mlss-enhanced .mlss-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.mlss-enhanced .mlss-progress li.is-active{
  background:var(--mlesh-gold);
  transform:scale(1.35);
}

@media (prefers-reduced-motion: reduce){
  .mlss-copy.mlss-reveal{ transition:opacity .01s linear; transform:none; }
  html.mlss-enhanced .mlss-progress li{ transition:none !important; }
}

@media (max-width:900px){
  .mlss-copy{ padding:5vh 6vw; }
  .mlss-intro{ padding:8vh 6vw 4vh; }
}

/* Mobile motion parity: reuse the approved reversible timeline, but place the
   visual stage above a protected copy rail instead of copying the desktop's
   side-by-side pin. Reduced-motion visitors continue to receive the static,
   complete summary. */
@media (max-width:1023px) and (prefers-reduced-motion:no-preference){
  html.mlss-enhanced.mlss-mobile-enhanced .mlss-track{ height:640svh; }
  html.mlss-enhanced.mlss-mobile-enhanced .mlss-viewport{
    position:sticky; top:0;
    width:100%; height:100svh; min-height:100svh;
    display:grid; grid-template-columns:1fr; grid-template-rows:52svh 48svh;
    gap:0; align-items:stretch; padding:0; overflow:hidden;
  }
  html.mlss-enhanced.mlss-mobile-enhanced .mlss-photofield{ opacity:.88; object-position:center 42%; }
  html.mlss-enhanced.mlss-mobile-enhanced .mlss-scrim{
    background:linear-gradient(180deg,rgba(10,13,18,.08) 0%,rgba(10,13,18,.18) 42%,rgba(10,13,18,.74) 62%,rgba(10,13,18,.96) 100%);
  }
  html.mlss-enhanced.mlss-mobile-enhanced .mlss-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; background:none;
  }
  html.mlss-enhanced.mlss-mobile-enhanced body .mlss-copy{
    position:relative; inset:auto;
    display:block !important; grid-column:1; grid-row:2;
    width:100%; min-width:0; max-width:none;
    margin:0; padding:clamp(18px,3.2svh,28px) 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.mlss-enhanced.mlss-mobile-enhanced .mlss-eyebrow{ margin-bottom:10px; font-size:10px; line-height:1.35; }
  html.mlss-enhanced.mlss-mobile-enhanced .mlss-headline{ margin-bottom:10px; max-width:19ch; font-size:clamp(1.55rem,7vw,2rem); line-height:1.12; }
  html.mlss-enhanced.mlss-mobile-enhanced .mlss-sub{ margin:0; max-width:40ch; font-size:clamp(.84rem,3.6vw,.98rem); line-height:1.45; }
  html.mlss-enhanced.mlss-mobile-enhanced .mlss-progress{
    display:flex; flex-direction:row; gap:7px;
    left:7vw; right:auto; top:calc(52svh - 18px); transform:none;
  }
  html.mlss-enhanced.mlss-mobile-enhanced .mlss-progress li{ width:7px; height:7px; }
  html.mlss-enhanced.mlss-mobile-enhanced #mlss-cards{ transform:translate(600px,330px) scale(1.02) translate(-600px,-330px); }
  html.mlss-enhanced.mlss-mobile-enhanced #mlss-relationship{ transform:translate(600px,300px) scale(1.35) translate(-600px,-300px); }
  html.mlss-enhanced.mlss-mobile-enhanced .mlss-scene .mlss-stop text{ font-size:19px; }
  html.mlss-enhanced.mlss-mobile-enhanced .mlss-scene .mlss-card-t1{ font-size:15px; letter-spacing:.01em; }
  html.mlss-enhanced.mlss-mobile-enhanced .mlss-scene .mlss-card-t2{ font-size:11px; }
  html.mlss-enhanced.mlss-mobile-enhanced .mlss-scene .mlss-card-meta{ font-size:10.5px; letter-spacing:0; }
  html.mlss-enhanced.mlss-mobile-enhanced .mlss-scene .mlss-rel-title{ font-size:18px; letter-spacing:.02em; }
  html.mlss-enhanced.mlss-mobile-enhanced .mlss-scene #mlss-rel-note,
  html.mlss-enhanced.mlss-mobile-enhanced .mlss-scene #mlss-rel-note-1,
  html.mlss-enhanced.mlss-mobile-enhanced .mlss-scene #mlss-rel-note-2{ font-size:16px; letter-spacing:0; }
}