/* VGAMR — pre-launch holding page
   Palette and type match the product design system:
   teal-navy ground, orange accent on the V, Archivo for display. */

:root{
  --ground:#091825;
  --ink:#EDF3FA;
  --ink-2:#8FA3BC;
  --ink-3:#5E7390;
  --line:rgba(237,243,250,.14);
  --accent:#FF9E2C;      /* Vee's orange — see note in README */
  --cyan:#5BE9D4;
  --mx:50vw;           /* cursor position, set by index.html */
  --my:42vh;
  --lit:0;             /* 0 until the pointer moves */
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}


/* ---- background: a faint grid that lights up under the cursor ---- */
.bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}

.grid{
  position:absolute;inset:-1px;
  background-image:
    linear-gradient(rgba(237,243,250,.016) 1px,transparent 1px),
    linear-gradient(90deg,rgba(237,243,250,.016) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(130% 95% at 50% 42%,#000 30%,transparent 88%);
          mask-image:radial-gradient(130% 95% at 50% 42%,#000 30%,transparent 88%);
}

/* the same grid, brighter, revealed only in a pool around the pointer */
.grid-lit{
  background-image:
    linear-gradient(rgba(255,158,44,.17) 1px,transparent 1px),
    linear-gradient(90deg,rgba(91,233,212,.12) 1px,transparent 1px);
  opacity:var(--lit);
  transition:opacity .7s ease;
  -webkit-mask-image:radial-gradient(340px 340px at var(--mx) var(--my),rgba(0,0,0,.85) 0%,rgba(0,0,0,.35) 40%,transparent 74%);
          mask-image:radial-gradient(300px 300px at var(--mx) var(--my),#000 0%,rgba(0,0,0,.6) 38%,transparent 70%);
}

.glow{
  position:absolute;inset:0;
  background:radial-gradient(640px 640px at var(--mx) var(--my),
    rgba(255,158,44,.040),rgba(91,233,212,.016) 44%,transparent 72%);
  opacity:var(--lit);
  transition:opacity .8s ease;
}

.stage{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:48px;
  padding:72px 24px 150px;
  overflow:hidden;
  text-align:center;
  z-index:1;
}

/* ---- two very faint arcs, and an orb that rides them ----
   Each arc is the top edge of a huge circle. The orb is pushed out to that
   same radius from a zero-size pivot at the circle's centre, so rotating the
   pivot traces the arc exactly — but the composited layer stays orb-sized
   instead of ~2400px square. */
.arcs{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.arcs i{
  position:absolute;
  left:50%;
  display:block;
  border-radius:50%;
  border:1px solid transparent;
  transform:translateX(-50%);
}
.arcs .a1{
  width:190vmax;height:190vmax;
  top:calc(50% + 175px);
  border-top-color:rgba(91,233,212,.10);
  border-left-color:rgba(91,233,212,.05);
  border-right-color:rgba(91,233,212,.05);
}
.arcs .a2{
  width:150vmax;height:150vmax;
  top:calc(50% + 285px);
  border-top-color:rgba(255,158,44,.11);
}

/* zero-size pivot sitting at each circle's centre */
.track{
  position:absolute;
  left:50%;
  width:0;height:0;
  opacity:0;
}
.t1{top:calc(50% + 175px + 95vmax)}
.t2{top:calc(50% + 285px + 75vmax)}

/* the orb itself, out at the rim */
.track b{
  position:absolute;
  left:-3px;
  width:6px;height:6px;
  border-radius:50%;
  background:#DCEFFF;
  box-shadow:
    0 0 8px 2px rgba(165,225,255,.55),
    0 0 22px 7px rgba(91,233,212,.20);
}
.t1 b{top:calc(-95vmax - 3px)}
.t2 b{top:calc(-75vmax - 3px)}

/* comet tail, trailing behind along the tangent.
   Blurred so it reads as light rather than another hairline on the arc. */
.track b::before{
  content:'';
  position:absolute;
  top:50%;
  height:3px;
  margin-top:-1.5px;
  border-radius:999px;
  filter:blur(1px);
}
/* t1 travels left to right, so its tail points left */
.t1 b::before{
  right:50%;
  width:150px;
  background:linear-gradient(270deg,rgba(215,245,255,.9),rgba(91,233,212,.26) 38%,transparent);
}
/* t2 travels right to left, so its tail points right */
.t2 b::before{
  left:50%;
  width:120px;
  background:linear-gradient(90deg,rgba(255,226,184,.85),rgba(255,158,44,.24) 38%,transparent);
}
.t2 b{
  background:#FFEBD2;
  box-shadow:
    0 0 8px 2px rgba(255,196,118,.52),
    0 0 20px 6px rgba(255,158,44,.20);
}

/* a quick pass, then a short wait. Cycles are deliberately out of step so
   the two orbs drift apart instead of pairing up. Each pass is ~0.8s. */
.t1{animation:sweep1 8s  linear 2s infinite}
.t2{animation:sweep2 11s linear 6s infinite}

@keyframes sweep1{
  0%,   3%  {transform:rotate(-36deg);opacity:0}
  4.2%      {opacity:1}
  11.5%     {opacity:1}
  13%       {transform:rotate(36deg);opacity:0}
  100%      {transform:rotate(36deg);opacity:0}
}
@keyframes sweep2{
  0%,   3%  {transform:rotate(48deg);opacity:0}
  4%        {opacity:1}
  9.3%      {opacity:1}
  10.5%     {transform:rotate(-48deg);opacity:0}
  100%      {transform:rotate(-48deg);opacity:0}
}

.inner{position:relative;max-width:37rem;display:flex;flex-direction:column;align-items:center;gap:18px}

.wordmark{
  margin:0;
  font-family:var(--display);
  font-variation-settings:'wdth' 118,'wght' 820;
  font-weight:820;
  font-size:clamp(3.4rem,15vw,6.4rem);
  line-height:.9;
  letter-spacing:-.035em;
  color:var(--ink);
}
.wordmark span{color:var(--accent)}
.wordmark.small{font-size:clamp(2.4rem,9vw,3.4rem)}

.tagline{
  margin:0;
  font-family:var(--display);
  font-variation-settings:'wdth' 104,'wght' 500;
  font-size:.74rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ink-2);
}

.line span{display:inline-block;margin-top:9px;color:var(--ink-3)}
.line{
  margin:6px 0 0;
  font-size:1.02rem;
  line-height:1.6;
  color:var(--ink-2);
  text-wrap:balance;
}

.note{
  margin:0;
  font-size:.82rem;
  color:var(--ink-3);
  min-height:1.3em;
}
.note.is-error{color:#FF9BC5}
.note.is-done{color:var(--cyan)}
.note a{color:var(--ink-2)}

/* footer */
.foot{
  position:absolute;
  left:0;right:0;bottom:26px;
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.soon{display:inline-flex;align-items:center;gap:7px}
.soon i{
  width:6px;height:6px;border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 0 rgba(91,233,212,.5);
  animation:pulse 2.8s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(91,233,212,.45)}
  70%{box-shadow:0 0 0 7px rgba(91,233,212,0)}
  100%{box-shadow:0 0 0 0 rgba(91,233,212,0)}
}

/* entrance — the finished state is the default, so if the animation never
   runs (old browser, blocked CSS, a crawler snapshotting early) the page
   still reads. 'backwards' only borrows the start frame during the delay. */
.inner > *{opacity:1}
.inner > *{animation:rise .7s cubic-bezier(.2,.7,.3,1) backwards}
.inner > *:nth-child(1){animation-delay:.05s}
.inner > *:nth-child(2){animation-delay:.14s}
.inner > *:nth-child(3){animation-delay:.22s}
.inner > *:nth-child(4){animation-delay:.3s}
.inner > *:nth-child(5){animation-delay:.36s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}