/* Pixel Neby, the mascot, on the web. neby-pixel.js puts an <i> inside each
   [data-neby-avatar] and points it at a horizontal strip of 48 x 48 frames
   (img/neby/<look>/<state>.png), setting --n (frames) and --d (duration).
   background-size n*100% with steps(n, jump-none) from 0% to 100% lands on
   every frame at any size, so one rule fits the 28 px avatar and the hero. */
.neby-px{display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:visible;cursor:default;user-select:none;-webkit-tap-highlight-color:transparent}
.neby-px>i{display:block;width:100%;height:100%;background-repeat:no-repeat;background-size:calc(var(--n,1) * 100%) 100%;background-position:0 0;image-rendering:pixelated;animation:neby-px-run var(--d,1s) steps(var(--n,2),jump-none) infinite;pointer-events:none}
.neby-px[data-state="still"]>i{animation:none}
@keyframes neby-px-run{from{background-position-x:0%}to{background-position-x:100%}}

/* Avatars: a round window on a head-and-shoulders crop. The <i> is drawn larger than the
   circle and offset by the script, so Neby sits centred however big the avatar is. */
.neby-px.neby-px--avatar{overflow:hidden;border-radius:50%;background:color-mix(in srgb,var(--md-primary,#0b57d0) 7%,var(--md-surface-container-lowest,#fff));border:1px solid color-mix(in srgb,var(--md-primary,#0b57d0) 14%,transparent);box-sizing:border-box}
.neby-px.neby-px--avatar>i{position:absolute;max-width:none}

/* the 3D plate and ring do not suit a sprite: the hero stands on its own */
.neby-px.neby-avatar-hero{background:transparent;border-color:transparent;border-radius:0}
.neby-px[data-interactive]{cursor:pointer}
.neby-px[data-interactive]>i{transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.neby-px[data-interactive]:hover>i{transform:translateY(-2px)}
.neby-px[data-interactive]:active>i{transform:scale(.94)}
.neby-px[data-interactive]:focus-visible{outline:2px solid var(--md-primary);outline-offset:4px;border-radius:12px}
@media (prefers-reduced-motion:reduce){.neby-px>i{animation:none}}