/* ============================================================================
   Film-only styles — loaded by the home page alone.
   ----------------------------------------------------------------------------
   Everything structural (tokens, header, footer, sections, buttons) is in
   site.css. What is left here is the scroll-scrub engine's own chrome, and the
   overrides that exist because this page is type sitting on top of moving film
   rather than type on a black background.
   ========================================================================== */

/* The engine draws its own topbar; this page has a real <header> in the markup
   instead (see layout.mjs) so the navigation exists without JS and reads the
   same to a crawler on every URL. `topbar:false` hides the engine's — this is
   the belt to that braces. */
#world > .sw-topbar{display:none!important}

/* ------------------------------------------------------------ the copy --- */
.sw-copy__num{font-family:var(--mono);letter-spacing:.16em;opacity:.5}
.sw-copy__eyebrow{letter-spacing:.22em;font-size:.72rem;font-weight:600;margin-top:14px}
.sw-copy__title{font-weight:600;letter-spacing:-.025em;line-height:1.04;
                font-size:clamp(2.1rem,3.9vw,3.5rem);
                text-shadow:0 2px 40px rgba(0,0,0,.85),0 1px 4px rgba(0,0,0,.55)}
.sw-copy__body{color:rgba(255,255,255,.72);font-size:clamp(1rem,1.15vw,1.09rem);
               line-height:1.62;margin-top:16px;
               text-shadow:0 1px 24px rgba(0,0,0,.95),0 1px 3px rgba(0,0,0,.7)}
.sw-copy__tags{gap:7px;margin-top:26px}
.sw-copy__tags li{background:rgba(255,255,255,.05);border:1px solid var(--line);
                  color:rgba(255,255,255,.74);border-radius:6px;font-weight:450;
                  font-size:.78rem;padding:7px 13px;letter-spacing:.01em}
.sw-copy__cta{gap:10px;margin-top:30px}
.sw-btn{border-radius:6px;font-size:.9rem;font-weight:550;padding:14px 26px;letter-spacing:.005em}
.sw-btn--primary{background:var(--red);color:#fff}
.sw-btn--primary:hover{background:var(--red-hot);transform:translateY(-1px)}
.sw-btn--ghost{color:#fff;border:1px solid rgba(255,255,255,.24)}
.sw-btn--ghost:hover{border-color:#fff;transform:translateY(-1px)}

/* ------------------------------------------------------- engine chrome --- */
.sw-hint{color:rgba(255,255,255,.4);letter-spacing:.18em;font-size:.7rem;text-transform:uppercase}
.sw-route__dot i{border-color:rgba(255,255,255,.3)}
.sw-route__label{color:rgba(255,255,255,.82);font-size:.7rem;letter-spacing:.04em;
                 background:rgba(10,10,12,.92);border:1px solid var(--line);
                 padding:5px 11px;border-radius:5px;backdrop-filter:blur(8px)}
.sw-scrollbar{background:rgba(255,255,255,.08)}

/* The engine's top/bottom bands are purely vertical, which is right when the
   copy hugs an edge — but `montaj` and `boya` put the left-hand copy column
   straight over a lit red panel, and the 1080p upscale made that panel sharper,
   not dimmer. So a soft left wash goes under the band on wide screens.
   It belongs on the side layer, never on the band: the band moves from corner
   to corner as the copy does, and a wash that moved with it would blink off and
   on under the reader's eye at every single seam. Phones keep the engine's
   single bottom gradient (the copy is full-width there). */
@media (min-width:961px){
  .sw-scrim__side{
    background:linear-gradient(90deg,rgba(5,5,6,.82) 0%,rgba(5,5,6,.36) 34%,transparent 62%)}
  .sw-scrim>i[data-pos="top"]{
    background:linear-gradient(180deg,rgba(5,5,6,.94) 0%,rgba(5,5,6,.60) 34%,transparent 68%)}
  .sw-scrim>i[data-pos="bottom"]{
    background:linear-gradient(0deg,rgba(5,5,6,.94) 0%,rgba(5,5,6,.58) 34%,transparent 70%)}
}

/* The route rail + scroll hint belong to the film; retire them on the page below. */
.sw-route,.sw-hint{transition:opacity .4s}
body.past-world .sw-route,body.past-world .sw-hint{opacity:0;pointer-events:none}

/* The page that follows the film. */
.enc{position:relative;z-index:30;background:var(--sw-bg);border-top:1px solid var(--line)}

/* The engine's route rail sits mid-right; on a phone the floating WhatsApp
   button is bottom-right and they never meet, but the rail must not eat taps
   meant for the page underneath once the film is done. */
body.past-world .sw-route{visibility:hidden}

/* RTL: the copy column stays physically LEFT. Its position was chosen against
   the picture, not against the reading direction — the subject sits on one side
   of the frame and the type has to be on the other. Only the text flips. */
[dir="rtl"] .sw-copy{text-align:right}