/* ============================================================
   SCROLL WORLD v2 — stage, copy, rail, reduced-motion fallback
   Every rule in logical properties: RTL is structural here, not a
   stylesheet fork.
   ============================================================ */

#scroll-world-2{ position:relative; background:#05070C; }

.sw2-stage{
  position:relative; block-size:100svh; inline-size:100%;
  overflow:hidden; background:#05070C;
  /* the film is dark; declaring it here means the stage is never white
     for the frame before the first poster paints */
}

.sw2-media{ position:absolute; inset:0 }
.sw2-media .sw2-clip{
  position:absolute; inset:0; inline-size:100%; block-size:100%;
  object-fit:cover; will-change:opacity;
}
.sw2-poster{
  position:absolute; inset:0; z-index:10;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  transition:opacity .35s ease;
}

/* a focusable surface so the journey is operable from the keyboard;
   it covers the stage but takes no pointer events away from it */
.sw2-keys{
  position:absolute; inset:0; z-index:50; outline:none;
  background:transparent; border:0; padding:0; cursor:default;
}
.sw2-keys:focus-visible{
  outline:2px solid var(--blue-lift,#5B8CFF); outline-offset:-6px;
}

/* ---------- copy ---------- */
.sw2-copy{
  position:absolute; z-index:60;
  inset-block-end:11vh; inset-inline-start:6vw;
  max-inline-size:min(560px,44vw); pointer-events:none;
  will-change:opacity,transform;
}
.sw2-copy::before{
  content:''; position:absolute; inset:-28vh -24vw -20vh -14vw; z-index:-1;
  pointer-events:none;
  background:radial-gradient(74% 88% at 24% 70%,
    rgba(5,7,12,.9), rgba(5,7,12,.62) 42%, rgba(5,7,12,.24) 66%, transparent 82%);
}
[dir="rtl"] .sw2-copy::before{
  background:radial-gradient(74% 88% at 76% 70%,
    rgba(5,7,12,.9), rgba(5,7,12,.62) 42%, rgba(5,7,12,.24) 66%, transparent 82%);
}
.sw2-num{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em;
  color:rgba(242,239,233,.55); margin:0 0 10px;
}
.sw2-eyebrow{
  font-family:var(--display); font-weight:650; font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--blue-lift,#5B8CFF); margin:0 0 12px;
}
.sw2-title{
  font-family:var(--display); font-variation-settings:'wdth' 114; font-weight:750;
  font-size:clamp(30px,4.4vw,56px); line-height:1.03; letter-spacing:-.01em;
  color:var(--ink-inv,#F2EFE9); margin:0 0 14px; text-wrap:balance;
  text-shadow:0 2px 34px rgba(5,7,12,.75);
}
.sw2-desc{
  font-size:16px; line-height:1.55; color:rgba(242,239,233,.84);
  max-inline-size:48ch; margin:0;
  text-shadow:0 1px 20px rgba(5,7,12,.8);
}
.sw2-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-block-start:22px; pointer-events:auto }
.sw2-cta:empty{ display:none }
#scroll-world-2 .btn-ghost{ color:var(--ink-inv,#F2EFE9); border-color:rgba(242,239,233,.38) }
#scroll-world-2 .btn-ghost:hover{ border-color:var(--ink-inv,#F2EFE9) }

/* ---------- progress rail ---------- */
.sw2-progress{
  position:absolute; z-index:60;
  inset-inline-end:2.2vw; inset-block:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; pointer-events:none;
}
.sw2-rail-n{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.14em;
  color:rgba(242,239,233,.5); writing-mode:vertical-rl;
}
.sw2-rail{
  position:relative; inline-size:2px; block-size:clamp(90px,16vh,180px);
  background:rgba(242,239,233,.16); overflow:hidden;
}
.sw2-rail i{
  position:absolute; inset:0; display:block; background:var(--blue-lift,#5B8CFF);
  transform-origin:top center; transform:scaleY(0); will-change:transform;
}

/* ---------- skip ---------- */
#scroll-world-2 .skip-film{
  position:absolute; z-index:70;
  /* the shared rule pins inset-inline-end; setting only start leaves both
     edges fixed and stretches the link across the stage */
  inset-block-start:calc(72px + 2vh); inset-inline-start:6vw; inset-inline-end:auto;
  inline-size:fit-content;
  font-family:var(--display); font-weight:650; font-size:11.5px; letter-spacing:.14em;
  color:rgba(242,239,233,.72); text-decoration:none;
  border:1px solid rgba(242,239,233,.26); padding:9px 14px; background:rgba(5,7,12,.4);
}
#scroll-world-2 .skip-film:hover{ color:#F2EFE9; border-color:rgba(242,239,233,.6) }

@media (max-width:860px){
  .sw2-copy{ inset-inline:5vw; max-inline-size:none; inset-block-end:max(9vh,env(safe-area-inset-bottom,0px) + 7vh) }
  .sw2-progress{ inset-inline-end:3.5vw }
  .sw2-desc{ font-size:15px }
}

/* ---------- reduced motion: the whole story as stacked scenes ----------
   The film is this page's main content. A visitor who asks the OS for less
   motion gets every scene as a static section rather than one frame. */
.sw2-reduced{ display:block; background:#05070C; padding-block:clamp(40px,7vh,96px) }
.sw2-reduced .sw2-stage{ display:none }
.sw2r-scene{
  max-inline-size:min(1100px,92vw); margin-inline:auto;
  margin-block-end:clamp(48px,9vh,120px);
}
.sw2r-visual{
  aspect-ratio:16/9; overflow:hidden; border-radius:14px;
  border:1px solid rgba(120,150,210,.16); background:#0A0F18;
  margin-block-end:clamp(18px,3vh,34px);
}
.sw2r-visual img{ inline-size:100%; block-size:100%; object-fit:cover; display:block }
.sw2r-num{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em;
  color:rgba(242,239,233,.55); margin:0 0 10px;
}
.sw2r-eyebrow{
  font-family:var(--display); font-weight:650; font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--blue-lift,#5B8CFF); margin:0 0 12px;
}
.sw2r-title{
  font-family:var(--display); font-variation-settings:'wdth' 114; font-weight:750;
  font-size:clamp(26px,3.2vw,44px); line-height:1.06; color:var(--ink-inv,#F2EFE9);
  margin:0 0 12px; text-wrap:balance;
}
.sw2r-desc{ font-size:16px; color:rgba(242,239,233,.82); max-inline-size:62ch; margin:0 }
.sw2r-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-block-start:22px }
.sw2-reduced .skip-film{ display:none }