/* $AI — ARTIFICIAL INSEMINATOR — desktop landing page.
   All coordinates are canvas px on the 2560x1024 layer canvas, written as calc(N * var(--k)).
   --k is a LENGTH: the on-screen px per canvas px. */

:root{
  --k: calc(max(min(100vh, 66.6667vw), 40vw) / 1024);
  --ink:#ECF0F1;
  --dim:#8A989E;
  --teal:#60DED6;
  --amber:#E8A84A;
  --label:#8A989E;
  --sans:-apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:Menlo, Consolas, monospace;
}

*{ box-sizing:border-box; }

html, body{
  height:100%;
  margin:0;
  overflow:hidden;
  background:#0E1418;
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}

.mono{ font-family:var(--mono); }

/* ---------------------------------------------------------------- stage */

.stage{
  position:fixed;
  left:50%; top:50%;
  translate:-50% -50%;
  height: calc(1024 * var(--k));
  width:  calc(2560 * var(--k));
  overflow:hidden;
  background:#0E1418;
}

.shake{
  position:absolute; inset:0;
  will-change:transform;
}

.layer{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
}
#layerB{ opacity:0; }
#layerA, #layerB{ transition:none; }

.scrim{
  position:absolute; left:0; width:100%;
  pointer-events:none;
}
.scrim-top{
  top:0; height: calc(190 * var(--k));
  background:linear-gradient(180deg, rgba(8,13,16,.59), transparent);
}
.scrim-bot{
  bottom:0; height: calc(334 * var(--k));
  background:linear-gradient(0deg, rgba(8,13,16,.72), transparent);
}

/* ---------------------------------------------------------------- safe box */

.safe{
  position:absolute;
  left:20%; top:7.8125%;
  width:60%; height:84.375%;
}

/* ---------------------------------------------------------------- header */

.header{
  position:absolute;
  left: calc(48 * var(--k));
  right: calc(48 * var(--k));
  top: calc(24 * var(--k));
  height: calc(42 * var(--k));
  display:flex; align-items:center;
}
.chip{
  flex:0 0 auto;
  width: calc(42 * var(--k)); height: calc(42 * var(--k));
  border-radius: calc(9 * var(--k));
  background:var(--ink); color:#10161A;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size: calc(24 * var(--k));
  line-height:1;
}
.company{
  margin-left: calc(16 * var(--k));
  font-weight:700;
  font-size: calc(15 * var(--k));
  letter-spacing: calc(1.6 * var(--k));
  color:var(--dim);
  white-space:nowrap;
}
.build{
  margin-left:auto;
  font-size: calc(15 * var(--k));
  color:#BAC6CC;
  white-space:nowrap;
}

/* ---------------------------------------------------------------- brand block */

.brand-ai{
  position:absolute;
  left:50%; top: calc(4 * var(--k));
  translate: calc(-50% - 3 * var(--k)) 0;
  font-weight:700;
  font-size: calc(132 * var(--k));
  letter-spacing: calc(6 * var(--k));
  line-height:1;
  color:var(--ink);
  white-space:nowrap;
}
.subtitle{
  position:absolute;
  left:50%; top: calc(156 * var(--k));
  translate: calc(-50% - 3.75 * var(--k)) 0;
  text-align:center;
  font-weight:700;
  font-size: calc(31 * var(--k));
  letter-spacing: calc(7.5 * var(--k));
  line-height:1;
  color:var(--ink);
  white-space:nowrap;
  transition: color 260ms linear;
}
.subtitle.revealed{ color:var(--teal); }

.tagline{
  position:absolute;
  left:50%; top: calc(206 * var(--k));
  translate: calc(-50% - 1.7 * var(--k)) 0;
  font-weight:400;
  font-size: calc(19 * var(--k));
  letter-spacing: calc(3.4 * var(--k));
  line-height:1;
  color:#B0BCC2;
  white-space:nowrap;
  transition: opacity 1100ms linear, color 260ms linear;
}
.tagline.holding{ opacity:.45; }
.tagline.revealed{ color:var(--dim); opacity:1; }

/* ---------------------------------------------------------------- telemetry */

.hud{
  position:absolute;
  left: calc(48 * var(--k));
  top: calc(672 * var(--k));
  width: calc(400 * var(--k));
}
.hud-label{
  height: calc(13 * var(--k));
  line-height:1;
  font-weight:700;
  font-size: calc(13 * var(--k));
  letter-spacing: calc(2.2 * var(--k));
  color:var(--label);
}
.hud-rows{ margin-top: calc(13 * var(--k)); }
.hud-row{
  position:relative;
  width:100%;
  height: calc(28 * var(--k));
  font-family:var(--mono);
  font-size: calc(15 * var(--k));
  line-height:1;
}
.hud-row .k{ position:absolute; left:0; top:0; color:var(--dim); white-space:nowrap; }
.hud-row .v{ position:absolute; left: calc(210 * var(--k)); top:0; color:var(--ink); white-space:nowrap; }
.hud-row .v.amber{ color:var(--amber); }

/* ---------------------------------------------------------------- inference log */

.log{
  position:absolute;
  right: calc(48 * var(--k));
  top: calc(672 * var(--k));
  text-align:right;
}
.log-label{
  height: calc(13 * var(--k));
  line-height:1;
  font-weight:700;
  font-size: calc(13 * var(--k));
  letter-spacing: calc(2.2 * var(--k));
  color:var(--label);
}
.log-lines{
  margin-top: calc(13 * var(--k));
  height: calc(84 * var(--k));
}
.log-line{
  height: calc(28 * var(--k));
  line-height:1;
  font-family:var(--mono);
  font-size: calc(15 * var(--k));
  color:var(--dim);
  white-space:nowrap;
  overflow:hidden;
}
.log-line.teal{ color:var(--teal); }
.log-line.push{ animation: logPush 220ms ease-out both; }
@keyframes logPush{
  from{ opacity:0; transform: translateY(calc(10 * var(--k))); }
  to{ opacity:1; transform:none; }
}

/* ---------------------------------------------------------------- status */

.status{
  position:absolute;
  left:50%; top: calc(656 * var(--k));
  translate: calc(-50% - 2.1 * var(--k)) 0;
  font-weight:700;
  font-size: calc(17 * var(--k));
  letter-spacing: calc(4.2 * var(--k));
  line-height:1;
  color:#78868C;
  white-space:nowrap;
}
.status.holding{ color:var(--ink); }
.status.revealed{
  color:var(--teal);
  animation: riseIn 240ms linear 180ms both;
}
@keyframes riseIn{
  from{ opacity:0; transform: translateY(calc(6 * var(--k))); }
  to{ opacity:1; transform:none; }
}

/* ---------------------------------------------------------------- control */

.ctrl{
  position:absolute;
  left: calc(610 * var(--k));
  top: calc(690 * var(--k));
  width: calc(316 * var(--k));
  height: calc(64 * var(--k));
  border:0;
  border-radius: calc(8 * var(--k));
  background:var(--ink);
  color:#0E1418;
  font-family:var(--sans);
  font-weight:700;
  font-size: calc(23 * var(--k));
  letter-spacing: calc(3.6 * var(--k));
  line-height:1;
  cursor:pointer;
  transition: transform 90ms linear, background-color 90ms linear;
}
.ctrl:disabled{ cursor:default; }
.ctrl.is-holding{
  transform: translateY(calc(2 * var(--k)));
  background:#D2D9DB;
}

.rail{
  position:absolute;
  left: calc(610 * var(--k));
  top: calc(764 * var(--k));
  width: calc(316 * var(--k));
  height: calc(6 * var(--k));
  border-radius: calc(3 * var(--k));
  background:rgba(255,255,255,.15);
  overflow:hidden;
}
.rail-fill{
  width:0; height:100%;
  border-radius: calc(3 * var(--k));
  background:var(--teal);
}

.hint{
  position:absolute;
  left:50%; top: calc(782 * var(--k));
  translate: -50% 0;
  font-size: calc(14 * var(--k));
  letter-spacing: calc(1.4 * var(--k));
  line-height:1;
  color:var(--dim);
  white-space:nowrap;
}
.hint.hidden{ display:none; }

/* ---------------------------------------------------------------- launch row */

.launch{
  position:absolute;
  left:50%; top: calc(788 * var(--k));
  translate: -50% 0;
  display:flex;
  gap: calc(24 * var(--k));
}
.launch.hidden{ display:none; }
.pill{
  height: calc(36 * var(--k));
  padding:0 calc(28 * var(--k));
  border-radius: calc(7 * var(--k));
  border:1px solid rgba(150,166,172,.75);
  background:transparent;
  color:#CEDAE0;
  font-family:var(--sans);
  font-weight:700;
  font-size: calc(13 * var(--k));
  letter-spacing: calc(1.6 * var(--k));
  line-height:1;
  display:flex; align-items:center;
  white-space:nowrap;
  cursor:pointer;
  text-decoration:none;
}
.launch.in .pill{ animation: pillIn 280ms ease-out both; }
.launch.in .pill:nth-child(1){ animation-delay:420ms; }
.launch.in .pill:nth-child(2){ animation-delay:460ms; }
.launch.in .pill:nth-child(3){ animation-delay:500ms; }
@keyframes pillIn{
  from{ opacity:0; transform: translateY(calc(10 * var(--k))); }
  to{ opacity:1; transform:none; }
}

/* ---------------------------------------------------------------- ticker */

.ticker{
  position:absolute;
  left:0; bottom:0;
  width:100%;
  height: calc(48 * var(--k));
  background:rgba(10,15,18,.88);
  overflow:hidden;
  pointer-events:none;
}
.ticker-track{
  position:absolute; left:0; top:0;
  height:100%;
  display:flex;
  white-space:nowrap;
  will-change:transform;
  animation: tickerMove 48s linear infinite;
}
.ticker-half{
  display:flex; align-items:center;
  height:100%;
}
.ticker-cell{
  font-weight:700;
  font-size: calc(14 * var(--k));
  letter-spacing: calc(2.4 * var(--k));
  color:#808E94;
  line-height:1;
}
.ticker-sep{
  color:#48565C;
  font-weight:700;
  font-size: calc(14 * var(--k));
  line-height:1;
  margin:0 calc(24 * var(--k));
}
@keyframes tickerMove{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ---------------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation:none; }
}