@import url("tokens.css");

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100vh;
  color: var(--bmb-login-blue-bright-98);
  background:
    radial-gradient(
      circle at 18% 15%,
      var(--bmb-sky-line-16-2),
      transparent 30%
    ),
    radial-gradient(
      circle at 78% 80%,
      var(--bmb-sky-wash-8),
      transparent 32%
    ),
    var(--bmb-surface-navy);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

button,
input {
  font: inherit;
}

.login-page {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(420px, 0.75fr);
  min-height: 100vh;
  overflow: hidden;
}

.login-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      115deg,
      var(--bmb-glass-015),
      transparent 40%
    );
}

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 42px 7vw 54px;
  overflow: hidden;
}

.brand {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--bmb-login-blue-tint-75);
}

.brand > div {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.brand strong {
  color: var(--bmb---bmb-surface);
  font-size: 29px;
  letter-spacing: -1.5px;
}

.brand span {
  font-size: 16px;
}

.brand-mark,
.login-logo-mark {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  transform: rotate(45deg);
  background:
    linear-gradient(
      135deg,
      var(--bmb-login-blue-bright-66),
      var(--bmb-login-sky-57)
    );
  box-shadow:
    0 0 28px var(--bmb-sky-line-28-3);
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(680px, 100%);
  margin: auto 0;
  padding: 70px 0;
}

.eyebrow {
  margin: 0 0 22px;
  color: var(--bmb-login-sky-bright-72);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
}

.hero h1 {
  margin: 0;
  max-width: 650px;
  font-size: clamp(48px, 5.4vw, 78px);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.hero h1 span {
  display: block;
  margin-top: 10px;
  color: var(--bmb-login-sky-60);
}

.hero-text {
  max-width: 600px;
  margin: 30px 0 0;
  color: var(--bmb-login-blue-tint-75);
  font-size: 17px;
  line-height: 1.75;
}

.features {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 38px;
  margin-top: 44px;
}

.feature {
  display: flex;
  align-items: center;
  gap: 12px;
}

.feature-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--bmb-sky-line-18);
  border-radius: 14px;
  color: var(--bmb-login-sky-bright-67);
  background: var(--bmb-glass-navy-48);
  font-size: 10px;
  font-weight: 800;
}

.feature strong,
.feature small {
  display: block;
}

.feature strong {
  margin-bottom: 3px;
  font-size: 13px;
}

.feature small {
  color: var(--bmb-login-blue-55);
  font-size: 11px;
}

.hero-wave {
  position: absolute;
  left: -8%;
  bottom: -120px;
  width: 78%;
  height: 260px;
  border-top:
    1px solid var(--bmb-sky-glow-55-2);
  border-radius: 50%;
  transform: rotate(8deg);
  box-shadow:
    0 -18px 90px var(--bmb-sky-wash-8-2);
}

.login-side {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 44px 6vw 44px 3vw;
}

.login-card {
  width: min(100%, 510px);
  padding: 44px;
  border:
    1px solid var(--bmb-sky-line-28-4);
  border-radius: 26px;
  background:
    linear-gradient(
      160deg,
      var(--bmb-glass-navy-94-3),
      var(--bmb-glass-navy-94-4)
    );
  box-shadow:
    0 28px 80px var(--bmb-scrim-34),
    inset 0 1px var(--bmb-glass-035);
  backdrop-filter: blur(14px);
}

.login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}

.login-logo-mark {
  width: 42px;
  height: 42px;
  border-radius: 11px;
}

.login-header {
  margin-bottom: 34px;
  text-align: center;
}

.login-header h2 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.035em;
}

.login-header p {
  margin: 9px 0 0;
  color: var(--bmb-login-blue-59);
  font-size: 14px;
}

.field {
  margin-bottom: 21px;
}

.field label {
  display: block;
  margin: 0 0 9px;
  color: var(--bmb-login-sky-tint-90);
  font-size: 13px;
  font-weight: 650;
}

.field input {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  border:
    1px solid var(--bmb-sky-line-24);
  border-radius: 12px;
  outline: none;
  color: var(--bmb-login-blue-bright-98-2);
  background: var(--bmb-glass-navy-62);
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    background 140ms ease;
}

.field input::placeholder {
  color: var(--bmb-login-sky-50);
}

.field input:focus {
  border-color: var(--bmb-login-sky-61);
  background: var(--bmb-glass-navy-82-2);
  box-shadow:
    0 0 0 3px var(--bmb-sky-wash-11);
}

button[type="submit"] {
  width: 100%;
  min-height: 54px;
  margin-top: 5px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  color: var(--bmb---bmb-surface);
  background:
    linear-gradient(
      100deg,
      var(--bmb-primary-blue),
      var(--bmb-primary-sky)
    );
  box-shadow:
    0 12px 32px var(--bmb-sky-line-20-2);
  font-weight: 750;
  transition:
    transform 120ms ease,
    filter 120ms ease;
}

button[type="submit"]:hover {
  filter: brightness(1.07);
}

button[type="submit"]:active {
  transform: translateY(1px);
}

.message {
  min-height: 21px;
  margin-top: 14px;
  color: var(--bmb-login-danger-bright-78);
  font-size: 12px;
  text-align: center;
}

.login-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 22px;
  padding-top: 21px;
  border-top:
    1px solid var(--bmb-glass-065);
  color: var(--bmb-login-blue-53);
  font-size: 11px;
}

.secure-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bmb-login-success-54);
  box-shadow:
    0 0 12px var(--bmb-success-line-45);
}

@media (max-width: 980px) {
  .login-page {
    grid-template-columns: 1fr;
  }

  .hero {
    display: none;
  }

  .login-side {
    min-height: 100vh;
    padding: 24px;
  }
}

@media (max-width: 520px) {
  .login-card {
    padding: 32px 22px;
    border-radius: 20px;
  }

  .login-header h2 {
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}


/* BMB_LOGIN_NETWORK_BG_V1 */

.login-page {
  isolation: isolate;
  background:
    radial-gradient(
      circle at 8% 8%,
      var(--bmb-sky-line-20-3),
      transparent 28%
    ),
    radial-gradient(
      circle at 90% 12%,
      var(--bmb-pink-line-16),
      transparent 30%
    ),
    radial-gradient(
      circle at 70% 88%,
      var(--bmb-blue-wash-10-2),
      transparent 30%
    ),
    linear-gradient(
      118deg,
      var(--bmb-login-blue-shade-11) 0%,
      var(--bmb-login-indigo-shade-12) 48%,
      var(--bmb-login-violet-shade-11) 100%
    );
}

.login-page::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: 0.52;

  background-image:
    linear-gradient(
      31deg,
      transparent 49.65%,
      var(--bmb-sky-line-18-2) 50%,
      transparent 50.35%
    ),
    linear-gradient(
      149deg,
      transparent 49.65%,
      var(--bmb-pink-wash-15) 50%,
      transparent 50.35%
    ),
    radial-gradient(
      circle,
      var(--bmb-sky-glow-92) 0 1px,
      transparent 1.6px
    ),
    radial-gradient(
      circle,
      var(--bmb-pink-glow-80) 0 1px,
      transparent 1.6px
    );

  background-size:
    190px 130px,
    190px 130px,
    190px 130px,
    250px 170px;

  background-position:
    0 0,
    0 0,
    32px 36px,
    125px 22px;
}

.login-page::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 0% 75%,
      var(--bmb-pink-wash-13),
      transparent 24%
    ),
    radial-gradient(
      circle at 100% 72%,
      var(--bmb-sky-wash-14-3),
      transparent 28%
    );
}

.hero,
.login-side {
  position: relative;
  z-index: 2;
}

.hero {
  background: transparent;
}

.hero-content,
.hero-visual,
.hero-wave {
  display: none !important;
}

.login-card {
  background:
    linear-gradient(
      150deg,
      var(--bmb-glass-navy-94-5),
      var(--bmb-glass-navy-96-4)
    );

  border-color:
    var(--bmb-blue-line-30-2);

  box-shadow:
    0 32px 90px var(--bmb-scrim-42),
    0 0 70px var(--bmb-blue-wash-7-3);
}