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

  The panel is all this file styles. Everything inside it is drawn on the canvas
  by nv-intro.js; the wordmark is the company'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.
*/
.nv-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: #06070e;
  opacity: 1;
  transition: opacity 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nv-intro.is-done { opacity: 0; pointer-events: none; }
.nv-intro__canvas { position: absolute; inset: 0; display: block; }

/* The wordmark arrives where the virion was, so the sequence resolves into the
   name rather than captioning itself. */
.nv-intro__word {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(46vw, 327px);
  transform: translate(-50%, calc(-50% + 10px)) scale(0.97);
  opacity: 0;
  transition: opacity 0.8s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.nv-intro__word img { display: block; width: 100%; height: auto; }
.nv-intro.is-named .nv-intro__word { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* The panel fades for three quarters of a second; the wordmark must not sit
   over the live page while it does. */
.nv-intro.is-done .nv-intro__word { opacity: 0; transition: opacity 0.3s ease; }

.nv-intro__skip {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(242, 242, 250, 0.32);
  border-radius: 999px;
  background: transparent;
  color: rgba(242, 242, 250, 0.7);
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.nv-intro__skip:hover, .nv-intro__skip:focus-visible { border-color: rgba(242, 242, 250, 0.8); color: #fff; }
.nv-intro.is-done .nv-intro__skip { opacity: 0; transition: opacity 0.2s ease; }

.nv-intro-open, .nv-intro-open body { overflow: hidden; }

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