/* whoami — standalone "who am I?" intro card (pairs with whoami.js).
   Brand it with the custom properties below; each falls back to the host site's tokens.
   Shape rule: card and button are both pills, so the corners stay concentric
   (outer radius = button radius + padding) at any size. */
.whoami{
  --wa-bg:var(--bg,#fff);
  --wa-ink:var(--ink,#1d1d1b);
  --wa-line:var(--line,#e3e5e3);
  --wa-accent:var(--accent,#ffe327);
  --wa-serif:var(--serif,Georgia,serif);
  --wa-ease:var(--ease,cubic-bezier(.16,1,.3,1));
  --wa-shadow:0 1px 2px rgba(29,29,27,.05),0 14px 34px -14px rgba(29,29,27,.22);
  --wa-pad:.5rem;          /* even inset around the button — keeps the radii concentric */

  position:fixed;right:1.2rem;bottom:calc(1.2rem + env(safe-area-inset-bottom,0px));z-index:125;
  display:flex;align-items:center;gap:1.1rem;
  background:var(--wa-bg);border:1px solid var(--wa-line);border-radius:999px;
  padding:var(--wa-pad) var(--wa-pad) var(--wa-pad) 1.5rem;box-shadow:var(--wa-shadow);
  opacity:0;transform:translateY(18px) scale(.96);transform-origin:right bottom;will-change:transform,opacity;
  transition:opacity .45s var(--wa-ease),transform .8s var(--wa-ease)}
.whoami.show{opacity:1;transform:none}
/* exit: quicker, accelerating, a short drop — reads as "leaving", not a rewind */
.whoami.out{opacity:0;transform:translateY(10px) scale(.98);transition:opacity .32s cubic-bezier(.4,0,1,1),transform .38s cubic-bezier(.4,0,1,1)}

/* question: a hidden full-length copy sizes it, the typed copy sits on top — no width change while typing */
.whoami .wa-q{position:relative;display:inline-block;font-family:var(--wa-serif);font-size:1.4rem;line-height:1.15;letter-spacing:-.01em;color:var(--wa-ink);white-space:nowrap;padding-right:.12em}
.whoami .wa-ghost{visibility:hidden}
.whoami .wa-live{position:absolute;left:0;top:0}
.whoami .wa-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.whoami .wa-u{position:relative;display:inline-block;z-index:0}
.whoami .wa-u::before{content:"";position:absolute;left:-.06em;right:-.1em;bottom:.1em;height:.78em;background:var(--wa-accent);z-index:-1;border-radius:1px;
  transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--wa-ease)}
.whoami.lit .wa-u::before{transform:scaleX(1)}
.whoami .wa-caret{display:inline-block;width:1.5px;height:.92em;margin-left:2px;vertical-align:-.1em;background:var(--wa-ink)}
.whoami.idle .wa-caret{animation:wa-blink 1s steps(1) infinite}
.whoami.lit .wa-caret{opacity:0;transition:opacity .2s}
@keyframes wa-blink{50%{opacity:0}}

/* button: the host's own button class (set in whoami.js config) — only its size is scaled here.
   Entrance = the highlight's sweep continued: once the last word is lit, the button is wiped in
   left→right, then unclipped (.wiped) so its hover lift + shadow show fully. */
.whoami .wa-gw{display:inline-flex;clip-path:inset(0 100% 0 0 round 999px);opacity:0;
  transition:clip-path .72s cubic-bezier(.5,0,.15,1) .3s,opacity .18s linear .3s}
.whoami.lit .wa-gw{clip-path:inset(0 0 0 0 round 999px);opacity:1}
.whoami.wiped .wa-gw{clip-path:none;transition:none}
.whoami .wa-go{font-size:.86rem;padding:.7rem 1.15rem;gap:.5rem;white-space:nowrap;border-radius:999px}

@media(max-width:600px){
  .whoami{right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));padding-left:1.2rem;gap:.8rem}
  .whoami .wa-q{font-size:1.2rem}
}
@media(prefers-reduced-motion:reduce){
  .whoami,.whoami *,.whoami .wa-u::before{transition-duration:.01ms!important;animation:none!important}
}