/* Slant card stream, shared by the project page and the homepage thumbnail.
   Behaviour lives in slant.js; this is the stage, the slot and the card. */

/* DM Sans, vendored from the Slant app. Variable: two files cover all weights. */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url(fonts/dmsans-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url(fonts/dmsans-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* The stage takes whatever box its context gives it; slant.js measures it. */
.slant-stage {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* The slot follows the path; the card inside it wobbles on its own. */
.slant-stage .slot {
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.slant-stage.is-ready .slot { opacity: 1; }

/* The homepage thumbnail: a flat Cyan 0 field under the cards.
   (Was the gradient in projects/thumbslant.webp; trying it plain.) */
.slant-thumb { background: #e3fafc; }

/* Started from the sample card PNGs (28px type, 512 wide), then opened up
   for the stream: type and glyph are larger against the card, and the
   padding is tighter, especially the empty band at the bottom.
   In em so each card's size is set by its font-size alone and text
   is always rendered at its real size, never scaled.

   The fill is slightly see-through (--lens-fill, a plain rgba() that slant.js
   builds from the card's colour, CONFIG.cardAlpha), and blurs what's behind
   it, so a card passing over another shows it as soft colour rather than
   competing text. rgba() rather than color-mix(), which rendered differently
   in Safari and Chrome. */
.lens {
    box-sizing: border-box;
    width: 16.5em;
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    padding: 1.25em 1.25em 3em;
    border-radius: 1.1429em;
    background: var(--lens-fill, var(--lens));
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    color: #fff;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    line-height: 1.2857;
    text-align: left;
    will-change: transform;
}

.lens h3 {
    margin: 0;
    font-size: 1em;
    line-height: inherit;
    font-weight: 600;
}

.lens p { margin: 0; }

/* 1.4em of the card's type, sitting one gap above the title. */
.lens .glyph {
    display: block;
    width: 1.4em;
    height: 1.4em;
}

.lens .glyph[hidden] { display: none; }

/* The whole deck as still pills, flowing inline and wrapping like words.
   Same face and glyphs as the cards, on white. Each pill carries its own pair
   of colours inline (--pill-edge, --pill-ink), written by embed-glyphs.py, so
   the list runs through the colour wheel a hue at a time. The greys below are
   the fallback for a pill without them. */
.slant-lenses {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 1.25rem;
    line-height: 1.4;
}

.slant-lenses li {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin: 0 0.35em 0.45em 0;
    max-width: 100%;
    padding: 0.3em 0.8em 0.3em 0.55em;
    /* Half of one line's height (1.4 + 0.3 * 2), so a single line is a true
       pill and a name too long for a narrow column wraps into a rounded box. */
    border-radius: 1em;
    border: 1px solid var(--pill-edge, #dee2e6);
    background: #fff;
    color: var(--pill-ink, #495057);
    font-weight: 500;
}

/* Inline SVGs filled with currentColor (embed-glyphs.py writes them), so the
   glyph always matches the name. */
.slant-lenses .pill-glyph {
    flex: none;
    display: block;
    width: 1em;
    height: 1em;
}