/* Homepage thumbnail for the research direction (thumb.js): lens cards dealt
   off a small stack, the ground tinted by the front card. The cards are the
   Slant hero's (projects/slant/slant.css .lens): DM Sans, white type, a fill
   at 85% over a 16px blur, so the cards behind show through as soft colour.
   Sized from the box (container units). */

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url(fonts/dmsans-latin.woff2) format('woff2');
}

.sr-thumb {
    --g: #7950f2;
    position: relative;
    overflow: hidden;
    container-type: size;
    background: color-mix(in srgb, var(--g) 8%, #fff);
    transition: background-color 0.9s ease;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* Card size: whichever of width or height is tighter. */
.sr-thumb .t-stack {
    --w: min(40cqw, 84cqh);
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--w);
    aspect-ratio: 16.5 / 11;
    translate: -50% -50%;
}

/* The hero's card, at the hero's proportions: 16.5em wide, 1.25em padding
   (3em at the foot), a 1.4em glyph one gap above the name. */
.sr-thumb .t-card {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    padding: 1.25em 1.25em 3em;
    border-radius: 1.1429em;
    background: var(--fill, #7950f2);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    color: #fff;
    will-change: transform, opacity;
    font-size: calc(var(--w) / 11);
    font-weight: 600;
    line-height: 1.2857;
}
.sr-thumb .t-card svg { display: block; width: 1.4em; height: 1.4em; flex: none; }
.sr-thumb .t-card b { font-weight: 600; }

/* Only the front card shows its glyph and name; behind it, soft colour. */
.sr-thumb .t-card > * { opacity: 0; transition: opacity 0.12s ease; }
.sr-thumb .t-card.is-front > * { opacity: 1; transition: opacity 0.4s ease 0.05s; }

@media (prefers-reduced-motion: reduce) {
    .sr-thumb, .sr-thumb .t-card > * { transition: none; }
}