room title reel: fix the landscape view-to-view + hex⇄views motion (vertical-rl axis)

- In landscape the wordmark is `writing-mode: vertical-rl` + `rotate(180deg)`. The rotation runs every reel child's translate in the rotated frame (inverting motion vs portrait), and the vertical-rl forces the flex MAIN axis onto the vertical, so the five view-word cells stack vertically.
- Vertical reel (hex⇄views): negate the translateY so ROOM exits UP + the view reel rises from BELOW (was dropping ROOM below the rising view).
- Lateral reel (view-to-view): the cells stack vertically, so the portrait `translateX` slid that stack sideways off the slot — only one word rendered (desktop showed PULSE, mobile ATLAS; `row`/`column`/`order`/`row-reverse` all collapse). Traverse with `translateY` instead: the words now slide up-down ALONG the rotated wordmark and each view lands its own word, consistently across desktop + mobile. (True left-right needs a track writing-mode override + reopens the rotate inversion — deferred; up-down is the working result.)
- `overflow: hidden` on the view reel clips it to its one-slot box so the neighbouring cell can't bleed over ROOM (the lateral reel now shares the vertical axis with the hex⇄views reel).
- Pure SCSS, verified visually across desktop + mobile landscape; portrait untouched (all rules inside the landscape media query).

[[feedback-vertical-rl-flex-axis]] [[project-room-game-views-carousel]]

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/static_src/scss/_base.scss

@@ -586,6 +586,36 @@ body {
         padding-inline: 7%;  // top+bottom inset (vertical-rl) — supersedes the 0.4em start gap
     }
 
+    // ── Reel motion in landscape: match portrait ─────────────────────────────
+    // The wordmark's `rotate(180deg)` (above) gives the bottom-to-top reading but
+    // ALSO runs every reel child's translate in the rotated frame, so all motion
+    // is inverted vs portrait. Target is portrait directions, so negate the
+    // translates here (they read correct AFTER the rotation) while the glyphs keep
+    // the parent's rotation. NB: translate values only — no extra transform on the
+    // words, so they stay rotated/readable.
+    //
+    // Vertical reel (hex⇄views): ROOM exits UP, the view reel rises from BELOW —
+    // as in portrait (was inverted: ROOM dropped below the view). Park the reel
+    // below (negated) + send ROOM up on `.is-scroll` (negated). The reel's
+    // in-slot `.is-scroll` translateY(0) is unchanged, so it's inherited as-is.
+    body .container .row .col-lg-6 h2 .gr-views-reel { transform: translateY(-100%); overflow: hidden; }
+    body .container .row .col-lg-6 h2.is-scroll .gr-word--base { transform: translateY(100%); }
+    //
+    // Lateral reel (view-to-view): in landscape the wordmark is `writing-mode:
+    // vertical-rl`, which forces the flex main axis onto the vertical, so the five
+    // cells stack vertically no matter the flex-direction (`row`/`column`/`order`/
+    // `row-reverse` all collapse to one cell under a horizontal translateX). So
+    // traverse the stack with `translateY` — the words slide up-down ALONG the
+    // rotated wordmark (the faithful rotation of portrait's lateral slide). The
+    // reel's overflow:hidden above keeps the neighbouring cell from bleeding over
+    // ROOM (this reel now shares the vertical axis with the hex⇄views reel).
+    body .container .row .col-lg-6 h2 .gr-views-track { transform: translateY(-100%); }
+    body .container .row .col-lg-6 h2[data-active-view="atlas"]  .gr-views-track { transform: translateY(0); }
+    body .container .row .col-lg-6 h2[data-active-view="scroll"] .gr-views-track { transform: translateY(-100%); }
+    body .container .row .col-lg-6 h2[data-active-view="yarn"]   .gr-views-track { transform: translateY(-200%); }
+    body .container .row .col-lg-6 h2[data-active-view="post"]   .gr-views-track { transform: translateY(-300%); }
+    body .container .row .col-lg-6 h2[data-active-view="pulse"]  .gr-views-track { transform: translateY(-400%); }
+
     // Footer → fixed right sidebar (mirrors navbar approach — explicit right boundary)
     // Use body #id_footer (specificity 0,1,0,1) to beat base #id_footer (0,1,0,0)
     // which compiles later in the output and would otherwise override height: 100vh.