:root {
  --entry-cluster-size: min(72vw, 76svh, 760px);
  --entry-character-width: clamp(190px, 20vw, 310px);
}

/* 独立入口：背景、旋转徽记、展开描边、文字、人物由低到高分层。 */
.entry-gate {
  isolation: isolate;
  background: #01050b;
}

.entry-gate__environment,
.entry-gate__emblem,
.entry-gate__burst,
.entry-gate__wordmark {
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
  user-select: none;
}

.entry-gate__environment {
  z-index: 0;
  inset: 0;
  overflow: hidden;
  opacity: 1;
  transform: none;
  transition: opacity 460ms ease;
}

.entry-gate__environment img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: none;
  transform: scale(1.002);
  user-select: none;
  -webkit-user-drag: none;
}

.entry-gate::before {
  z-index: 1;
  inset: 0;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(0, 4, 10, 0.02), rgba(0, 4, 10, 0.12));
  box-shadow: none;
  opacity: 1;
  transform: none;
  transition: opacity 420ms ease;
}

.entry-gate::after {
  display: none;
}

.entry-gate__emblem {
  z-index: 2;
  width: var(--entry-cluster-size);
  aspect-ratio: 1;
  opacity: 0.92;
  transform: translate3d(-50%, -50%, 0);
  animation:
    entry-emblem-arrive 1100ms cubic-bezier(0.16, 1, 0.3, 1) both,
    entry-emblem-orbit 26s 1100ms linear infinite;
  transform-origin: center;
}

.entry-gate__emblem img,
.entry-gate__burst img,
.entry-gate__wordmark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.entry-gate__emblem img {
  opacity: 1;
  transform: scale(1);
  transform-origin: center;
}

.entry-gate__burst {
  z-index: 3;
  width: max(120vw, 120svh);
  aspect-ratio: 1;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.018) rotate(-170deg);
  transform-origin: center;
  contain: layout paint;
}

.entry-gate__wordmark {
  z-index: 4;
  width: min(64vw, 760px);
  aspect-ratio: 2048 / 682;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.96);
  animation: entry-wordmark-arrive 920ms 220ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.entry-gate__button {
  z-index: 5;
  width: max(var(--entry-character-width), 220px);
  height: calc(var(--entry-character-width) * 1.28);
  color: rgba(236, 246, 251, 0.92);
  transform: translate3d(0, 1.5svh, 0);
  animation: entry-subject-arrive 1050ms 160ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.entry-gate__button::before {
  display: none;
}

.entry-gate__seal {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  filter: none;
  transform:
    perspective(900px)
    rotateX(calc(var(--entry-pointer-y) * -1.4deg))
    rotateY(calc(var(--entry-pointer-x) * 2deg));
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.entry-gate__portrait {
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: translate3d(
    calc(-50% + var(--entry-pointer-x) * 6px),
    calc(-50% + var(--entry-pointer-y) * 5px),
    0
  );
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1), filter 360ms ease;
}

.entry-gate__portrait::after {
  display: none;
}

.entry-gate__character,
.entry-gate__fallback {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  filter: saturate(0.88) contrast(1.02) brightness(1);
  transform: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.entry-gate__fallback {
  z-index: 1;
  opacity: 1;
  transition: opacity 180ms ease;
}

.entry-gate__character {
  z-index: 2;
  opacity: 0;
  transition: opacity 180ms ease;
}

.entry-gate.is-video-ready .entry-gate__fallback {
  opacity: 0;
}

.entry-gate.is-video-ready .entry-gate__character {
  opacity: 1;
}

.entry-gate__label {
  top: calc(100% - 24px);
  min-width: 104px;
  padding: 8px 14px;
  border: 1px solid rgba(171, 207, 227, 0.32);
  border-radius: 999px;
  color: rgba(236, 246, 251, 0.9);
  background: rgba(0, 7, 14, 0.56);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0;
  text-shadow: 0 5px 18px rgba(0, 0, 0, 0.7);
}

/* 无人物版本：让文字徽记本身成为清晰、完整的进入触发区域。 */
.entry-gate--mark-only .entry-gate__button {
  width: min(64vw, 760px);
  height: clamp(220px, 26vw, 320px);
  transform: none;
  animation: entry-mark-control-arrive 920ms 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.entry-gate--mark-only .entry-gate__label {
  top: calc(50% + clamp(68px, 8vw, 102px));
}

.entry-gate--mark-only .entry-gate__button:hover,
.entry-gate--mark-only .entry-gate__button:focus-visible {
  transform: scale(1.008);
}

.entry-gate--mark-only .entry-gate__button:focus-visible .entry-gate__label {
  outline: 2px solid rgba(186, 225, 244, 0.86);
  outline-offset: 5px;
}

.entry-gate__button:hover,
.entry-gate__button:focus-visible {
  transform: translate3d(0, calc(1.5svh - 5px), 0) scale(1.018);
}

.entry-gate__button:focus-visible {
  outline: none;
}

.entry-gate--mark-only .entry-gate__button:focus-visible {
  outline: 2px solid rgba(186, 225, 244, 0.86);
  outline-offset: 10px;
}

.entry-gate__button:focus-visible .entry-gate__portrait {
  outline: 2px solid rgba(186, 225, 244, 0.86);
  outline-offset: 8px;
}

.entry-gate__button:hover .entry-gate__portrait,
.entry-gate__button:focus-visible .entry-gate__portrait {
  transform:
    translate3d(
      calc(-50% + var(--entry-pointer-x) * 8px),
      calc(-50% + var(--entry-pointer-y) * 6px - 3px),
      0
    )
    scale(1.025);
}

.entry-gate__button:hover :is(.entry-gate__character, .entry-gate__fallback),
.entry-gate__button:focus-visible :is(.entry-gate__character, .entry-gate__fallback) {
  filter: saturate(0.96) contrast(1.03) brightness(1.02);
}

body.is-entering .entry-gate__environment,
body.is-entering .entry-gate::before {
  opacity: 0;
  transition-delay: 1080ms;
}

body.is-entering .entry-gate__emblem img {
  animation: entry-base-art-release 1460ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body.is-entering .entry-gate__wordmark {
  animation: entry-wordmark-release 1460ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body.is-entering .entry-gate__button {
  animation: entry-subject-release 1460ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body.is-entering .entry-gate--mark-only .entry-gate__button {
  animation: entry-mark-control-release 1460ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body.is-entering .entry-gate__burst {
  animation: entry-frame-expansion 1460ms cubic-bezier(0.77, 0, 0.18, 1) forwards;
  will-change: opacity, transform;
}

@keyframes entry-emblem-arrive {
  from { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.82) rotate(-8deg); }
  to { opacity: 0.92; transform: translate3d(-50%, -50%, 0) scale(1) rotate(0); }
}

@keyframes entry-emblem-orbit {
  from { transform: translate3d(-50%, -50%, 0) rotate(0); }
  to { transform: translate3d(-50%, -50%, 0) rotate(1turn); }
}

@keyframes entry-wordmark-arrive {
  from { opacity: 0; transform: translate3d(-50%, -47%, 0) scale(0.96); }
  to { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
}

@keyframes entry-subject-arrive {
  from { opacity: 0; transform: translate3d(0, calc(1.5svh + 18px), 0) scale(0.9); }
  to { opacity: 1; transform: translate3d(0, 1.5svh, 0) scale(1); }
}

@keyframes entry-mark-control-arrive {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes entry-mark-control-release {
  0%, 65% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.025); }
}

@keyframes entry-base-art-release {
  0% { opacity: 1; transform: scale(1); }
  64% { opacity: 0.78; transform: scale(0.92); }
  100% { opacity: 0; transform: scale(0.84); }
}

@keyframes entry-wordmark-release {
  0%, 65% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.04); }
}

@keyframes entry-subject-release {
  0%, 62% { opacity: 1; transform: translate3d(0, 1.5svh, 0) scale(1); }
  74% { opacity: 1; transform: translate3d(0, calc(1.5svh - 5px), 0) scale(1.025); }
  100% { opacity: 0; transform: translate3d(0, calc(1.5svh + 6px), 0) scale(0.96); }
}

@keyframes entry-frame-expansion {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0.018) rotate(-170deg);
  }
  9% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(0.065) rotate(-142deg);
  }
  70% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(0.96) rotate(-4deg);
  }
  84% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1.04) rotate(1deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(1.11) rotate(4deg);
  }
}

/* 新手臂仅由用户提供的手和手腕组成，因此以画布下沿自然截断，不补画手臂。 */
.hero-hand {
  right: clamp(-18px, 1.5vw, 28px);
  bottom: -20svh;
  width: min(61vw, 90svh, 980px);
}

@media (max-width: 820px) {
  :root {
    --entry-cluster-size: min(94vw, 69svh, 560px);
    --entry-character-width: clamp(176px, 52vw, 270px);
  }

  .entry-gate__wordmark {
    width: min(92vw, 640px);
  }

  .entry-gate__button {
    width: max(var(--entry-character-width), 190px);
  }

  .entry-gate__label {
    top: calc(100% - 18px);
    font-size: 13px;
  }

  .entry-gate--mark-only .entry-gate__button {
    width: min(92vw, 640px);
    height: clamp(178px, 46vw, 244px);
  }

  .entry-gate--mark-only .entry-gate__label {
    top: calc(50% + clamp(54px, 15vw, 76px));
  }

  .hero-hand {
    right: -24vw;
    bottom: -9svh;
    width: 122vw;
  }
}

@media (max-height: 650px) and (orientation: landscape) {
  :root {
    --entry-cluster-size: min(78svh, 660px);
    --entry-character-width: min(32svh, 230px);
  }

  .entry-gate__wordmark {
    width: min(62vw, 580px);
  }

  .entry-gate__button {
    height: min(43svh, 300px);
  }

  .entry-gate__label {
    top: calc(100% - 22px);
  }

  .entry-gate--mark-only .entry-gate__button {
    width: min(62vw, 580px);
    height: min(38svh, 220px);
  }

  .entry-gate--mark-only .entry-gate__label {
    top: calc(50% + 48px);
  }

  .hero-hand {
    bottom: -38svh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .entry-gate__emblem,
  .entry-gate__wordmark,
  .entry-gate__button,
  .entry-gate__burst,
  .entry-gate__environment,
  .entry-gate__emblem img,
  .entry-gate::before {
    animation: none !important;
    transition-duration: 1ms !important;
  }

  .entry-gate__emblem {
    opacity: 0.92;
    transform: translate3d(-50%, -50%, 0);
  }

  .entry-gate__wordmark {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0);
  }

  .entry-gate__button {
    opacity: 1;
  }

  body.is-entering .entry-gate__burst {
    animation: entry-frame-reduced 140ms ease-out forwards !important;
  }

  body.is-entering .entry-gate__emblem img,
  body.is-entering .entry-gate__wordmark,
  body.is-entering .entry-gate__button {
    opacity: 0;
  }

  .entry-gate__character {
    animation: none !important;
  }

  @keyframes entry-frame-reduced {
    0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.02); }
    45% { opacity: 0.9; transform: translate3d(-50%, -50%, 0) scale(1); }
    100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.04); }
  }
}