/* ==================================================================
   Chrome type — Constellation Visual Brand System v1.0

   The brand kit ships word plates as bitmaps for specific words
   ("ANALYSIS", "APPEARANCE", the wordmarks). Any other heading is set
   in live type with the same metal clipped into the glyphs, so live
   text and plate art read as the same material.

   Requires tokens/constellation.css for --cs-chrome / --cs-chrome-hi.

   The display face is a heavy squared oblique, chosen to sit with the
   Free Bounce wordmark rather than against it: the mark is a wide,
   very heavy italic with rounded-square counters and terminals cut
   parallel to the slant. A UI face at weight 800 does not carry that,
   which is the whole reason this token exists -- swap
   --cs-font-display and every chrome heading follows.
   ================================================================== */

:root {
    --cs-font-display: 'Saira', 'Inter', system-ui, sans-serif;
}

.cs-chrome-type {
    font-family: var(--cs-font-display);
    font-weight: 900;
    background: var(--cs-chrome);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* A drop-shadow on the element would fall behind the transparent
       fill, so the shadow has to be part of the filter chain. */
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .85))
            drop-shadow(0 0 14px rgba(221, 246, 255, .14));
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* The display face has a true italic, so use it -- a synthetic skew on
   top of real italic letterforms double-slants them. The small extra
   skew is only there to reach the wordmark's harder lean, which runs
   steeper than any text italic. */
.cs-chrome-type--italic {
    font-style: italic;
    transform: skewX(-5deg);
    display: inline-block;
}

/* Brighter metal for the one element that should catch the eye. */
.cs-chrome-type--hi {
    background: var(--cs-chrome-hi);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Chrome needs the light to move to read as metal. Opt in per element;
   it is deliberately not the default. */
@media (prefers-reduced-motion: no-preference) {
    .cs-chrome-type--live {
        background-size: 100% 220%;
        animation: cs-chrome-sheen 7s ease-in-out infinite;
    }
}

@keyframes cs-chrome-sheen {
    0%, 100% { background-position: 50% 0%; }
    50%      { background-position: 50% 100%; }
}