/* =====================================================
   LOADER SECTION
   ===================================================== */
#loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--magenta);
  color: var(--ink);
  overflow: hidden;
}

#loader {
  transition: opacity 0.5s ease;
}

#loader.is-exiting {
  pointer-events: none;
  opacity: 0;
}

#loader.is-hidden {
  display: none;
}

/* Keep the canvas mesh lines visible while the loader is the intro screen */
#loader.is-ready .loader-canvas {
  opacity: 1;
}

.loader-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.loader-brand {
  position: relative;
  z-index: 2;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3.5rem, 14vw, 10rem);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--ink);
  mix-blend-mode: overlay;
  opacity: 0;
  transform: scale(0.92);
}

#loader.is-ready .loader-brand {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.loader-tagline {
  position: absolute;
  bottom: 8vh;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(11, 13, 16, 0.6);
  opacity: 0;
}

#loader.is-ready .loader-tagline {
  opacity: 1;
  transition: opacity 0.6s ease 0.4s;
}