/* ==========================================================================
   auth_transition.css: the sign-in / sign-out "portal", MECHANICS ONLY.
   A full-screen field covers the page while a request is in flight (the waiting state) and again when the next
   page opens (the arrival and farewell), then leaves by itself. Markup: accounts/partials/_auth_transition.html.
   Behaviour: core/js/auth_transition.js.

   This file carries no colour, font, shape or keyframe of any one design. The look of each design lives in that
   design's own sheet, under [data-at-design="<design>"], and reads the hooks below:
     --at-field --at-on --at-accent --at-accent-ink   colours (the field, its text, the mark and its glyph)
     --at-font --at-font-text --at-title-weight        type
   A design sheet that animates does so only inside prefers-reduced-motion: no-preference, so the plain fade
   below is what reduced-motion users get, for every design.
   The arrival ends by CSS alone (its last animation removes it), so a script failure can never trap anyone.
   ========================================================================== */
.at-portal{
  --at-field: Canvas;
  --at-on: CanvasText;
  --at-accent: currentColor;
  --at-accent-ink: Canvas;
  --at-font: system-ui, sans-serif;
  --at-font-text: system-ui, sans-serif;
  --at-title-weight: 600;
  --x: 50%;
  --y: 50%;

  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: 1rem;
  color: var(--at-on);
  background: var(--at-field);
  -webkit-font-smoothing: antialiased;
}

.at-stage{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 34rem;
}

.at-mark{
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  background: var(--at-accent);
  color: var(--at-accent-ink);
}
.at-mark svg{ width: 38px; height: 38px; }

.at-shadow{
  width: 46px;
  height: 8px;
  margin-top: 10px;
}

.at-title{
  margin: 1.4rem 0 0;
  font-family: var(--at-font);
  font-weight: var(--at-title-weight);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.1;
  text-wrap: balance;
}
.at-title--pending{
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  margin-top: 1rem;
}
.at-line{
  margin: .6rem 0 0;
  font-family: var(--at-font-text);
  font-size: 1.08rem;
  line-height: 1.5;
  opacity: .88;
}

/* ---- Default motion: a plain fade. Every design gets this; a design sheet replaces it only inside
        prefers-reduced-motion: no-preference. ---------------------------------------------------------------- */
.at-portal--pending{ animation: at-appear .15s ease-out both; }
.at-portal--arrive{ animation: at-vanish .2s ease-in .9s forwards; }
.at-portal--arrive.is-skipped{ animation: at-vanish .12s ease-in forwards; }

@keyframes at-appear{
  from{ opacity: 0; }
}
@keyframes at-vanish{
  to{ opacity: 0; visibility: hidden; }
}