/* ============================================================
   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 }

  /* On a phone the copy runs the full width at the foot of the frame, so
     the scrim has to be a horizon rather than a spot. The radial version
     is anchored left of centre, which left the cobalt eyebrow sitting on
     the bright exhaust in scene 06 and the white rule of a lit screen in
     scene 05. Direction-independent, so RTL needs no second rule. */
  .sw2-copy::before,
  [dir="rtl"] .sw2-copy::before{
    inset:-30vh -5vw -16vh -5vw;
    /* Measured, not guessed. The first curve left the cobalt eyebrow at
       3.38:1 over the lit set in scene 04 — it is 12px uppercase, so it
       needs 4.5:1, and it sits higher in the block than the title where
       the scrim had already fallen away. Holding the gradient near-opaque
       further up takes it to 5.1:1 while the title and description, which
       were already past 16:1, are unaffected. */
    background:linear-gradient(to top,
      rgba(5,7,12,.96), rgba(5,7,12,.92) 30%, rgba(5,7,12,.78) 55%,
      rgba(5,7,12,.40) 75%, transparent);
  }
  /* The title and description carry a shadow; the eyebrow was the only
     line with nothing behind it on a busy frame.

     It also gets a lifted cobalt here. Measured across all seven scenes,
     #5B8CFF cleared 4.5:1 on six and reached only 4.08:1 against the Moon
     in scene 07, which is the brightest frame in the film. The choice was
     to darken the scrim further or to lift the text; darkening it again
     would start greying out the imagery the film exists to show. This is
     the same ground-aware reasoning that produced the blue-ink / blue-lift
     pair — one more step for type sitting on moving light. */
  .sw2-eyebrow{
    color:#7FA6FF;
    text-shadow:0 1px 16px rgba(5,7,12,.9);
  }

  /* The scene number was on screen twice: here, rotated against the right
     edge, and again above the eyebrow. One of them is redundant, and this
     is the one that crowds the title on a narrow screen. The rail itself
     stays — it is the only progress feedback the film gives. */
  .sw2-rail-n{ display:none }
  .sw2-rail{ block-size:clamp(70px,12vh,120px) }
}

/* ---------- 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 }