:root {
  --void: #060607;
  --basalt: #101012;
  --ash: #3b3c41;
  --smoke: #94959b;
  --bone: #e9e8e4;

  --bar-h: 96px;
  /* every slant on the page runs at the star's 36 degree tip angle: tan(36deg) */
  --slant: calc(var(--bar-h) * .7265);
  --seam: 8px;

  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  overflow: hidden;
  background-color: var(--void);
  color: var(--bone);
  font-family: "Google Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Shown only when WebGL is missing: a still dot screen, no script needed. */
body.no-gl {
  background-image:
    radial-gradient(70% 45% at 72% 18%, rgb(233 232 228 / .12), transparent),
    radial-gradient(circle, rgb(148 149 155 / .28) 1px, transparent 1.4px);
  background-size: auto, 9px 9px;
}

#field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

body.no-gl #field { display: none; }

.launcher {
  position: relative;
  min-height: 100%;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mark {
  width: clamp(108px, 21vmin, 176px);
  height: auto;
  margin-bottom: clamp(14px, 2.6vmin, 24px);
  overflow: visible;
}

.mark__star, .mark__one { fill: var(--bone); }

.mark__gap {
  fill: #000;
  stroke: #000;
  stroke-width: 10;
  stroke-linejoin: miter;
  stroke-miterlimit: 20;
}

.wordmark {
  margin: 0 0 clamp(28px, 6vmin, 52px);
  font-size: clamp(3.5rem, 13vmin, 7.25rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.045em;
}

/* Extra bottom room keeps the j's tail inside the gradient's paint box. */
.wordmark__text {
  display: inline-block;
  padding-bottom: .18em;
  margin-bottom: -.18em;
  color: var(--bone);
  background: linear-gradient(180deg, #f4f3f0 18%, #8f9096 76%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.wordmark b { font-weight: 600; }

/* A custom 1 with the logo's sharp 36 degree peak, in place of the font's 1. */
.wordmark__one {
  height: .74em;
  width: auto;
  margin-left: .085em;
  vertical-align: baseline;
}

.bar {
  display: flex;
  width: min(100%, 720px);
  height: var(--bar-h);
}

.opt {
  --x: 50%;
  --y: 50%;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  border: 0;
  color: var(--bone);
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: radial-gradient(190px circle at var(--x) var(--y), rgb(233 232 228 / .85), rgb(233 232 228 / .17));
  transition: filter .2s;
}

/* The fill sits 1px inside, so the sheen above reads as a lit glass edge. */
.opt::before {
  content: "";
  position: absolute;
  inset: 1px;
  clip-path: inherit;
  background: rgb(14 14 16 / .88);
  transition: background-color .22s var(--ease);
}

.opt--open {
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 22px 100%, 0 calc(100% - 22px));
}

.opt--locked {
  margin-left: calc(var(--seam) - var(--slant));
  flex-grow: 1.34;
  color: var(--smoke);
  cursor: not-allowed;
  clip-path: polygon(var(--slant) 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}

.opt__name, .opt__state {
  position: absolute;
  left: 26px;
  white-space: nowrap;
  transition: color .22s var(--ease);
}

.opt--locked .opt__name, .opt--locked .opt__state { left: calc(var(--slant) + 22px); }

.opt__name {
  top: 22px;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -.01em;
}

.opt__state {
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--smoke);
  font-size: .9rem;
}

.lock { width: 13px; height: 13px; }
.lock__shackle { fill: none; stroke: currentColor; stroke-width: 1.5; }
.lock__body { fill: currentColor; }

/* ThomasAI flips to solid bone: the one loud state on the page. */
.opt--open:hover::before,
.opt--open:focus-visible::before { background: var(--bone); }

.opt--open:hover, .opt--open:focus-visible { color: var(--void); }

.opt--open:hover .opt__state,
.opt--open:focus-visible .opt__state { color: var(--basalt); }

.opt--open:active { filter: brightness(.82); }

.opt--locked:hover::before { background: rgb(22 22 25 / .92); }

.opt--locked:focus-visible { background: var(--bone); }
.opt--locked:focus-visible::before { inset: 2px; }

.opt:focus { outline: none; }

.lock.is-denied { animation: deny .34s var(--ease); }

@keyframes deny {
  20% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-1.5px); }
}

/* Intro: intro.js plays the star-to-1 sequence, then hands off to these reveals. */
#intro-stage { display: none; }

html.intro #intro-stage {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.intro__shape { fill: var(--bone); }

html.intro .mark,
html.intro .wordmark,
html.intro .bar { visibility: hidden; }

html.intro.show-mark .mark,
html.intro.show-word .wordmark,
html.intro.show-bar .bar { visibility: visible; }

/* The arms slide out from the stem and the gap opens behind them. */
.mark__star {
  transform-box: view-box;
  transform-origin: 112px 100px;
}

html.intro.show-mark .mark__star { animation: unfurl .55s var(--ease) both; }
html.intro.show-mark .mark__gap { animation: cut .5s .08s var(--ease) both; }

html.intro.show-word .wordmark { animation: wipe .75s var(--ease) both; }

html.intro.show-bar .opt--open { animation: part-left .6s var(--ease) both; }
html.intro.show-bar .opt--locked { animation: part-right .6s var(--ease) both; }

@keyframes unfurl { from { transform: scaleX(0); } }
@keyframes cut { from { stroke-width: 0; } }
@keyframes wipe { from { clip-path: inset(-25% 100% -25% 0); } to { clip-path: inset(-25% -4% -25% 0); } }

@keyframes part-left { from { opacity: 0; transform: translateX(16px); } }
@keyframes part-right { from { opacity: 0; transform: translateX(-16px); } }

@media (max-width: 620px) {
  :root { --bar-h: 88px; }

  .bar {
    flex-direction: column;
    height: auto;
    gap: var(--seam);
  }

  .opt { flex: none; height: var(--bar-h); }

  .opt--open { clip-path: polygon(0 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }

  .opt--locked {
    margin-left: 0;
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  }

  .opt--locked .opt__name, .opt--locked .opt__state { left: 26px; }

  .opt__name { top: 18px; }
  .opt__state { bottom: 16px; }
}

@media (max-height: 460px) {
  body { overflow: auto; }
}