/*
  99 Manifest: the opening panel.
  Website developed by pressific.com Emily Park, Dileep C. Kaluaratchie and Tech Generation Ltd.

  The panel is the only thing this file styles. Everything inside it is drawn on
  the canvas by n99-intro.js; the wordmark is the site's own artwork, placed
  rather than drawn so it stays crisp.

  Nothing here touches the page underneath, and the panel removes itself, so a
  failure in the sequence cannot leave the site covered.
*/
.n99-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: #080c12;
  opacity: 1;
  transition: opacity 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.n99-intro.is-done {
  opacity: 0;
  pointer-events: none;
}

.n99-intro__canvas {
  position: absolute;
  inset: 0;
  display: block;
}

/* The wordmark arrives where the wall turns edge-on, so it reads as the wall
   resolving into the name rather than as a caption fading up over it. */
.n99-intro__word {
  position: absolute;
  top: 50%;
  left: 50%;
  /* set by the sequence from the gap the wall leaves; the fallback is for
     the instant before the first frame runs */
  width: var(--n99-word, min(46vw, 426px));
  transform: translate(-50%, calc(-50% + 14px)) scale(0.94);
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.n99-intro__word img {
  display: block;
  width: 100%;
  height: auto;
}

.n99-intro.is-named .n99-intro__word {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Small, quiet, and reachable by keyboard: it is an escape hatch, not part of
   the composition. */
.n99-intro__skip {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(126, 190, 197, 0.45);
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.n99-intro__skip:hover,
.n99-intro__skip:focus-visible {
  border-color: rgba(126, 190, 197, 0.9);
  color: #fff;
}

/* The page must not scroll behind the panel. */
.n99-intro-open,
.n99-intro-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .n99-intro { display: none !important; }
}

/* The panel fades over three quarters of a second, and for that whole time the
   wordmark was sitting at full opacity over the live page, so the site's own
   header logo appeared behind it and the handover read as a glitch. It leaves
   first, quickly. */
.n99-intro.is-done .n99-intro__word {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.03);
  transition: opacity 0.3s ease, transform 0.4s ease;
}

.n99-intro.is-done .n99-intro__skip { opacity: 0; transition: opacity 0.2s ease; }