/* n/fāss — the opening flourish.
   Concentric rings of wordmarks burst out of a single point, then drift, each
   ring at its own rate and direction. After the diep.io class tree.

   The wordmarks never rotate. They orbit — their position moves around the ring
   while the type itself stays horizontal, so it is always readable. That is the
   whole reason positions are computed per frame in JS rather than by spinning a
   container in CSS: spinning the container would take the type with it. */

.intro {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--paper);
  overflow: hidden;
  opacity: 1;
  transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.intro[hidden] { display: none; }
/* set by a tiny script in <head> so a repeat visit never flashes the intro */
.intro-skip .intro { display: none !important; }
.intro.is-leaving { opacity: 0; pointer-events: none; }

.intro-stage {
  position: absolute;
  inset: 0;
}

.intro-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  font-family: var(--f-mark);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--accent);
  white-space: nowrap;
  line-height: 1;
  will-change: transform, opacity;
  /* transform and opacity are written per frame by intro.js */
}

/* the one at dead centre — the seed the rest come out of */
.intro-logo.is-seed { color: var(--ink); }

.intro-enter {
  position: absolute;
  left: 50%;
  bottom: 3.25rem;
  transform: translateX(-50%);
  appearance: none;
  background: none;
  border: 0;
  padding: 0.4rem 0.2rem;
  cursor: pointer;
  font-family: var(--f-ui);
  text-transform: lowercase;
  font-size: 0.66rem;
  letter-spacing: 0.34em;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity 900ms ease, color 200ms ease;
}
.intro-enter.is-ready { opacity: 1; }
.intro-enter:hover { color: var(--ink); }

/* the accent bar again, as the underline that draws itself in */
.intro-enter::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transform: translateX(-50%);
  transition: width 320ms cubic-bezier(0.2, 0, 0, 1);
}
.intro-enter:hover::after,
.intro-enter:focus-visible::after { width: 100%; }

/* while the intro is up, the page behind it must not scroll */
body.intro-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  /* intro.js skips the animation entirely; this is belt and braces */
  .intro { transition: none; }
}