/* ------------------------------------------------------------------
   Login screen monogram intro.
   The monogram draws stroke-by-stroke centred on screen, settles above the
   form, then the form fades in.

   The reveal + monogram are hidden BY DEFAULT (not via a JS-added class) so the
   form never flashes before the script runs. JS reveals them; for no-JS or
   reduced-motion users a fallback below shows everything immediately.
------------------------------------------------------------------ */

.wm-login-screen {
  max-width: 420px;
  margin: 0 auto;
}

.wm-monogram {
  width: 150px;
  max-width: 50vw;
  margin: 0 auto 22px;
  display: block;
  opacity: 0; /* revealed by JS when the draw starts */
  will-change: transform;
}
.wm-monogram__svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.wm-monogram__svg path,
.wm-monogram__svg circle {
  stroke: var(--w-text-primary, #3F4638);
  fill: none;
}

.wm-login-reveal {
  opacity: 0; /* fades in after the monogram settles */
  transition: opacity 0.7s ease;
}

/* No-JS / reduced-motion fallback: show everything, skip the animation. */
@media (prefers-reduced-motion: reduce) {
  .wm-monogram,
  .wm-login-reveal { opacity: 1 !important; }
}