/* Awaken badge: the sign-in card as the person's ID badge (awaken-badge.js).
   awaken-general design/sign-in/; copied verbatim into each app. Load it
   after awaken-signin.css (or the app's own sign-in styles). awaken-badge.js
   marks the card .aw-badge-card. Colours come from the family tokens, like
   the sign-in's. --aw-k scales every duration and delay (1 on a first open,
   quicker on a reload). In dark mode set --aw-badge-sheen lower on the gate.
   The badge is portrait, like an ID card: awaken-badge.js narrows the card
   to 300px and sets its height in an ID card's proportions; the badge fills
   it, with the footer and band along the bottom edge. The lanyard slot is
   a real hole: the badge paints the card's surface with the slot cut out
   (a mask), and the card itself turns clear behind it, so the page, and
   the app as the gate fades, shows through. */

.aw-badge-card.aw-badge-on{overflow:hidden;background-color:transparent;
  transition:height calc(520ms * var(--aw-k,1)) cubic-bezier(.65,0,.25,1),width calc(520ms * var(--aw-k,1)) cubic-bezier(.65,0,.25,1),
    background-color calc(240ms * var(--aw-k,1)) ease calc(420ms * var(--aw-k,1))}
/* The sign-in's own content steps aside as the badge comes in. */
.aw-badge-card > :not(.aw-badge){transition:opacity calc(240ms * var(--aw-k,1)) ease,transform calc(240ms * var(--aw-k,1)) ease}
.aw-badge-card::before{transition:opacity calc(300ms * var(--aw-k,1)) ease}
.aw-badge-on > :not(.aw-badge){opacity:0;transform:translateY(-10px)}
.aw-badge-on::before{opacity:0}

.aw-badge{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;padding:20px 24px 0;text-align:center;opacity:0;
  background:var(--surface,#FFFFFF);
  transition:opacity calc(260ms * var(--aw-k,1)) ease calc(160ms * var(--aw-k,1))}
.aw-badge-on .aw-badge{opacity:1;bottom:0}
/* Where a lanyard would go: a hole through the card, 58 x 11 and 20px
   down, the same box as .aw-badge-slot. The card's own surface fills it
   until the badge is fully in, then clears (the background-color above). */
.aw-badge{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='11'%3E%3Crect width='58' height='11' rx='5.5'/%3E%3C/svg%3E") 50% 20px/58px 11px no-repeat,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='11'%3E%3Crect width='58' height='11' rx='5.5'/%3E%3C/svg%3E") 50% 20px/58px 11px no-repeat exclude,linear-gradient(#000 0 0)}
/* The slot's edge: a hairline round the hole, darker along the top. */
.aw-badge-slot{width:58px;height:11px;margin:0 auto 20px;flex:none;border-radius:999px;
  box-shadow:0 0 0 1px var(--line,#E4DFD7),0 -1px 1px 1px rgba(0,0,0,.12)}
.aw-badge-issuer{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.75rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2,#574E45)}
.aw-badge-issuer img{width:20px;height:20px;object-fit:contain}
/* The photo, name and chips sit centred in the room between the issuer and
   the footer (the auto margins share it). */
.aw-badge-issuer{margin-bottom:22px}
.aw-badge-photo{position:relative;width:152px;height:152px;margin:auto auto 20px;flex:none}
.aw-badge-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.aw-badge-ring circle{fill:none;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:396;stroke-dashoffset:396;
  transition:stroke-dashoffset calc(720ms * var(--aw-k,1)) cubic-bezier(.65,0,.25,1) calc(300ms * var(--aw-k,1))}
.aw-badge-pic{position:absolute;inset:11px;border-radius:50%;overflow:hidden;background:var(--surface-2,#FBF9F5);
  opacity:0;transform:scale(.72);filter:blur(10px);
  transition:opacity calc(420ms * var(--aw-k,1)) ease calc(560ms * var(--aw-k,1)),
    transform calc(560ms * var(--aw-k,1)) cubic-bezier(.2,1.25,.35,1) calc(560ms * var(--aw-k,1)),
    filter calc(480ms * var(--aw-k,1)) ease calc(560ms * var(--aw-k,1))}
.aw-badge-pic img{width:100%;height:100%;object-fit:cover;display:block}
.aw-badge-initials{width:100%;height:100%;display:grid;place-items:center;
  background:linear-gradient(45deg,#E80E8A 0%,#EE4137 50%,#F59220 100%);color:#fff;font-weight:800;font-size:2.75rem;letter-spacing:.02em}
.aw-badge-name{font-family:var(--font-display,'Quarto',Georgia,serif);font-weight:700;font-size:1.75rem;line-height:1.1;text-wrap:balance;
  letter-spacing:-.01em;color:var(--ink,#1F1B17);overflow-wrap:anywhere;opacity:0;transform:translateY(10px);
  transition:opacity calc(380ms * var(--aw-k,1)) ease calc(820ms * var(--aw-k,1)),
    transform calc(460ms * var(--aw-k,1)) cubic-bezier(.2,.8,.3,1) calc(820ms * var(--aw-k,1))}
.aw-badge-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:10px 0 auto;opacity:0;transform:translateY(8px);
  transition:opacity calc(360ms * var(--aw-k,1)) ease calc(960ms * var(--aw-k,1)),
    transform calc(420ms * var(--aw-k,1)) cubic-bezier(.2,.8,.3,1) calc(960ms * var(--aw-k,1))}
.aw-badge-chips span{font-size:.75rem;font-weight:700;padding:4px 12px;border-radius:999px;border:1.5px solid var(--line,#E4DFD7);color:var(--ink-2,#574E45)}
.aw-badge-chips .aw-badge-ok{border-color:transparent;color:var(--ok,#0E7050);background:color-mix(in srgb,var(--ok,#0E7050) 14%,transparent)}
/* The footer and band sit on the badge's bottom edge, however tall it is. */
.aw-badge-foot{display:flex;flex-direction:column;align-items:center;gap:3px;margin:24px -24px 0;padding:14px 18px;border-top:1px dashed var(--line,#E4DFD7);
  font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3,#786D60);opacity:0;
  transition:opacity calc(360ms * var(--aw-k,1)) ease calc(1060ms * var(--aw-k,1))}
.aw-badge-band{flex:none;height:10px;margin:0 -24px;background:linear-gradient(90deg,#E80E8A 0%,#EE4137 50%,#F59220 100%)}
/* One soft pass of light across the badge. */
.aw-badge-sheen{position:absolute;inset:0;pointer-events:none;transform:translateX(-120%);
  background:linear-gradient(105deg,transparent 35%,var(--aw-badge-sheen,rgba(255,255,255,.55)) 50%,transparent 65%);
  transition:transform calc(900ms * var(--aw-k,1)) ease-in-out calc(1250ms * var(--aw-k,1))}

.aw-badge-on .aw-badge-ring circle{stroke-dashoffset:0}
.aw-badge-on .aw-badge-pic{opacity:1;transform:none;filter:none}
.aw-badge-on .aw-badge-name,.aw-badge-on .aw-badge-chips{opacity:1;transform:none}
.aw-badge-on .aw-badge-foot{opacity:1}
.aw-badge-on .aw-badge-sheen{transform:translateX(120%)}

/* Reduced motion: the same steps as short fades. */
.aw-badge-still .aw-badge-sheen{display:none}
@media (prefers-reduced-motion:reduce){
  .aw-badge-card.aw-badge-on,.aw-badge-card > *,.aw-badge,.aw-badge *{transition-duration:150ms !important;transition-delay:0s !important}
  .aw-badge-card.aw-badge-on{transition-delay:0s,0s,150ms !important}
  .aw-badge-pic{transform:none;filter:none}
  .aw-badge-name,.aw-badge-chips,.aw-badge-on > :not(.aw-badge){transform:none}
}
@media (max-width:400px){
  .aw-badge-name{font-size:1.625rem}
}