/* Hero "recent clients" - three overlapping round client pictures (white rings, bright
   colours), and beside them the newest buyer: who bought which device and
   at what time. Every few seconds the pictures slide sideways by one - the first slides out on
   the left, a new buyer slides in on the right - and the purchase line swaps (hero-buyers.js).
   The hero is dark in both themes, so one look serves both. */
.hero-buyers {
    --hb-size: 40px;                       /* picture size */
    --hb-over: 12px;                       /* how much each picture overlaps the one before */
    --hb-ring: 3px;
    display: flex;
    align-items: center;
    width: min(460px, 100%);
    height: 52px;                          /* fixed: the page never jumps */
    margin-top: 24px;
    color: #fff;
    font-family: Montserrat, Arial, sans-serif;
}

/* window showing exactly three pictures; the row slides inside it */
.hb-stack {
    flex: 0 0 auto;
    box-sizing: content-box;
    width: calc(3 * var(--hb-size) - 2 * var(--hb-over));
    padding: 6px;                          /* room for the rings + shadow */
    overflow: hidden;
    /* soft edges where pictures slide out / in */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%);
}
.hb-track {
    display: flex;
    align-items: center;
    width: max-content;
    padding-left: var(--hb-over);          /* cancels the first picture's overlap: it starts at the window edge */
}
.hb-track.is-moving { transition: transform .6s cubic-bezier(.45, 0, .2, 1); }

.hb-face {
    position: relative;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: var(--hb-size);
    height: var(--hb-size);
    margin-left: calc(-1 * var(--hb-over));
    overflow: hidden;
    box-sizing: border-box;
    border: var(--hb-ring) solid #fff;
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .28);
    color: #fff;
    font: 700 13px/1 Montserrat, Arial, sans-serif;
    letter-spacing: .02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: opacity .5s ease, box-shadow .4s ease;
}
.hb-face img { width: 100%; height: 100%; object-fit: cover; }

/* the newest buyer (right end, on top) gets a ring: red in the light theme, violet in the dark */
.hb-face.is-latest { box-shadow: 0 0 0 2px #e91d2b, 0 3px 10px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .hb-face.is-latest { box-shadow: 0 0 0 2px #a78bfa, 0 3px 10px rgba(0, 0, 0, .35); }
.hb-face.is-new { opacity: 0; transition: none; }      /* slides in from the right as it appears */
.hb-face.is-gone { opacity: 0; }                       /* slides out on the left as it fades */

/* the newest buyer's purchase */
.hb-info {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin-left: 14px;
    padding-left: 14px;
    border-left: 1px solid rgba(255, 255, 255, .18);
    overflow: hidden;
}
.hb-line {
    position: absolute;
    top: 50%;
    left: 14px;
    right: 0;
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    color: rgba(255, 255, 255, .78);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translate(0, -50%);
    transition: transform .55s cubic-bezier(.2, .8, .25, 1), opacity .4s ease;
}
/* the purchase line moves sideways too: in from the right, out to the left */
.hb-line.is-new { opacity: 0; transform: translate(40px, -50%); transition: none; }
.hb-line.is-out { opacity: 0; transform: translate(-40px, -50%); }
.hb-line strong { color: #fff; font-weight: 700; }
.hb-what { display: block; overflow: hidden; text-overflow: ellipsis; }
.hb-what b { color: #c4b5fd; font-weight: 700; }   /* dark theme: pale violet */

/* light theme: the product name in the site red, like the hero's rotating word */
html:not([data-theme="dark"]) .hb-what b { color: #ff4d57; }

@media (max-width: 600px) {
    .hero-buyers { --hb-size: 32px; --hb-over: 9px; --hb-ring: 2px; height: 46px; margin-top: 18px; }
    .hb-face { font-size: 10.5px; }
    .hb-info { margin-left: 10px; padding-left: 10px; }
    .hb-line { left: 10px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .hb-track.is-moving, .hb-line { transition: opacity .3s ease !important; }
}