.loading-video,
.portal-transition-video {
  display: none !important;
}

.portal-video-transition[hidden] {
  display: none !important;
}

.portal-video-transition {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: block;
  visibility: hidden;
  overflow: hidden;
  opacity: 0;
  background: #02080d;
  pointer-events: none;
  transition: opacity 320ms cubic-bezier(.22, .8, .2, 1), visibility 320ms;
  isolation: isolate;
  contain: layout paint style;
}

html.portal-transition-running,
html.portal-transition-running body {
  overflow: hidden !important;
}

.portal-video-transition.is-priming {
  visibility: visible;
  opacity: 0;
}

.portal-video-transition.is-active {
  visibility: visible;
  opacity: 1;
}

.portal-video-transition.is-priming,
.portal-video-transition.is-active {
  pointer-events: auto;
}

.portal-transition-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  background: #02080d;
  transform: scale(1.002);
  transition: opacity 420ms ease, transform var(--portal-duration, 1.28s) cubic-bezier(.16, .78, .22, 1);
  backface-visibility: hidden;
  will-change: auto;
}

.portal-video-transition.is-active:not(.is-ended) .portal-transition-video {
  will-change: opacity, transform;
}

.portal-video-transition.is-playing .portal-transition-video {
  z-index: 7;
  transform: scale(1.018);
}

.portal-video-transition > .lunyu-preload {
  z-index: 6;
}

.portal-video-transition.is-playing > .lunyu-preload {
  z-index: 5;
  pointer-events: none;
}

.portal-video-transition.is-playing .portal-transition-grade {
  z-index: 8;
}

.portal-video-transition.is-playing .portal-transition-handoff {
  z-index: 9;
}

.portal-video-transition.is-playing .portal-transition-status,
.portal-video-transition.is-playing .portal-transition-progress {
  z-index: 10;
}

.portal-transition-grade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(circle at 50% 52%, transparent 18%, rgba(0, 8, 15, .08) 55%, rgba(0, 5, 10, .54) 100%),
    linear-gradient(180deg, rgba(1, 8, 14, .2), transparent 22%, transparent 72%, rgba(1, 7, 12, .44));
  box-shadow: inset 0 0 120px rgba(1, 8, 14, .38);
  pointer-events: none;
}

.portal-transition-handoff {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  background: #02080d var(--portal-handoff-image, none) center / cover no-repeat;
  will-change: auto;
  transform: translateZ(0);
  transition: opacity 180ms cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}

.portal-video-transition.is-active:not(.is-ended) .portal-transition-handoff {
  will-change: opacity;
}

.portal-video-transition.is-ended .portal-transition-video,
.portal-video-transition.is-ended .portal-transition-handoff {
  will-change: auto;
}

.portal-video-transition.is-handoff .portal-transition-handoff {
  opacity: 1;
}

.portal-transition-status {
  position: absolute;
  left: 50%;
  bottom: clamp(42px, 7vh, 82px);
  z-index: 4;
  width: min(520px, 78vw);
  color: #eef9fb;
  text-align: center;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .72);
  transform: translateX(-50%);
  transition: opacity 180ms ease, transform 260ms cubic-bezier(.22, .8, .2, 1);
}

.portal-transition-status small,
.portal-transition-status strong,
.portal-transition-status span {
  display: block;
}

.portal-transition-status small {
  color: #77e5ee;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
}

.portal-transition-status strong {
  margin-top: 9px;
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 600;
  letter-spacing: .05em;
}

.portal-transition-status span {
  margin-top: 7px;
  color: rgba(232, 246, 249, .72);
  font-size: 13px;
  letter-spacing: .08em;
}

.portal-video-transition.is-playing .portal-transition-status {
  transform: translateX(-50%) translateY(-3px);
}

.portal-video-transition.is-handoff .portal-transition-status {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}

.portal-transition-progress {
  position: absolute;
  left: 50%;
  bottom: clamp(23px, 4.5vh, 54px);
  z-index: 4;
  width: min(390px, 66vw);
  height: 2px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, .14);
  transform: translateX(-50%);
  transition: opacity 160ms ease;
}

.portal-transition-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #3dd4de, #f0c674 72%, #fff1c8);
  box-shadow: 0 0 18px rgba(91, 224, 231, .72);
  transform: scaleX(0);
  transform-origin: left center;
}

.portal-video-transition.is-playing .portal-transition-progress i {
  animation: huimaiPortalProgress var(--portal-duration, 1.28s) linear forwards;
}

.portal-video-transition[data-mode="full"].is-playing .portal-transition-progress i {
  animation: none;
  transform: scaleX(var(--portal-progress, 0));
  transition: transform 90ms linear;
}

.portal-video-transition.is-handoff .portal-transition-progress {
  opacity: 0;
}

.portal-video-transition.is-suspended .portal-transition-progress i {
  animation-play-state: paused;
}

@keyframes huimaiPortalProgress {
  to { transform: scaleX(1); }
}

@media (max-width: 700px) {
  .portal-transition-status { bottom: 58px; }
  .portal-transition-status span { font-size: 12px; }
  .portal-transition-progress { bottom: 35px; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-video-transition,
  .portal-transition-video,
  .portal-transition-handoff,
  .portal-transition-status,
  .portal-transition-progress { transition-duration: .01ms !important; }
  .portal-video-transition.is-playing .portal-transition-progress i { animation: none; transform: scaleX(1); }
  .portal-video-transition[data-mode="full"] .portal-transition-progress i {
    transition-duration: .01ms !important;
    transform: scaleX(1);
  }
}