/* Invata Global Enterprises: "One globe, three worlds". The gold globe hero (hub.js), then the Capital (C1) and Marketing (C2)
   worlds as scroll films (film.js), the approach, and contact. Loaded after film.css on the hub home page only. */

/* ---------- the globe ---------- */
.gfilm { position: relative; height: 520vh; }
.gstage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
#gl.drag { cursor: grabbing; }
.gvignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, rgba(11,14,20,0) 55%, rgba(11,14,20,.75) 100%); }
/* the bottom of the stage fades to ink so the Capital film starts from the same ground */
.gstage::after { content: ""; position: absolute; inset: auto 0 0; height: 28%; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,14,20,0), var(--ink)); }
.gflash { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 60% at 50% 50%, rgba(240,212,137,.9), rgba(201,150,47,.35) 45%, var(--ink) 100%); }
.gbeats { position: absolute; left: var(--gl); right: var(--gr); bottom: clamp(64px, 13vh, 140px); z-index: 1; pointer-events: none; }
.gbeat { position: absolute; left: 0; bottom: 0; max-width: 780px; opacity: 0; transform: translateY(18px); transition: opacity .25s ease, transform .25s ease; }
.gbeat.on { opacity: 1; transform: none; pointer-events: auto; transition: opacity .6s ease .1s, transform .6s ease .1s; }
.gbeat .big { display: block; margin: 0; font: italic 600 clamp(76px, 13vw, 200px)/.86 var(--serif); letter-spacing: -.015em; }
.gbeat .big em { color: var(--gold-hi); }
.gbeat h1.big { font: 800 clamp(42px, 6.4vw, 92px)/.98 var(--head); letter-spacing: -.025em; font-style: normal; }
.gbeat .small { display: block; margin-top: 18px; max-width: 44ch; font-size: clamp(17px, 1.5vw, 20px); opacity: .85; }
.gbeat .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ghud { position: absolute; right: var(--gr); bottom: clamp(24px, 5vh, 48px); z-index: 1; text-align: right; font: 500 13px/1.5 var(--head); color: var(--muted); letter-spacing: .04em; pointer-events: none; }
.ghud strong { display: block; font: 600 15px/1.3 var(--head); color: var(--ivory); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.gprogress { position: absolute; left: var(--gl); bottom: clamp(24px, 5vh, 48px); z-index: 1; display: flex; gap: 6px; pointer-events: none; }
.gprogress i { width: 28px; height: 2px; background: rgba(239,233,220,.2); }
.gprogress i.on { background: var(--gold-hi); }
@media (max-width: 720px) { .ghud { display: none; } .gbeats { bottom: 92px; } }
@media (prefers-reduced-motion: reduce) { .gfilm { height: auto; } .gstage { position: relative; } .gbeat { transition: none; } }

/* ---------- the worlds ---------- */
.world-capital { --accent-hi: var(--verdigris-hi); }
.world-marketing { --accent-hi: var(--cobalt-hi); }
.world .copy { position: absolute; left: var(--gl); right: var(--gr); bottom: clamp(56px, 10vh, 120px);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 4vw; align-items: end; }
.world h2 { margin: 0; font: italic 600 clamp(56px, 8.5vw, 132px)/.9 var(--serif); letter-spacing: -.015em; }
.world .what { margin: 0 0 18px; font-size: clamp(17px, 1.4vw, 20px); max-width: 40ch; }
.world .facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 26px; padding: 0; list-style: none; font: 600 13px/1.4 var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.world .copy [data-at] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.world .copy [data-at].on { opacity: 1; transform: none; }
.film:not(.live) .copy [data-at], .film.still .copy [data-at] { opacity: 1; transform: none; }
@media (max-width: 860px) { .world .copy { grid-template-columns: 1fr; gap: 18px; } }

/* ---------- approach ---------- */
.approach { padding-block: clamp(120px, 16vh, 200px) clamp(80px, 12vh, 140px); }
.approach h2 { margin: 0 0 clamp(48px, 8vh, 96px); max-width: 18ch; font: 800 clamp(38px, 5.4vw, 78px)/1 var(--head); letter-spacing: -.025em; }
.approach h2 em { font: italic 600 1.12em/1 var(--serif); color: var(--gold-hi); letter-spacing: 0; }
.approach .trio .n { display: block; font: 700 clamp(64px, 7vw, 112px)/.9 var(--serif); letter-spacing: .02em; color: var(--gold); }