body.intro-active {
  overflow: hidden;
}

.brand-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  color: #2c2520;
  background:
    linear-gradient(135deg, #fcfbf8 0%, #f7f3ed 48%, #eee7dc 100%);
  opacity: 1;
  transition: opacity .82s ease, visibility .82s ease;
}

.brand-intro::before {
  content: "";
  position: absolute;
  inset: -18%;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 36%, rgba(255, 255, 255, .62) 48%, rgba(197, 160, 89, .06) 52%, transparent 64%);
  transform: translateX(-24%);
  animation: intro-light-sweep 4.8s cubic-bezier(.3, .1, .2, 1) both;
}

.brand-intro::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(70, 45, 24, .012) 0, rgba(70, 45, 24, .012) 1px, transparent 1px, transparent 4px),
    linear-gradient(90deg, rgba(255, 255, 255, .2), transparent 18%, transparent 82%, rgba(255, 255, 255, .2));
  mix-blend-mode: multiply;
}

@keyframes intro-light-sweep {
  0% { transform: translateX(-28%); opacity: .28; }
  46% { opacity: .8; }
  100% { transform: translateX(28%); opacity: .12; }
}

.brand-intro.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#intro-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  filter: saturate(1.06) contrast(1.03);
}

.intro-wordmark {
  position: absolute;
  left: 50%;
  top: 67%;
  display: grid;
  justify-items: center;
  color: #7a2228;
  text-align: center;
  transform: translate(-50%, -50%) translateY(12px);
  opacity: 0;
  pointer-events: none;
}

.intro-wordmark span {
  color: #96733c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
}

.intro-flash {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(920px, 80vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 239, 194, .74), rgba(218, 174, 87, .16) 24%, transparent 66%);
  filter: blur(18px);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.35);
  pointer-events: none;
}

.intro-progress {
  position: absolute;
  left: 50%;
  bottom: 50px;
  width: min(240px, 42vw);
  height: 1px;
  overflow: hidden;
  background: rgba(87, 63, 36, .14);
  transform: translateX(-50%);
}

.intro-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: #b58a42;
  transform: translateX(-100%);
  animation: intro-progress 5.2s cubic-bezier(.55, .08, .2, 1) forwards;
}

@keyframes intro-progress {
  to { transform: translateX(0); }
}

.intro-skip {
  position: absolute;
  right: 34px;
  top: 30px;
  z-index: 2;
  padding: 10px 2px;
  color: rgba(44, 37, 32, .58);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(44, 37, 32, .25);
  border-radius: 0;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.intro-skip:hover {
  color: #7a2228;
  border-color: #7a2228;
}

@media (max-width: 640px) {
  .intro-wordmark {
    top: 64%;
  }

  .intro-skip {
    top: 18px;
    right: 20px;
  }

  .intro-progress {
    bottom: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-progress i {
    animation-duration: .8s;
  }
}