/* NSCC Beacon — sign-in backgrounds
   dev.png / qa.png / demo.png live next to this file.
   The auth gate carries one env class ("env-dev" | "env-qa" | "env-demo" | "env-prod")
   alongside .signin — set in assets/nscc-sso.js from window.NSCC.envFromHost().
*/

.signin {
  min-height: 100vh;
  background-color: #0b1522;
  background-repeat: repeat, no-repeat, no-repeat;
  background-attachment: fixed;
  /* the two gradients are shared; the env class supplies the tile */
  background-image:
    none,
    radial-gradient(58% 62% at 50% 50%, rgba(7, 13, 22, .9), rgba(7, 13, 22, 0) 100%),
    radial-gradient(120% 110% at 18% 0%, #16273c, #0b1522 62%, #070d16);
}

.signin.env-dev {
  background-image:
    url(dev.png),
    radial-gradient(58% 62% at 50% 50%, rgba(7, 13, 22, .9), rgba(7, 13, 22, 0) 100%),
    radial-gradient(120% 110% at 18% 0%, #16273c, #0b1522 62%, #070d16);
}

.signin.env-qa {
  background-image:
    url(qa.png),
    radial-gradient(58% 62% at 50% 50%, rgba(7, 13, 22, .9), rgba(7, 13, 22, 0) 100%),
    radial-gradient(120% 110% at 18% 0%, #16273c, #0b1522 62%, #070d16);
}

.signin.env-demo {
  background-image:
    url(demo.png),
    radial-gradient(58% 62% at 50% 50%, rgba(7, 13, 22, .9), rgba(7, 13, 22, 0) 100%),
    radial-gradient(120% 110% at 18% 0%, #16273c, #0b1522 62%, #070d16);
}

/* Production — no environment word. Currently the plain graduated ground;
   swap in url(prod.png) here once the branded tile is settled. */
.signin.env-prod {
  background-image:
    none,
    radial-gradient(58% 62% at 50% 50%, rgba(7, 13, 22, .9), rgba(7, 13, 22, 0) 100%),
    radial-gradient(120% 110% at 18% 0%, #16273c, #0b1522 62%, #070d16);
}

/* OAuth return: hide the sign-in card so only the env background is
   visible until Welcome opens. Without this, the auth gate flashes for a
   frame between IdP return and Welcome (user chooses an email → briefly
   sees the original sign-in screen → Welcome). The center label is set
   from data-completing-label on the gate element; a spinner sits above
   it so the state reads as "in progress", not "the sign-in screen
   again". */
.nscc-auth-gate--completing .nscc-auth-card { display: none !important; }
.nscc-auth-gate--completing::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(50% - 3.2rem);
  transform: translate(-50%, -50%);
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 3px solid rgba(226, 232, 240, 0.20);
  border-top-color: #f8fafc;
  animation: nscc-auth-spin 900ms linear infinite;
  pointer-events: none;
}
.nscc-auth-gate--completing::after {
  content: attr(data-completing-label);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #f8fafc;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
@keyframes nscc-auth-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Boot splash sits above the gate during OAuth return so the gate never
   flashes. Dark solid ground + a spinner + clear "Signing you in" copy so
   the return state does NOT read as "the sign-in screen loading again". */
#nscc-auth-boot-splash.signin {
  background-color: #050b14;
  background-image: none;
}
#nscc-auth-boot-splash.signin .nscc-auth-boot-splash-card {
  background: rgba(11, 21, 34, 0.85);
  color: #f8fafc;
  padding: 1.75rem 2.25rem;
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.18);
  text-align: center;
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}
#nscc-auth-boot-splash.signin .nscc-auth-boot-splash-spinner {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 3px solid rgba(226, 232, 240, 0.22);
  border-top-color: #f8fafc;
  animation: nscc-auth-spin-splash 900ms linear infinite;
}
@keyframes nscc-auth-spin-splash {
  to { transform: rotate(360deg); }
}