/* Motion prototype (motion.html only): smooth scrolling, scroll parallax, a 3D globe section and a pinned timeline.
   Every effect here is switched on by motion.js adding "mo" to <html>; without it (reduced motion, old browser,
   scripts blocked) the page stays exactly like the normal homepage, with the globe section shown as plain text. */

/* Lenis does the smoothing, so the browser's own smooth scroll must be off */
html.mo{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- headings that rise word by word ---------- */
/* each word is clipped by its own box; extra room top and bottom keeps Arabic dots and descenders whole */
.mo .mo-split .mo-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em 0 .22em;margin:-.12em 0 -.22em}
.mo .mo-split .mo-wi{display:inline-block;will-change:transform}
/* the hero's gradient line: each word carries the gradient itself, since clipped text can't reach into moving words */
.mo .hero h1.mo-split em{background:none;color:inherit}
.mo .hero h1.mo-split em .mo-wi{background:linear-gradient(100deg,var(--green),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- city slider ---------- */
.mo .hero-intro,.mo .carousel{will-change:transform}

/* ---------- globe section ---------- */
.globe-sec{position:relative}
.globe-pin{position:relative;min-height:70vh;display:grid;place-items:center;overflow:hidden}
.globe-canvas{display:none}
.globe-copy{position:relative;z-index:1;text-align:center;padding-block:80px}
.globe-copy .eyebrow{font-size:.95rem}
.globe-words{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.1em .4em;
  font-size:clamp(2.6rem,7.5vw,6.2rem);font-weight:700;line-height:1.25;letter-spacing:0}
.globe-words li:nth-child(1){color:var(--green-deep)}
.globe-words li:nth-child(2){color:#1a7a6a}
.globe-words li:nth-child(3){color:var(--blue)}

/* with motion on: one screen-high band; the globe turns by itself when it comes into view (nothing is pinned) */
.mo .globe-pin{height:min(88vh,820px);min-height:520px}
.mo .globe-canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
.mo .globe-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;height:100%;padding-block:0;text-align:start;pointer-events:none}
.mo .globe-copy>*{grid-column:1}
.mo .globe-copy .eyebrow{align-self:end;justify-self:start;margin-bottom:6px}
.mo .globe-words{align-self:start;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;gap:0;margin:0}
.mo .globe-words li{opacity:.12;filter:blur(6px);transform:translateY(.25em);
  transition:opacity .7s var(--ease),filter .7s var(--ease),transform .7s var(--ease)}
.mo .globe-words li.on{opacity:1;filter:none;transform:none}
.mo .globe-words li:nth-child(2){transition-delay:.05s}
.globe-hint{position:absolute;bottom:28px;inset-inline:0;text-align:center;font-size:.8rem;color:var(--muted);letter-spacing:.02em}
@media (max-width:860px){
  .mo .globe-copy{grid-template-columns:minmax(0,1fr);grid-template-rows:1.15fr auto auto .85fr;text-align:center}
  .mo .globe-copy .eyebrow{grid-row:2;justify-self:center}
  .mo .globe-words{grid-row:3;align-items:center}
}

/* ---------- timeline ---------- */
/* a filled line runs down the timeline as it scrolls past (the page is never held) */
.mo .about-line::after{content:"";position:absolute;inset-block:28px;inset-inline-start:27px;width:2px;border-radius:2px;
  background:linear-gradient(var(--green),var(--blue));transform-origin:top;transform:scaleY(var(--p,0))}
@media (max-width:560px){.mo .about-line::after{inset-inline-start:19px}}