/* ==========================================================================
   WIZKET — globe.css  ("Reach": interactive globe)
   ========================================================================== */
.gl { position: relative; min-height: 100svh; overflow: hidden; background: var(--bg); transition: background-color 0.6s var(--ease-io); }
.gl__stage { position: absolute; top: 0; bottom: 0; right: -4vw; width: 68%; touch-action: pan-y; cursor: grab; }
.gl__stage.is-drag { cursor: grabbing; }
.gl__canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s var(--ease-out); }
.gl.is-ready .gl__canvas { opacity: 1; }

.gl__copy { position: absolute; z-index: 2; left: 48px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.gl__eyebrow { margin: 0 0 clamp(18px, 2.6vh, 26px); display: flex; align-items: center; gap: 14px; font: 600 0.74rem/1 var(--font-body); letter-spacing: 0.28em; text-transform: uppercase; color: var(--text); }
.gl__rule { position: relative; width: 36px; height: 1px; background: var(--line2); }
.gl__rule::after { content: ""; position: absolute; right: 0; top: -1px; width: 3px; height: 3px; border-radius: 50%; background: var(--accent); }
.gl__title { margin: 0; font: 400 clamp(3rem, min(6.4vw, 12.5vh), 8rem)/0.9 var(--font-display); letter-spacing: 0.005em; text-transform: uppercase; color: var(--text); }
.gl__line { display: block; overflow: hidden; padding-top: 0.04em; }
.gl__line > span { display: block; transform: translateY(112%); transition: transform 1.5s var(--ease-out); }
/* three lines: solid · outlined · one orange word */
.gl__line--outline { color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: clamp(1px, 0.1vw, 1.6px) var(--text); }
.gl__line:nth-child(2) > span { transition-delay: 0.12s; }
.gl__line:nth-child(3) > span { transition-delay: 0.24s; }
.gl__hl { font-style: normal; color: var(--accent); }
.gl__title i { font-style: normal; color: var(--accent); }
.gl.is-in .gl__line > span { transform: none; }
.gl__eyebrow { opacity: 0; transition: opacity 1.2s ease 0.3s; }
.gl.is-in .gl__eyebrow { opacity: 1; }

.gl__hint { position: absolute; z-index: 2; right: 48px; bottom: 48px; margin: 0; display: flex; align-items: center; gap: 10px; font: 500 0.7rem/1 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.gl__hint i { width: 28px; height: 1px; background: var(--line2); }
.gl__hint b { color: var(--text); font-weight: 500; }

@media (max-width: 900px) {
  .gl { display: flex; flex-direction: column; padding: 120px var(--gutter) 40px; }
  .gl__copy, .gl__hint { position: static; width: auto; transform: none; }
  .gl__title { font-size: clamp(2.8rem, 13.4vw, 5.6rem); }
  .gl__rule { display: none; }      /* phones already frame the centred eyebrow with rules */
  .gl__stage { position: relative; right: auto; width: calc(100% + var(--gutter) * 2); margin: 6px calc(var(--gutter) * -1) 8px; height: min(112vw, 560px); }
  .gl__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gl__line > span { transform: none; transition: none; } .gl__eyebrow { opacity: 1; transition: none; }
}
.gl.is-flat .gl__stage { display: none; }