@property --auth-submit-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.auth-p-emblem {
  position: absolute;
  top: 2%;
  left: 50%;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: clamp(10.5rem, min(38vw, 30dvh), 16rem);
  height: clamp(10.5rem, min(38vw, 30dvh), 16rem);
  max-height: 16rem;
  margin: 0;
  overflow: hidden;
  color: transparent;
  opacity: 0.98;
  transform: translateX(-50%);
}

.auth-p-emblem svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.auth-p-emblem use {
  fill: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth-p-emblem-led {
  fill: none;
  stroke: url("#auth-p-contour-gradient");
  stroke-width: 7;
  stroke-dasharray: 380 1551.5;
  filter: drop-shadow(0 0 8px rgba(93, 188, 255, 0.48));
}

.auth-p-emblem-led-b { stroke-dashoffset: -643.8; }
.auth-p-emblem-led-c { stroke-dashoffset: -1287.7; }

.auth-login-card:focus-within .auth-p-emblem {
  max-height: 0;
  margin-bottom: -0.78rem;
  opacity: 0;
  transform: translate(-50%, -1rem) scale(0.94);
}

@keyframes auth-p-led-travel {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -1931.5; }
}

@keyframes auth-submit-orbit {
  to { --auth-submit-angle: 360deg; }
}

@keyframes auth-submit-breathe {
  0%, 100% { background-position: 0% 50%; box-shadow: 0 0.7rem 1.9rem rgba(0, 0, 0, 0.46), inset 0 1px rgba(255, 255, 255, 0.08); }
  50% { background-position: 100% 50%; box-shadow: 0 0.9rem 2.3rem rgba(15, 82, 120, 0.3), inset 0 1px rgba(255, 255, 255, 0.12); }
}

@keyframes auth-portal-depth-breathe { 50% { opacity: 1; } }

.auth-login-card {
  gap: 0.56rem;
}

.auth-login-card .auth-kicker {
  margin-bottom: 0.78rem;
}

.auth-login-card input {
  min-height: 2.78rem;
  padding-block: 0.58rem;
}

#authForm:not(.auth-login-card) #authSubmit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 3.15rem;
  border-color: rgba(114, 157, 184, 0.42);
  background: linear-gradient(115deg, #050708 0%, #101a23 42%, #071018 65%, #020405 100%);
  background-size: 180% 100%;
  color: #f7fbff;
  box-shadow: 0 0.7rem 1.9rem rgba(0, 0, 0, 0.46), inset 0 1px rgba(255, 255, 255, 0.08);
  font-family: "Arial Black", "Segoe UI Black", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.82rem;
  font-stretch: expanded;
  font-weight: 900;
  letter-spacing: 0.115em;
  text-shadow: 0 1px 0 #000, 0 0 0.7rem rgba(112, 167, 255, 0.22);
  text-transform: uppercase;
}

#authForm:not(.auth-login-card) #authSubmit::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--auth-submit-angle), transparent 0deg 38deg, #f7fbff 58deg, #70a7ff 92deg, #55efff 126deg, transparent 146deg 218deg, #f7fbff 238deg, #70a7ff 272deg, #55efff 306deg, transparent 326deg 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

#authForm:not(.auth-login-card) #authSubmit:hover {
  border-color: rgba(129, 205, 255, 0.62);
  background: linear-gradient(115deg, #070a0c, #132536 48%, #05090d);
}

.auth-portal-pending #authForm:not(.auth-login-card) #authSubmit,
.auth-portal-pending #authForm:not(.auth-login-card) #authSubmit::before { animation-play-state: paused; }

@media (prefers-reduced-motion: no-preference) {
  .auth-p-emblem {
    transition: max-height 280ms ease, margin 280ms ease, opacity 180ms ease,
      transform 280ms ease;
  }

  .auth-p-emblem-led { animation: auth-p-led-travel 21s linear infinite; }
  .auth-p-emblem-led-b { animation-delay: -7s; }
  .auth-p-emblem-led-c { animation-delay: -14s; }
  .auth-login-card::after { animation: auth-portal-depth-breathe 9.5s ease-in-out infinite; }
  #authForm:not(.auth-login-card) #authSubmit { animation: auth-submit-breathe 6.8s ease-in-out infinite; }
  #authForm:not(.auth-login-card) #authSubmit::before { animation: auth-submit-orbit 13s linear infinite; }
}

@media (max-height: 42.5rem) {
  .auth-p-emblem {
    max-height: 0;
    margin-bottom: -0.78rem;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-p-emblem { transition: none; }
  .auth-p-emblem-led { animation: none; filter: none; }
  .auth-login-card::after { animation: none; }
  #authForm:not(.auth-login-card) #authSubmit,
  #authForm:not(.auth-login-card) #authSubmit::before { animation: none; }
}

@media (prefers-contrast: more) {
  .auth-p-emblem-led { stroke-width: 9; filter: none; }
  .auth-login-card input,
  #authForm:not(.auth-login-card) #authSubmit { border-color: #c5e9ff; }
}

@media (forced-colors: active) {
  .auth-p-emblem { display: none; }
  #authForm:not(.auth-login-card) #authSubmit { border-color: ButtonText; background: ButtonFace; color: ButtonText; box-shadow: none; text-shadow: none; }
  #authForm:not(.auth-login-card) #authSubmit::before { display: none; }
}
/* Auth phases fill the letters; the waiting control has no frame or LED. */
.auth-loading-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.auth-gate.auth-portal-pending #authForm:not(.auth-login-card) #authSubmit {
  width: max-content;
  min-width: 0;
  justify-self: center;
  padding-inline: 0;
  border: 0;
  border-image: none;
  background: linear-gradient(90deg, #96e5ff var(--auth-load-fill, 8%), #71828c var(--auth-load-fill, 8%));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  box-shadow: none;
  text-shadow: none;
  transition: none;
  opacity: 1;
  animation: auth-load-breathe 2.8s ease-in-out infinite;
}
.auth-gate.auth-portal-pending #authForm:not(.auth-login-card) #authSubmit::before,
.auth-gate.auth-portal-pending #authForm:not(.auth-login-card) #authSubmit::after { display: none; }
@keyframes auth-load-breathe { 50% { opacity: 0.68; } }
@media (prefers-reduced-motion: reduce) {
  .auth-gate.auth-portal-pending #authForm:not(.auth-login-card) #authSubmit { animation: none; }
}
@media (forced-colors: active) {
  .auth-gate.auth-portal-pending #authForm:not(.auth-login-card) #authSubmit {
    background: none; color: ButtonText; -webkit-text-fill-color: ButtonText;
  }
}