/* NEXT SECTION, B2 around the world: v9 Arrival is the section (round seven 2026-10-08; the other concepts removed on Damian's word).
   Markup + init in next-b.js. Shared bits in next.css; tokens in capital.css. */

/* ---------- the Earth box, tags and cards ---------- */
.rl-globe canvas{width:100%;height:100%;display:block;opacity:0;transition:opacity 1.4s ease}
.rl-globe.ready canvas{opacity:1}
.rl-globe{position:absolute;inset:0;z-index:0;will-change:transform}
.rl-scene{padding:0;display:block;min-height:0}
.rl-top{position:absolute;left:0;right:0;top:clamp(96px,13svh,130px);z-index:2;text-align:center;padding-inline:20px;transition:opacity .7s,transform .7s var(--cv-ease)}
.rl-top.off{opacity:0;transform:translateY(-30px);pointer-events:none}
.rl-end .nx-lede{margin-inline:auto;text-align:center}
.rl-line{margin:clamp(16px,2.6svh,26px) 0 0;font-family:var(--font);font-style:italic;font-weight:300;font-size:clamp(18px,1.6vw,24px);color:var(--cv-mute)}
.rl-tag{position:absolute;left:0;top:0;width:0;height:0;z-index:3;opacity:0;transition:opacity .5s;pointer-events:none;will-change:transform}
.rl-tag.on{opacity:1}
.rl-tag::before{content:"";position:absolute;left:4px;top:0;width:12px;height:1px;background:rgba(244,242,247,.55)}
.rl-tag b{position:absolute;left:20px;top:-18px;font:500 11px/1 var(--font);letter-spacing:.24em;color:#F4F2F7;white-space:nowrap}
.rl-tag span{position:absolute;left:20px;top:0;font-family:var(--title);font-weight:200;font-size:22px;line-height:1;letter-spacing:-.02em;color:rgba(244,242,247,.7);font-variant-numeric:tabular-nums;white-space:nowrap}
.rl-tag.hot span{color:#F4F2F7}
.rl-tag.flip::before{left:auto;right:4px}
.rl-tag.flip b,.rl-tag.flip span{left:auto;right:20px;text-align:right}
.rl-tag:not(.hot){opacity:.5}
.rl-tag.dim{opacity:.32}
.rl-tag:not(.on){opacity:0}
/* round six: a tag near the caption sits above its point */
.rl-tag.up::before{left:0;top:-26px;width:1px;height:24px}
.rl-tag.up b{top:-66px}
.rl-tag.up span{top:-48px}
/* round six: the nine names on the world views; the layer fades with altitude from next-b.js */
.w3-tags{position:absolute;inset:0;z-index:3;pointer-events:none;will-change:opacity}
.w3-tags .rl-tag span{font-size:17px}
.w3-tags .rl-tag.hot span{font-size:22px}
.w3-tags .rl-tag{transition:opacity .35s}
/* round ten: one block per visit on the left, the city in caps, its hour big and running with the sun, the handover line beneath
   (was a corner card and a caption along the bottom edge: his "out of the way, hard to read", 2026-10-08) */
.rl-stop{position:absolute;left:clamp(24px,6vw,110px);top:50%;transform:translateY(-50%);z-index:2;max-width:min(44vw,540px);opacity:0;transition:opacity .5s;pointer-events:none;text-shadow:0 2px 24px rgba(0,0,0,.9)}
.rl-stop.on{opacity:1}
.rl-stop b{display:block;font:500 11px/1 var(--font);letter-spacing:.24em;text-transform:uppercase;color:var(--cv-faint)}
.rl-stop span{display:block;margin-top:14px;font-family:var(--title);font-weight:200;font-size:clamp(64px,7.4vw,112px);line-height:1;letter-spacing:-.03em;color:#F4F2F7;font-variant-numeric:tabular-nums}
.rl-stop p{margin:clamp(14px,2svh,20px) 0 0;font-family:var(--font);font-style:italic;font-weight:300;font-size:clamp(20px,2vw,30px);line-height:1.25;color:rgba(244,242,247,.85)}
.rl-stop.in b,.rl-stop.in span,.rl-stop.in p{animation:nx-rise0 .7s var(--cv-ease)}
/* round seven: no filter in these keyframes. Safari flashes a black box when it builds a filter layer over shadowed text, which read as
   'black bars flickering' at every city (his report 2026-10-08) */
@keyframes nx-rise0{from{opacity:0;transform:translateY(16px)}}
.rl-end{position:absolute;left:0;right:0;top:30%;transform:translateY(-50%);z-index:2;text-align:center;padding-inline:20px;opacity:0;transition:opacity .9s,transform .9s var(--cv-ease);pointer-events:none}
.rl-end.on{opacity:1}
.rl-end h2{text-shadow:0 2px 30px rgba(0,0,0,.9)}
.rl-end::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1200px,100vw);height:420px;background:radial-gradient(50% 55% at 50% 50%,rgba(0,0,0,.5),transparent 72%);z-index:-1;pointer-events:none}
.rl-end .nx-lede{color:rgba(244,242,247,.8);max-width:52ch}

/* the planet sits low under the words at the opening, then rises (next-b.js) */
.rl-globe{transform:translateY(34svh)}

@keyframes nx-pop{from{opacity:0;transform:scale(.6)}}

@media (max-width:1000px){
  .rl-tag span{font-size:18px}
}

/* round five: the planet with real cities (city3d.mjs) */
.w3 canvas{width:100%;height:100%;display:block}
.w3-osm{position:absolute;right:clamp(14px,2vw,26px);bottom:clamp(12px,2svh,22px);z-index:3;margin:0;font:400 10px/1 var(--font);letter-spacing:.04em;color:rgba(244,242,247,.34);opacity:0;transition:opacity .6s;pointer-events:none;white-space:nowrap}
.w3-osm.on{opacity:1}

@media (max-width:700px){
  .w3-osm{right:auto;left:16px;bottom:16px;font-size:9px}
  .nx[data-nx="b2-9"] .nx-tall{height:calc(34 * 100svh)}   /* his 2026-10-09 note (flies past everything): about 3000 px of scroll per city on a phone, as on the desktop at --n:28 */
  .rl-stop{left:50%;top:auto;bottom:16svh;transform:translateX(-50%);text-align:center;max-width:90vw}
}

/* the city rail: nine quiet names on the right, the current one lit; click to go there */
.w3-rail{position:absolute;right:clamp(16px,2.2vw,34px);top:50%;transform:translateY(-50%);z-index:4;display:flex;flex-direction:column;align-items:flex-end;gap:2px;opacity:0;transition:opacity .6s;pointer-events:none}
.w3-rail.show{opacity:1;pointer-events:auto}
.w3-rail button{display:flex;align-items:center;gap:10px;border:0;background:none;padding:5px 0;cursor:pointer;font:400 10px/1 var(--font);letter-spacing:.22em;text-transform:uppercase;color:rgba(244,242,247,.3);transition:color .4s;text-shadow:0 1px 10px rgba(0,0,0,.9)}
.w3-rail button span{order:1}
.w3-rail button i{order:2;width:4px;height:4px;border-radius:50%;background:rgba(244,242,247,.28);transition:background .4s,box-shadow .4s,transform .4s}
.w3-rail button.past{color:rgba(244,242,247,.5)}
.w3-rail button.on{color:#F4F2F7}
.w3-rail button.on i{background:#F4F2F7;box-shadow:0 0 10px rgba(180,160,255,.9);transform:scale(1.5)}
.w3-rail button:hover,.w3-rail button:focus-visible{color:#F4F2F7;outline:none}
/* site pass 2026-10-14 (M3): an invisible tap area round each row, at least 44 px wide (out to the screen's edge) and over the
   gaps between rows; the dots and names look exactly as before */
.w3-rail button{position:relative}
.w3-rail button::after{content:"";position:absolute;top:-1px;bottom:-1px;right:calc(-1*clamp(16px,2.2vw,34px));width:max(44px,calc(100% + 34px))}
@media (max-width:700px){
  .w3-rail{right:10px;gap:0}
  .w3-rail button{padding:6px 0;gap:6px;font-size:8.5px}
  .w3-rail button span{display:none}
  .w3-rail button.on span{display:inline}
  .w3-rail button::after{right:-10px;top:0;bottom:0}   /* rows touch on a phone */
}

/* round ten sketch: the work's stages under the frame, the current one lit, past ones quieter, a hairline growing with the trail */
.w3-stage{position:absolute;left:50%;bottom:clamp(56px,8svh,74px);transform:translateX(-50%);z-index:4;display:flex;gap:clamp(22px,2.6vw,40px);margin:0;padding:0 0 12px;list-style:none;opacity:0;transition:opacity .6s;pointer-events:none;white-space:nowrap}
.w3-stage.show{opacity:1}
.w3-stage li{font:500 11px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:rgba(244,242,247,.26);transition:color .5s;text-shadow:0 1px 10px rgba(0,0,0,.9)}
.w3-stage li.past{color:rgba(244,242,247,.5)}
.w3-stage li.on{background-image:linear-gradient(90deg,#F4F2F7 0%,#F4F2F7 55%,#DDE3FF 85%,#C4CCFF 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:none}
.w3-stage::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(244,242,247,.12)}
.w3-stage i{position:absolute;left:0;bottom:0;width:0;height:1px;background:linear-gradient(90deg,#F4F2F7 0,#F4F2F7 calc(100% - 170px),#B3BEFF calc(100% - 60px),#E7A2FF 100%);transition:width .3s linear}
@media (max-width:700px){ .w3-stage{display:none} }