.brand-splash {
  --brand-splash-yellow: #ffed49;
  --brand-splash-black: #000;
  --brand-splash-red: #d90000;
  --brand-splash-ease-out: cubic-bezier(.23, 1, .32, 1);
  --brand-splash-ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --brand-splash-handoff-scale: 1.78;
  --brand-splash-mark-shift: -158px;
  --brand-splash-tagline-x: -104px;
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  color: var(--brand-splash-black);
  font-family: "MiSans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  opacity: 1;
}

.brand-splash-skip .brand-splash { display: none !important; }

.brand-splash.is-handing-off {
  z-index: 3;
  background: transparent;
  pointer-events: none;
}

.brand-splash__motion {
  position: relative;
  width: min(420px, calc(100vw - 32px));
  height: 100px;
}

.brand-splash__hero {
  --brand-splash-mark-shift: calc(-158px * var(--brand-splash-handoff-scale));
  --brand-splash-tagline-x: calc(-104px * var(--brand-splash-handoff-scale));
  position: absolute;
  inset: 0;
  transform: scale(calc(1 / var(--brand-splash-handoff-scale)));
  transform-origin: center;
  transition: transform 760ms var(--brand-splash-ease-in-out);
}

.brand-splash.is-handing-off .brand-splash__hero {
  transform: translate(-21vw, 0) scale(1);
}

.brand-splash__word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: clamp(34px, 4vw, 42px);
  font-weight: 750;
  letter-spacing: -.04em;
  animation: brand-splash-word-exit 220ms var(--brand-splash-ease-out) 1.02s both;
}

.brand-splash__letter {
  display: inline-block;
  opacity: 0;
  transform: translate3d(var(--brand-splash-x), var(--brand-splash-y), 0) rotate(var(--brand-splash-rotate));
  animation: brand-splash-letter-arrive 620ms var(--brand-splash-ease-out) calc(var(--brand-splash-index) * 48ms) both;
}

.brand-splash__letter.is-brand-i {
  position: relative;
  width: .28em;
  height: 1em;
  vertical-align: -.08em;
}

.brand-splash__letter.is-brand-i::before,
.brand-splash__letter.is-brand-i::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.brand-splash__letter.is-brand-i::before {
  bottom: .12em;
  width: .13em;
  height: .52em;
  border-radius: .04em;
  background: var(--brand-splash-black);
}

.brand-splash__letter.is-brand-i::after {
  top: .14em;
  width: .17em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brand-splash-red);
}

.brand-splash__hero .brand-splash__logo-stage {
  width: calc(72px * var(--brand-splash-handoff-scale));
  height: calc(72px * var(--brand-splash-handoff-scale));
  margin: calc(-36px * var(--brand-splash-handoff-scale)) 0 0 calc(-36px * var(--brand-splash-handoff-scale));
}

.brand-splash__logo-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  animation: brand-splash-logo-settle 520ms var(--brand-splash-ease-in-out) .9s both;
}

.brand-splash__logo-disc {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: 50%;
  background: var(--brand-splash-yellow);
  animation: brand-splash-disc-expand 820ms var(--brand-splash-ease-in-out) 1.62s both;
}

.brand-splash__mark-stage {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  animation: brand-splash-mark-shift 520ms var(--brand-splash-ease-in-out) 2.18s both;
}

.brand-splash__hero .brand-splash__mark {
  width: calc(46px * var(--brand-splash-handoff-scale));
  height: calc(40px * var(--brand-splash-handoff-scale));
}

.brand-splash__mark {
  width: 46px;
  height: 40px;
  background: var(--brand-splash-black);
  -webkit-mask: url("assets/finalerp-logo-mark.png") center / contain no-repeat;
  mask: url("assets/finalerp-logo-mark.png") center / contain no-repeat;
  animation: brand-splash-mark-reveal 180ms var(--brand-splash-ease-out) 1.19s both;
}

.brand-splash__hero .brand-splash__tagline {
  font-size: calc(var(--brand-splash-handoff-scale) * clamp(16px, 2.5vw, 22px));
}

.brand-splash__tagline {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max-content;
  color: var(--brand-splash-black);
  font-size: clamp(16px, 2.5vw, 22px);
  font-weight: 650;
  letter-spacing: .02em;
  text-align: center;
  opacity: 0;
  animation: brand-splash-tagline-reveal 320ms var(--brand-splash-ease-out) 2.5s both;
}

@keyframes brand-splash-letter-arrive {
  0% { opacity: 0; transform: translate3d(var(--brand-splash-x), var(--brand-splash-y), 0) rotate(var(--brand-splash-rotate)); }
  72% { opacity: 1; transform: translate3d(0, 6px, 0) rotate(-2deg); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
}

@keyframes brand-splash-word-exit {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-20px); }
}

@keyframes brand-splash-logo-settle {
  0% { opacity: 0; transform: translate3d(150px, 0, 0) scale(.32); }
  26% { opacity: 1; transform: translate3d(150px, 0, 0) scale(.32); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes brand-splash-disc-expand {
  from { transform: scale(1); }
  to { transform: scale(80); }
}

@keyframes brand-splash-mark-shift {
  from { transform: translateX(0); }
  to { transform: translateX(var(--brand-splash-mark-shift)); }
}

@keyframes brand-splash-tagline-reveal {
  from { opacity: 0; transform: translate(calc(var(--brand-splash-tagline-x) + 34px), -50%); }
  to { opacity: 1; transform: translate(var(--brand-splash-tagline-x), -50%); }
}

@keyframes brand-splash-mark-reveal {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 520px) {
  .brand-splash {
    --brand-splash-mark-shift: -132px;
    --brand-splash-tagline-x: -84px;
  }

  .brand-splash__hero {
    --brand-splash-mark-shift: calc(-132px * var(--brand-splash-handoff-scale));
    --brand-splash-tagline-x: calc(-84px * var(--brand-splash-handoff-scale));
  }

  .brand-splash.is-handing-off .brand-splash__hero {
    transform: translate(0, -38vh) scale(calc(0.68 / var(--brand-splash-handoff-scale)));
  }
}

@media (min-width: 521px) and (max-width: 980px) {
  .brand-splash.is-handing-off .brand-splash__hero {
    transform: translate(0, -30vh) scale(calc(0.84 / var(--brand-splash-handoff-scale)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-splash__word { opacity: 0; animation: none !important; }
  .brand-splash__letter { opacity: 1; transform: none; animation: none !important; }
  .brand-splash__logo-stage { opacity: 1; transform: none; animation: none !important; }
  .brand-splash__logo-disc { transform: scale(80); animation: none !important; }
  .brand-splash__mark-stage { transform: translateX(var(--brand-splash-mark-shift)); animation: none !important; }
  .brand-splash__mark { opacity: 1; transform: none; animation: none !important; }
  .brand-splash__tagline { opacity: 1; transform: translate(var(--brand-splash-tagline-x), -50%); animation: none !important; }
  .brand-splash__motion,
  .brand-splash__hero { transition: none !important; }
}