.brand-intro {
  --intro-night: #030e1e;
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: var(--intro-night);
  color: #fff;
  overflow: hidden;
  animation: intro-curtain 650ms 2350ms cubic-bezier(.76, 0, .24, 1) both;
}
.brand-intro__art {
  position: relative;
  width: min(490px, 90vw, 78svh);
  aspect-ratio: 1;
  animation: intro-depart 600ms 2300ms cubic-bezier(.16, 1, .3, 1) both;
}
.brand-intro__image, .brand-intro__drawing {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.brand-intro__image {
  object-fit: contain;
  animation: intro-light 800ms 1100ms both;
}
.brand-intro__drawing { animation: intro-ink-out 450ms 1500ms both; }
.brand-intro__outline {
  fill: none;
  stroke: #fff;
  stroke-width: 20;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  animation: intro-draw 1400ms cubic-bezier(.65, 0, .25, 1) both;
}
.brand-intro__base { animation-delay: 450ms; animation-duration: 750ms; }
.brand-intro__spark {
  transform-origin: 627px 517px;
  fill: #8fd3ff;
  animation: intro-spark 1100ms 650ms cubic-bezier(.16, 1, .3, 1) both;
}
.brand-intro__skip {
  position: absolute;
  bottom: max(24px, env(safe-area-inset-bottom));
  right: max(24px, env(safe-area-inset-right));
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid #627184;
  border-radius: 4px;
  background: transparent;
  color: #fff;
  font: 14px/1.4 system-ui, sans-serif;
  cursor: pointer;
}
.brand-intro__skip:hover { background: #172b43; }
.brand-intro__skip:focus-visible { outline: 2px solid #8fd3ff; outline-offset: 4px; }
@keyframes intro-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes intro-spark {
  from { opacity: 0; transform: scale(.12) rotate(-35deg); }
  65% { opacity: 1; transform: scale(1.08) rotate(0deg); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes intro-light { from { opacity: 0; } to { opacity: 1; } }
@keyframes intro-ink-out { to { opacity: 0; } }
@keyframes intro-depart { to { opacity: 0; transform: scale(1.08); } }
@keyframes intro-curtain { from { clip-path: inset(0); } to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .brand-intro, .brand-intro * { animation: none; }
  .brand-intro__drawing { display: none; }
}