@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("../fonts/inter-latin-200.woff2") format("woff2");
}

:root {
  --ink: #09090B; /* page, void */
  --chamber: #12141A; /* raised surface only if needed */
  --bone: #E4DFD4; /* the only light. never #fff */
  --trace: #8B9A9C; /* cool metal, secondary */
  --ember: #B8956A; /* one gold. .mark hover only */
  --font: "Inter", system-ui, sans-serif;
  --nih-size: clamp(0.7rem, 1.4vw, 0.95rem);
  --nih-tracking: 0.62em;
  --line-size: clamp(0.62rem, 1.05vw, 0.78rem);
  --line-tracking: 0.22em;
  --line-leading: 2.3;
  --well-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --well-in: 1400ms;
  --well-out: 1000ms;
  --ember-in: 900ms;
  --ember-out: 700ms;
  --spin-outer: 56s;
  --spin-inner: 64s;
  --spin-outer-well: 96s;
  --spin-inner-well: 140s;
  --load-deadline: 1200ms;
}

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

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

html {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font);
  font-weight: 200;
  font-synthesis: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ink);
  overflow: hidden;
  cursor: default;
}

main {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem 8vh;
}

.mark {
  display: block;
  width: 26vmin;
  height: 26vmin;
  overflow: visible;
  animation: arrive 1.4s ease both;
}

.mark__well,
.mark__outer-g,
.mark__inner-g,
.mark__outer,
.mark__inner {
  transform-box: view-box;
  transform-origin: 256px 256px;
}

.mark__well {
  transform: perspective(900px) rotateX(0deg);
}

.mark__outer-g,
.mark__inner-g {
  transform: scale(1);
}

.mark__ember {
  fill: var(--ember);
  stroke: none;
  opacity: 0;
}

.mark__outer {
  animation: orbit var(--spin-outer) linear infinite;
}

.mark__inner {
  animation: orbit var(--spin-inner) linear infinite reverse;
}

h1 {
  margin: 5vh 0 0;
  color: var(--bone);
  font-weight: 200;
  font-size: var(--nih-size);
  letter-spacing: var(--nih-tracking);
  line-height: 1;
  text-indent: var(--nih-tracking);
  white-space: nowrap;
  opacity: 1;
  animation: arrive 1.4s ease 0.4s backwards;
}

.lines {
  margin: 8vh 0 0;
  padding-inline-start: var(--line-tracking);
  color: var(--bone);
  font-weight: 200;
  font-size: var(--line-size);
  letter-spacing: var(--line-tracking);
  line-height: var(--line-leading);
  text-align: center;
  opacity: 0.72;
  animation: arrive-lines 1.4s ease 1s backwards;
}

::selection {
  background: var(--bone);
  color: var(--ink);
}

@keyframes arrive {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes arrive-lines {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.72;
  }
}

@keyframes orbit {
  to {
    transform: rotate(360deg);
  }
}

html.is-loading .mark,
html.is-revealing .mark,
html.is-revealed .mark {
  /* is-revealed keeps arrive from restarting when reveal ends */
  animation: none;
  opacity: 1;
}

html.is-loading h1,
html.is-loading .lines {
  animation: none;
  opacity: 0;
}

html.is-loading .mark__outer-g,
html.is-loading .mark__inner-g {
  opacity: 0;
}

html.is-loading .mark__ember,
html.is-revealing .mark__ember {
  transition: opacity var(--ember-out) var(--well-ease);
}

html.is-loading .mark__ember {
  opacity: 1;
}

html.is-revealing .mark__ember {
  opacity: 0;
}

html.is-revealing .mark__outer-g,
html.is-revealing .mark__inner-g {
  animation: arrive 1.4s ease both;
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-loading):not(.is-revealing) .mark__well,
  html:not(.is-loading):not(.is-revealing) .mark__outer-g,
  html:not(.is-loading):not(.is-revealing) .mark__inner-g {
    transition: transform var(--well-out) var(--well-ease);
  }

  html:not(.is-loading):not(.is-revealing) .mark__ember {
    transition: opacity var(--ember-out) var(--well-ease) 180ms;
  }

  html:not(.is-loading):not(.is-revealing) h1 {
    transition:
      letter-spacing var(--well-out) var(--well-ease),
      text-indent var(--well-out) var(--well-ease),
      opacity var(--well-out) var(--well-ease);
  }

  html:not(.is-loading):not(.is-revealing) .lines {
    transition: opacity var(--well-out) var(--well-ease);
  }

  html:not(.is-loading):not(.is-revealing) .mark:hover .mark__well {
    transform: perspective(900px) rotateX(12deg);
    transition-duration: var(--well-in);
  }

  html:not(.is-loading):not(.is-revealing) .mark:hover .mark__outer-g {
    transform: scale(1.06);
    transition-duration: var(--well-in);
  }

  html:not(.is-loading):not(.is-revealing) .mark:hover .mark__inner-g {
    transform: scale(0.88);
    transition-duration: var(--well-in);
  }

  html:not(.is-loading):not(.is-revealing) .mark:hover .mark__ember {
    opacity: 1;
    transition: opacity var(--ember-in) var(--well-ease);
  }

  html:not(.is-loading):not(.is-revealing) .mark:hover ~ h1 {
    letter-spacing: 0.82em;
    text-indent: 0.82em;
    opacity: 0.28;
    transition-duration: 1200ms;
  }

  html:not(.is-loading):not(.is-revealing) .mark:hover ~ .lines {
    opacity: 0.40;
    transition-duration: 1200ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mark,
  .mark__outer,
  .mark__inner,
  h1,
  .lines,
  html.is-loading .mark,
  html.is-revealing .mark,
  html.is-revealing .mark__outer-g,
  html.is-revealing .mark__inner-g,
  html.is-loading h1,
  html.is-revealing h1,
  html.is-loading .lines,
  html.is-revealing .lines {
    animation: none;
  }

  .mark,
  h1,
  html.is-loading .mark,
  html.is-revealing .mark,
  html.is-loading h1,
  html.is-revealing h1,
  html.is-loading .mark__outer-g,
  html.is-loading .mark__inner-g,
  html.is-revealing .mark__outer-g,
  html.is-revealing .mark__inner-g {
    opacity: 1;
  }

  .lines,
  html.is-loading .lines,
  html.is-revealing .lines {
    opacity: 0.72;
  }

  html.is-loading .mark__ember,
  html.is-revealing .mark__ember {
    opacity: 0;
  }

  .mark__well,
  .mark__outer-g,
  .mark__inner-g,
  .mark__ember,
  h1,
  .lines,
  html.is-loading .mark__ember,
  html.is-revealing .mark__ember {
    transition: none;
  }

  .mark:hover .mark__well,
  html:not(.is-loading):not(.is-revealing) .mark:hover .mark__well {
    transform: perspective(900px) rotateX(0deg);
    transition: none;
  }

  .mark:hover .mark__outer-g,
  .mark:hover .mark__inner-g,
  html:not(.is-loading):not(.is-revealing) .mark:hover .mark__outer-g,
  html:not(.is-loading):not(.is-revealing) .mark:hover .mark__inner-g {
    transform: scale(1);
    transition: none;
  }

  .mark:hover .mark__ember,
  html:not(.is-loading):not(.is-revealing) .mark:hover .mark__ember {
    opacity: 0;
    transition: none;
  }

  .mark:hover ~ h1,
  html:not(.is-loading):not(.is-revealing) .mark:hover ~ h1 {
    letter-spacing: var(--nih-tracking);
    text-indent: var(--nih-tracking);
    opacity: 1;
    transition: none;
  }

  .mark:hover ~ .lines,
  html:not(.is-loading):not(.is-revealing) .mark:hover ~ .lines {
    opacity: 0.72;
    transition: none;
  }
}