/* Sign-in page hero (#4227): scene canvas, logo, sign-in button, title. Tokens and the panel itself live
   in style.css; the values are the design the owner accepted (Ant_OS #4226, motion.md there). */

@font-face {
  font-family: "Ant Logo";
  src: url("next-sphere-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Layout values of this page only; colours stay in :root of style.css.
   --boot-* place the app's loading bar (`.boot-bar`), which this page shows after sign-in. */
.auth-body {
  --page-pad: 48px;
  --t-display: clamp(60px, 20vw, 110px);
  --logo: "Ant Logo", var(--font);
  --boot-x: 50%;
  --boot-y: 50%;
  --boot-r: 88px;
  -webkit-text-size-adjust: 100%;
}

/* The app's bare `canvas` rule (style.css) offers dragging; nothing here is dragged. */
.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: default;
}

.top {
  position: fixed;
  z-index: 3;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px var(--page-pad);
  pointer-events: none;
  transition: opacity var(--move) var(--ease-out);
}
.top > * { pointer-events: auto; }
.brand {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  font: 700 16px/1 var(--logo);
  letter-spacing: .04em;
}
.brand img { width: 22px; height: 22px; display: block; }
/* Shape is the app's `.btn`, the fill is shared with the panel's submit (style.css); only its width is its own. */
.login-btn { padding: 0 20px; white-space: nowrap; }

.door {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
  display: grid;
  align-items: end;
  padding: 96px var(--page-pad) calc(28px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.hero-title {
  margin: 0;
  justify-self: start;
  font: 700 var(--t-display)/.84 var(--display);
  letter-spacing: .01em;
  text-transform: uppercase;
  text-wrap: balance;
  pointer-events: auto;
  transition: opacity var(--move) var(--ease-out);
}
.t-a { color: transparent; -webkit-text-stroke: .02em var(--fg); }
/* The full stop is drawn as a star; the character stays in the text for a screen reader. */
.hero-star {
  display: inline-block;
  width: .17em;
  height: .17em;
  margin-left: .05em;
  overflow: hidden;
  border-radius: 50%;
  background: var(--fg);
  color: transparent;
}

/* After sign-in the page turns into the app's loading frame: the orb and the bar under it.
   The bar is the app's own `.boot-bar`; here it is only fixed to the window and hidden until then. */
.login-bar {
  position: fixed;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--move) var(--ease-out) .2s, visibility 0s linear 0s;
}

body[data-view="entered"] .top,
body[data-view="entered"] .hero-title {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s var(--ease-in), visibility 0s linear .16s;
}
body[data-view="entered"] .login-bar { opacity: 1; visibility: visible; }

@media (min-width: 720px) {
  .auth-body { --t-display: calc((100vw - 2 * var(--page-pad)) / 8.5); }
  .hero-title { white-space: nowrap; }
}

@media (max-width: 1100px) {
  .auth-body { --page-pad: 32px; }
}

@media (max-width: 719.98px) {
  .auth-body { --page-pad: 24px; }
  .top { padding-block: 16px; }
}