/* Sign-in picture. Only the sign-in page changes; nothing inside the app.
   DEFAULT (shipped): a round avatar above "Sign in", centred with the card, drawn in web/signin-avatar.svg (original
     artwork: a generic bat on a night-blue disc).
   PICTURE (Bao's own file): put the image at web/signin-picture.webp and add data-picture to the link that loads this
     sheet: <link rel="stylesheet" href="bat.css" data-picture>. Desktop and wide: the picture stands large in the night
     panel on the left (where Sam's orb was), its edges faded into the panel, a soft light behind it. Phone: a round
     crop of the face and shoulders above "Sign in". A cut-out (transparent background) works best; see BAT.md.
   Load after styles.css. Remove the link and the page is as before. Reduced motion: no fade. */
:root {
  --signin-avatar: url("signin-avatar.svg");
  --signin-avatar-pos: center;
  --signin-avatar-fit: cover;
  --signin-avatar-size: 88px;
  --signin-avatar-ring: rgba(17, 19, 26, .08);
  --signin-avatar-shadow: 0 12px 30px -10px rgba(10, 16, 34, .45), 0 2px 6px rgba(10, 16, 34, .14);
}
:root[data-theme="dark"] {
  --signin-avatar-ring: rgba(255, 255, 255, .1);
  --signin-avatar-shadow: 0 12px 30px -10px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .35);
}
/* picture mode: the avatar becomes a crop of the picture (face and shoulders, from the top) */
:root:has(link[href="bat.css"][data-picture]) {
  --signin-avatar: url("signin-picture.webp");
  --signin-avatar-pos: 66% 3%;
  --signin-avatar-fit: 165% auto;
}

/* ---------- the avatar above "Sign in" ---------- */
.lg-box::before {
  content: "";
  display: block;
  width: var(--signin-avatar-size);
  height: var(--signin-avatar-size);
  margin: 0 auto 28px;
  border-radius: 50%;
  background: var(--signin-avatar) var(--signin-avatar-pos) / var(--signin-avatar-fit) no-repeat,
    radial-gradient(circle at 50% 34%, #24345c 0%, #121a30 55%, #070a13 100%);
  box-shadow: 0 0 0 1px var(--signin-avatar-ring), var(--signin-avatar-shadow);
}
body[data-view="signin"] .lg-box::before { animation: signinPicIn .7s cubic-bezier(.2, .8, .2, 1) .08s both; }
@media (max-width: 650px) {
  :root { --signin-avatar-size: 76px; }
  .lg-box::before { margin-bottom: 20px; }
}

/* ---------- picture mode, desktop and wide: the picture large in the night panel ---------- */
@media (min-width: 651px) {
  :root:has(link[href="bat.css"][data-picture]) .lg-box::before { display: none; }
  :root:has(link[href="bat.css"][data-picture]) .lg-orbital { display: none; }
  :root:has(link[href="bat.css"][data-picture]) .lg-art > * { position: relative; z-index: 1; }
  /* the picture: below the words, anchored to the panel's bottom right, faded at the bottom and the left edge */
  :root:has(link[href="bat.css"][data-picture]) .lg-art::after {
    content: ""; position: absolute; z-index: 0; right: 0; bottom: 0; pointer-events: none;
    height: clamp(300px, calc(100% - 390px), 700px); aspect-ratio: 581 / 995; max-width: 80%; /* the picture's own shape */
    background: url("signin-picture.webp") right bottom / contain no-repeat;
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 24%), linear-gradient(to right, transparent 0, #000 16%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to top, transparent 0, #000 24%), linear-gradient(to right, transparent 0, #000 16%);
    mask-composite: intersect;
  }
  /* a soft cool light behind the figure, so a dark costume reads on the night panel: 1.15 times the picture's height,
     square, moved right by half of what it is wider than the picture (581/995 of its height), so its centre is the
     figure's (the panel clips the rest) */
  :root:has(link[href="bat.css"][data-picture]) .lg-art::before {
    content: ""; position: absolute; z-index: 0; right: 0; bottom: 0; pointer-events: none;
    height: clamp(345px, calc((100% - 390px) * 1.15), 805px); aspect-ratio: 1 / 1; transform: translateX(24.6%);
    background: radial-gradient(ellipse 50% 46% at 50% 44%, rgba(126, 152, 214, .26), rgba(126, 152, 214, .08) 58%, transparent 74%);
  }
  :root:has(link[href="bat.css"][data-picture]) body[data-view="signin"] .lg-art::after { animation: signinPicIn .9s cubic-bezier(.2, .8, .2, 1) .1s both; }
  :root:has(link[href="bat.css"][data-picture]) body[data-view="signin"] .lg-art::before { animation: signinGlowIn 1.4s ease .1s both; }
}

@keyframes signinPicIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes signinGlowIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  body[data-view="signin"] .lg-box::before, body[data-view="signin"] .lg-art::before, body[data-view="signin"] .lg-art::after { animation: none; }
}