/* Home hero — the Atlas: a particle globe of the world that becomes the Data
   Druid mark and back. Loaded on the home page only. The scene reads its
   colours from these tokens, so both themes resolve from one place. */

:root{ --atlas-a:#1D2B53; --atlas-b:#F43F5E; --atlas-faint:#C3CBDD; }
:root[data-theme="dark"]{ --atlas-a:#A9BCF0; --atlas-b:#FB7185; --atlas-faint:#27345A; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --atlas-a:#A9BCF0; --atlas-b:#FB7185; --atlas-faint:#27345A; }
}

.ask-grid.atlas-grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:start; }
.hero-ask .atlas-grid .ask-copy h1{ font-size:clamp(2rem,3.5vw,2.85rem); margin-block-start:1rem; }
.hero-ask .atlas-grid .ask-copy .lead{ margin-block-start:1rem; }
.atlas-left{ display:grid; gap:clamp(1.4rem,3vw,2rem); min-width:0; }
.atlas-grid .ask-panel{ max-width:36rem; }

.hero-ask{ overflow-x:clip; }
.atlas-stage{ position:sticky; top:1rem; height:clamp(380px,40vw,580px); }
.atlas-stage canvas{ position:absolute; left:-10%; top:-10%; width:125%; height:120%; display:block; opacity:0; transition:opacity .9s var(--ease, ease); }
.atlas-still{ position:absolute; inset:0; margin:auto; height:56%; width:auto; max-width:100%; opacity:.12; }
:root[data-theme="dark"] .atlas-still{ filter:invert(1); }

/* Once the scene is running it owns the backdrop: the plate and the lattice
   step aside, and the still mark gives way to the live one. */
.hero-ask.is-3d .atlas-stage canvas{ opacity:1; }
.hero-ask.is-3d .atlas-still{ display:none; }
/* display, not opacity: both run their own opacity animations, which win. */
.hero-ask.is-3d .hero-weave,
.hero-ask.is-3d .hero-plate{ display:none; }

@media (max-width:980px){
  .ask-grid.atlas-grid{ grid-template-columns:1fr; }
  /* headline first on phones; the globe follows, smaller */
  .atlas-stage{ position:relative; top:auto; height:clamp(220px,62vw,320px); margin-block-start:.5rem; }
  .atlas-stage canvas{ left:0; top:-6%; width:100%; height:112%; }
}