#intro {
  position: fixed; inset: 0; z-index: 1000; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #0b1220; color: #fff;
  animation: intro-out .5s ease 2s forwards;
}
#intro .mark {
  width: 76px; height: 76px; border-radius: 18px; background: #fff;
  display: grid; place-items: center; padding: 10px; box-sizing: border-box;
  animation: intro-rise .8s cubic-bezier(.22, .61, .36, 1) both;
}
#intro .mark img { width: 100%; height: auto; display: block; }
#intro .name {
  margin-top: 22px; font-size: clamp(20px, 4.5vw, 28px); font-weight: 600; letter-spacing: .04em; text-align: center;
  animation: intro-rise .8s .15s both;
}
#intro .sub {
  margin-top: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .24em;
  opacity: .7; animation: intro-rise .8s .3s both; text-align: center;
}
#intro::after {
  content: ""; position: absolute; bottom: 18vh; left: 50%; width: 120px; height: 2px; margin-left: -60px;
  background: #2fa89b; transform: scaleX(0); transform-origin: left center;
  animation: intro-line 1.2s .4s cubic-bezier(.22, .61, .36, 1) forwards;
}
@keyframes intro-rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes intro-line { to { transform: scaleX(1); } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  #intro { animation: intro-out .3s ease .6s forwards; }
  #intro .mark, #intro .name, #intro .sub { animation: none; }
  #intro::after { animation: none; transform: scaleX(1); }
}