/* Homepage hero: the AI-search globe (assets/js/home-globe.js, built from
   scripts/hero/globe.mjs). The canvas draws the globe, orbits and satellites;
   the layer above it holds the search boxes, intent sparks, satellite tip and
   engine card. Before the globe is ready, and without WebGL, the stage shows
   a still disc where the globe goes. */

/* Vivid engine colours, for this scene only; tokens.css keeps the muted
   chart palette (--color-engine-*). */
:root{--engine-openai:#19C37D;--engine-gemini:#9B7BFF;--engine-claude:#E8845F;--engine-perplexity:#22C3DA}

.globe-hero{--globe-ease:cubic-bezier(.2,.7,.2,1);min-height:min(86dvh,820px);background:radial-gradient(55% 65% at 68% 46%,rgba(29,78,216,.12) 0%,rgba(4,6,10,0) 70%),linear-gradient(180deg,#04060A 0%,#0B1426 64%,#04060A 100%)}
.globe-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.globe-layer{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
/* The header sits above the layer so the tools menu is never under a box. */
.globe-hero>header{z-index:4}
.globe-grid{z-index:2}
.globe-hero.is-grab{cursor:grab}.globe-hero.is-pointer{cursor:pointer}.globe-hero.is-dragging{cursor:grabbing;user-select:none}
.globe-hero.is-dragging .pop{pointer-events:none}

/* On a short desktop window the stage shrinks to what is left under the
   header (76px plus its top margin) and the grid padding, so the globe, its
   orbits and the search boxes stay between the header and the bottom of the
   window. */
.globe-hero{--globe-pad-t:clamp(12px,2.5dvh,48px);--globe-pad-b:clamp(24px,8dvh,56px)}
/* Same columns as the research feature below (.s-feature__grid), so the globe
   sits over the report cover. The copy spans both columns and hugs its text;
   the stage takes the middle 73% of the right column, about as wide as a 5fr
   column, so the globe keeps its size. */
.globe-grid{position:relative;flex:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:center;max-width:1200px;width:100%;margin:0 auto;padding:var(--globe-pad-t) 40px var(--globe-pad-b);box-sizing:border-box}
.globe-grid .hero-content{grid-column:1/-1;grid-row:1;justify-self:start;z-index:1;width:auto;max-width:none;margin:0;padding:0;justify-content:center}
.globe-grid .observatory-title{font-size:clamp(40px,4.3vw,62px)}
.globe-stage{position:relative;grid-column:2;grid-row:1;justify-self:center;width:73%;align-self:stretch;min-height:clamp(400px,calc(100dvh - 76px - clamp(8px,1.5vw,20px) - var(--globe-pad-t) - var(--globe-pad-b)),520px);touch-action:pan-y}
/* The globe's radius is 31% of the stage's shorter side (closest-side = 50%). */
.globe-stage::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle closest-side,#050B16 0%,#0B1F3B 58%,rgba(96,165,250,.16) 62%,rgba(96,165,250,.05) 70%,rgba(4,6,10,0) 80%);transition:opacity 600ms var(--globe-ease)}
.globe-ready .globe-stage::before{opacity:0}
.globe-keys{position:absolute;left:0;top:0}
.globe-key:not(:focus),.globe-pause:not(:focus){position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.globe-key,.globe-pause{border:0;border-radius:4px;background:rgba(14,26,47,.7);font:500 11px/1 'IBM Plex Mono','Noto Sans TC',monospace;color:#94A3B8;cursor:pointer}
.globe-key{min-height:32px;padding:0 10px}
.globe-pause{position:absolute;left:0;bottom:0;z-index:4;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px}
.globe-key:hover,.globe-pause:hover{color:#F8FAFC}
.globe-key:focus-visible,.globe-pause:focus-visible{outline:2px solid var(--accent-on-dark);outline-offset:2px}
.globe-pause svg{width:10px;height:10px;fill:currentColor}

/* Intent: a spark hops along, leaving beads that fade. */
.threads{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.threads circle{pointer-events:none}

/* Questions, as search boxes linking to the article that answers them. The
   send button is the site's interactive blue (white on #1D4ED8 = 6.7:1). The
   script sets each box's width from its question and fades it in. */
.pop{position:absolute;left:0;top:0;display:flex;align-items:center;gap:10px;box-sizing:border-box;width:286px;height:46px;padding:0 6px 0 16px;border-radius:23px;background:#1E2533;box-shadow:0 18px 40px -18px rgba(2,6,16,.95);font:500 15px/1.45 'Noto Sans TC',sans-serif;color:#F8FAFC;text-decoration:none;opacity:0;will-change:transform,opacity;pointer-events:none;transition:background 150ms var(--globe-ease)}
.pop.is-live{pointer-events:auto}
.pop:hover,.pop:focus-visible{background:#262F40;text-decoration:none;color:#fff}
.pop:focus-visible{outline:2px solid var(--accent-on-dark);outline-offset:3px}
.pop__ico{flex:none;width:16px;height:16px;fill:none;stroke:#9AA4B2;stroke-width:2;stroke-linecap:round}
.pop__q{flex:1;min-width:0;overflow:hidden;white-space:nowrap}
.pop__go{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent-on-light);transition:transform 150ms var(--globe-ease),background 150ms var(--globe-ease)}
.pop:hover .pop__go,.pop:focus-visible .pop__go{background:var(--accent-on-light-strong);transform:translateX(2px)}
.pop__go svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Engine card: opens when a satellite is clicked. Only opacity eases: the
   position follows the satellite until pointer or keyboard interaction holds it. */
.engine-card{position:absolute;left:0;top:0;width:280px;box-sizing:border-box;padding:14px 16px 10px;border-radius:12px;background:rgba(18,24,36,.96);box-shadow:0 24px 56px -20px rgba(2,6,16,.95);font:400 13px/1.6 'Noto Sans TC',sans-serif;color:#CBD5E1;pointer-events:auto;opacity:0;visibility:hidden;transition:opacity 200ms var(--globe-ease),visibility 0s 200ms}
.engine-card{z-index:1;overflow-y:auto}
.engine-card.is-open{opacity:1;visibility:visible;transition:opacity 200ms var(--globe-ease)}
.engine-card__head{display:flex;align-items:center;gap:8px;margin:0 0 2px;font:500 15px/1.4 'Noto Sans TC',sans-serif;color:#F8FAFC}
.engine-card__head i{width:10px;height:10px;border-radius:50%;background:var(--engine)}
.engine-card__sub{margin:0 0 8px;font:400 11px/1.5 'IBM Plex Mono','Noto Sans TC',monospace;color:#94A3B8}
.engine-card ul{list-style:none;margin:0;padding:0}
.engine-card a{display:block;padding:8px 0;border-top:1px solid rgba(229,234,242,.08);color:#E2E8F0;text-decoration:none}
.engine-card a:hover,.engine-card a:focus-visible{color:var(--accent-on-dark);text-decoration:none}
.engine-card a::after{content:' →';color:#64748B}
.sat-tip{position:absolute;left:0;top:0;padding:4px 9px;border-radius:6px;background:rgba(18,24,36,.94);font:500 11px/1.5 'IBM Plex Mono','Noto Sans TC',monospace;color:#E2E8F0;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 150ms var(--globe-ease)}
.sat-tip.is-on{opacity:1}
.sat-tip b{font-weight:500;color:var(--engine)}

@media (max-width:800px){
  .globe-hero{min-height:auto}
  .globe-grid{grid-template-columns:1fr;gap:8px;padding:32px 20px 0}
  .globe-grid .hero-content{grid-column:auto;grid-row:auto}
  /* Taller than the orbits, so search boxes get a band above and below them. */
  .globe-stage{grid-column:auto;grid-row:auto;justify-self:stretch;width:auto;min-height:0;height:520px}
  .pop{width:290px;height:40px;padding-left:13px;border-radius:20px;font-size:13.5px}
  .pop__go{width:30px;height:30px}
  .engine-card{width:250px}
}