.brand-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  color: #fff;
  animation: intro-failsafe 0s 8s forwards;
}
.brand-intro[hidden] { display: none; }
.brand-intro__scrim {
  position: absolute;
  inset: 0;
  background: #030303;
  will-change: opacity;
}
.brand-intro__emblem {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: transparent;
  transform-origin: 50% 50%;
  will-change: opacity, filter, transform;
}
.brand-intro__system,
.brand-intro__drpro {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  user-select: none;
  -webkit-user-drag: none;
}
.brand-intro__system {
  opacity: 0;
  filter: brightness(.84) blur(5px);
  will-change: opacity, filter, transform;
}
.brand-intro__drpro {
  opacity: 0;
  filter: brightness(1.04) blur(5px);
  will-change: opacity, filter, transform;
}
.hero-mark {
  padding-inline: 0;
  font-size: calc(var(--logo-size) * 1.16);
}
@media (min-width: 700px) {
  .hero-mark { transform: translateY(-8px); }
}
@keyframes intro-failsafe {
  to { visibility: hidden; pointer-events: none; }
}