body.mbb-river-login-active {
  min-height: 100vh;
  background: #02040a;
}

body.mbb-river-login-active #app {
  position: relative;
  z-index: 2;
  min-height: 100vh;
}

body.mbb-river-login-active .auth > .card {
  position: relative;
  z-index: 3;
  background: rgba(18, 20, 26, 0.88);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
  backdrop-filter: blur(12px) saturate(1.08);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.56), 0 0 44px rgba(91, 112, 255, 0.12);
}

#mbb-river-awakening {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #02040a;
  opacity: 0;
  isolation: isolate;
}

#mbb-river-awakening.is-visible {
  animation: mbb-river-reveal 700ms ease-out both;
}

#mbb-river-awakening video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.95;
  filter: brightness(0.76) saturate(1.16) contrast(1.05);
  transform: scale(1.05);
  animation: mbb-river-drift 8s ease-in-out infinite alternate;
  will-change: transform;
}

.mbb-river-vignette,
.mbb-river-charge,
.mbb-river-flash {
  position: absolute;
  inset: 0;
}

.mbb-river-vignette {
  z-index: 2;
  background:
    radial-gradient(circle at 50% 45%, transparent 20%, rgba(2, 4, 10, 0.12) 58%, rgba(2, 4, 10, 0.78) 115%),
    linear-gradient(180deg, rgba(1, 3, 8, 0.1), rgba(1, 3, 8, 0.3));
}

.mbb-river-charge {
  z-index: 3;
  opacity: 0;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 45% 43%, rgba(233, 242, 255, 0.94), rgba(110, 128, 255, 0.44) 18%, transparent 48%),
    radial-gradient(circle at 58% 48%, rgba(83, 255, 213, 0.38), transparent 38%);
  animation: mbb-river-charge 8s ease-in-out infinite;
}

.mbb-river-flash {
  z-index: 5;
  opacity: 0;
  mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.92), rgba(138, 160, 255, 0.32) 26%, transparent 62%);
  animation: mbb-river-flash 8s ease-out infinite;
}

.mbb-river-bolt {
  position: absolute;
  z-index: 4;
  top: -12%;
  width: clamp(9px, 1.05vw, 16px);
  height: 88%;
  opacity: 0;
  background: linear-gradient(180deg, #ffffff 0 9%, #cbd8ff 13%, #8875ff 63%, transparent 100%);
  clip-path: polygon(45% 0, 69% 0, 53% 24%, 80% 24%, 43% 55%, 62% 55%, 17% 100%, 34% 64%, 9% 64%, 38% 34%, 20% 34%);
  filter: drop-shadow(0 0 5px #ffffff) drop-shadow(0 0 14px #9db2ff) drop-shadow(0 0 32px #7057ff);
  animation: mbb-river-bolt 8s ease-out infinite;
}

.mbb-river-bolt-one {
  left: 13%;
  transform: rotate(-8deg) scale(0.92);
}

.mbb-river-bolt-two {
  left: 68%;
  transform: rotate(7deg);
  animation-delay: 120ms;
}

.mbb-river-bolt-three {
  left: 86%;
  transform: rotate(-4deg) scale(0.78);
  animation-delay: 260ms;
}

@keyframes mbb-river-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mbb-river-drift {
  0% { transform: scale(1.05) translate3d(0, 0, 0); }
  100% { transform: scale(1.085) translate3d(0, -0.45%, 0); }
}

@keyframes mbb-river-charge {
  0%, 3%, 8%, 17%, 23%, 49%, 56%, 100% { opacity: 0.05; }
  4.3%, 5.5%, 18.5%, 20%, 51%, 53% { opacity: 0.72; }
  6.2%, 21%, 54% { opacity: 0.24; }
}

@keyframes mbb-river-flash {
  0%, 4%, 6.4%, 18%, 21.5%, 50%, 54.5%, 100% { opacity: 0; }
  4.55%, 5.05%, 18.7%, 19.15%, 50.8%, 51.2% { opacity: 0.68; }
  5.45%, 19.7%, 52% { opacity: 0.16; }
}

@keyframes mbb-river-bolt {
  0%, 4%, 6.5%, 18%, 21.5%, 50%, 54%, 100% { opacity: 0; }
  4.45%, 5.15%, 18.65%, 19.4%, 50.7%, 51.55% { opacity: 0.96; }
  5.55%, 20%, 52.25% { opacity: 0.18; }
}

@media (max-width: 720px) {
  #mbb-river-awakening video {
    width: 118%;
    left: -9%;
    object-position: 48% center;
    filter: brightness(0.68) saturate(1.14) contrast(1.06);
  }

  body.mbb-river-login-active .auth > .card {
    background: rgba(18, 20, 26, 0.9);
    -webkit-backdrop-filter: blur(10px) saturate(1.06);
    backdrop-filter: blur(10px) saturate(1.06);
  }

  .mbb-river-bolt-one { left: 8%; }
  .mbb-river-bolt-two { left: 72%; }
  .mbb-river-bolt-three { left: 91%; }
}

@media (prefers-reduced-motion: reduce) {
  #mbb-river-awakening,
  #mbb-river-awakening video,
  .mbb-river-charge,
  .mbb-river-flash,
  .mbb-river-bolt {
    animation: none !important;
  }

  #mbb-river-awakening { opacity: 1; }
  #mbb-river-awakening video { transform: scale(1.05); }
  .mbb-river-charge,
  .mbb-river-flash,
  .mbb-river-bolt { opacity: 0; }
}

/* River stays visibly still until the login form is submitted. */
#mbb-river-awakening video,
#mbb-river-awakening .mbb-river-charge,
#mbb-river-awakening .mbb-river-flash,
#mbb-river-awakening .mbb-river-bolt {
  animation: none;
}

#mbb-river-awakening.is-awakening video {
  animation: mbb-river-drift 8s ease-in-out infinite alternate;
}
#mbb-river-awakening.is-awakening .mbb-river-charge {
  animation: mbb-river-charge 8s ease-in-out infinite;
}
#mbb-river-awakening.is-awakening .mbb-river-flash {
  animation: mbb-river-flash 8s ease-out infinite;
}
#mbb-river-awakening.is-awakening .mbb-river-bolt {
  animation: mbb-river-bolt 8s ease-out infinite;
}
#mbb-river-awakening.is-awakening .mbb-river-bolt-two { animation-delay: 120ms; }
#mbb-river-awakening.is-awakening .mbb-river-bolt-three { animation-delay: 260ms; }

.mbb-river-progress {
  margin-top: 18px;
  text-align: left;
}
.mbb-river-progress-label {
  margin-bottom: 8px;
  color: rgba(235, 240, 255, 0.84);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.mbb-river-progress-track {
  height: 7px;
  overflow: hidden;
  border: 1px solid rgba(163, 177, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.34);
}
.mbb-river-progress-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(109, 126, 255, 0.76), rgba(126, 246, 218, 0.92), rgba(229, 235, 255, 0.96));
  box-shadow: 0 0 14px rgba(117, 151, 255, 0.42);
  transition: width 520ms cubic-bezier(0.22, 1, 0.36, 1);
}