.longer-intro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #f7fbff;
  background: #030405;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  pointer-events: none;
  animation: longer-intro-fade 4.1s ease forwards;
}

.longer-intro * {
  box-sizing: border-box;
}

.longer-intro-belts {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}

.longer-intro-belts span {
  border-right: 1px solid rgba(255, 255, 255, 0.045);
  background: #05080c;
  transform: translateY(0);
  animation: longer-belt-rise 1.05s cubic-bezier(0.68, 0, 0.2, 1) forwards;
  animation-delay: var(--belt-delay, 0s);
}

.longer-intro-panel {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(720px, calc(100vw - 42px));
  justify-items: center;
  gap: 18px;
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  animation: longer-panel-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.42s forwards;
}

.longer-intro-logo-frame {
  position: relative;
  display: grid;
  width: min(620px, calc(100vw - 80px));
  height: 156px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(152, 172, 210, 0.28);
  border-radius: 8px;
  background: rgba(4, 8, 13, 0.82);
  box-shadow: inset 0 0 40px rgba(47, 115, 255, 0.1), 0 30px 90px rgba(0, 0, 0, 0.42);
}

.longer-intro-logo-frame picture {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

.longer-intro-logo-frame::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  background: linear-gradient(100deg, transparent 0%, rgba(92, 142, 255, 0.22) 42%, rgba(255, 255, 255, 0.58) 50%, rgba(92, 142, 255, 0.2) 58%, transparent 100%);
  transform: translateX(-125%);
  animation: longer-logo-scan 1.1s ease 1.25s forwards;
}

.longer-intro-logo-frame img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 76%;
  max-width: 520px;
  height: auto;
  max-height: 74%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 18px rgba(47, 115, 255, 0.34));
  animation: longer-logo-reveal 1.05s cubic-bezier(0.2, 0.8, 0.2, 1) 0.78s both;
}

.longer-intro-corners {
  position: absolute;
  inset: -17px;
  pointer-events: none;
}

.longer-intro-corners i,
.longer-intro-plus {
  position: absolute;
  width: 13px;
  height: 13px;
}

.longer-intro-corners i::before,
.longer-intro-corners i::after,
.longer-intro-plus::before,
.longer-intro-plus::after {
  position: absolute;
  content: "";
  background: rgba(134, 154, 190, 0.75);
}

.longer-intro-corners i::before,
.longer-intro-plus::before {
  top: 6px;
  left: 0;
  width: 13px;
  height: 1px;
}

.longer-intro-corners i::after,
.longer-intro-plus::after {
  top: 0;
  left: 6px;
  width: 1px;
  height: 13px;
}

.longer-intro-corners i:nth-child(1) { top: 0; left: 0; }
.longer-intro-corners i:nth-child(2) { top: 0; right: 0; }
.longer-intro-corners i:nth-child(3) { right: 0; bottom: 0; }
.longer-intro-corners i:nth-child(4) { bottom: 0; left: 0; }

.longer-intro-plus {
  z-index: 1;
  opacity: 0;
  animation: longer-plus-float 2.4s ease forwards;
}

.longer-plus-a { top: 18%; left: 23%; animation-delay: 0.6s; }
.longer-plus-b { top: 64%; right: 18%; animation-delay: 0.9s; }
.longer-plus-c { right: 33%; bottom: 18%; animation-delay: 1.2s; }

.longer-intro-tagline {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(224, 234, 255, 0.74);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
}

.longer-intro-tagline i {
  width: 4px;
  height: 4px;
  background: #ff6a24;
}

.longer-intro-counter {
  min-width: 68px;
  color: rgba(153, 174, 215, 0.78);
  font-family: "Courier New", monospace;
  font-size: 15px;
  letter-spacing: 0;
  text-align: center;
}

@keyframes longer-belt-rise {
  to { transform: translateY(-105%); }
}

@keyframes longer-panel-in {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes longer-logo-reveal {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translate(-50%, calc(-50% + 9px));
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate(-50%, -50%);
  }
}

@keyframes longer-logo-scan {
  to { transform: translateX(125%); }
}

@keyframes longer-plus-float {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) rotate(0deg);
  }
  35% { opacity: 0.8; }
  100% {
    opacity: 0;
    transform: translate3d(18px, -24px, 0) rotate(90deg);
  }
}

@keyframes longer-intro-fade {
  0%, 86% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@media (max-width: 860px) {
  .longer-intro-logo-frame {
    height: 122px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .longer-intro,
  .longer-intro-belts span,
  .longer-intro-panel,
  .longer-intro-logo-frame::before,
  .longer-intro-logo-frame img,
  .longer-intro-plus {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
}