/* ==========================================================================
   Profile card — the visitor rendering of /@username
   ==========================================================================
   One membership card centred on a bare page, with the door in underneath it.
   The page has no header and no footer (layouts/static keys both off the
   'profile-card' page id), so everything a visitor can reach is in this file.

   Colour discipline: the card, the foil and the glow are all ink-neutral. The
   two door links below are the only orange on the page, because orange means
   "do this" and the card is not asking for anything.
   ========================================================================== */

.card-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xl);
    min-height: 100svh;
    padding: var(--spacing-xl) var(--spacing-md);
    /* The tilt is a 3D rotation, so the stage is what gives it depth. */
    perspective: 1000px;
}

/* --- The benday glow ----------------------------------------------------- */

/* The site's dot lattice, but radial: dense and bright where it meets the
   card's edge, thinning to nothing outward. Two masks do the work — the
   gradient fades the dots, the radial mask keeps them in a pool behind the
   card rather than tiling the whole viewport. */
.card-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: min(140vw, 1100px);
    height: min(140vh, 1100px);
    transform: translate(-50%, -50%);
    pointer-events: none;
    --dot: color-mix(in srgb, var(--color-text) 16%, transparent);
    background-image:
        radial-gradient(circle, var(--dot) 0 1.4px, transparent 2px),
        radial-gradient(circle, var(--dot) 0 1.4px, transparent 2px);
    background-size: 11px 11px;
    background-position: 0 0, 5.5px 5.5px;
    -webkit-mask-image: radial-gradient(circle at center, #000 8%, transparent 62%);
    mask-image: radial-gradient(circle at center, #000 8%, transparent 62%);
}

/* --- The card ------------------------------------------------------------ */

.member-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    width: min(100%, 30rem);
    padding: var(--spacing-xl);
    background: var(--color-surface);
    border: 2px solid var(--color-ink-black);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-lg);
    /* --tx / --ty arrive from the page script as -1..1; both the tilt below
       and the foil band in .member-card-avatar::before read them, so the light
       can only ever move as a reflection of the card's own angle. */
    --tx: 0;
    --ty: 0;
    transform:
        rotateY(calc(var(--tx) * 4deg))
        rotateX(calc(var(--ty) * -4deg));
    transition: transform 0.4s ease;
}

/* While the pointer is on the card, the tilt tracks it directly; the slower
   transition above is what eases it back to flat on the way out. */
.member-card.is-tilting {
    transition: transform 0.08s linear;
}

.member-card-body {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
}

/* --- Avatar + foil ------------------------------------------------------- */

/* The portrait frame: taller than wide, like the corner box on a sixties
   cover. Never a circle — the box is the format, and the ink behind the
   initial is set by .avatar-bg-* below. */
.member-card-avatar {
    isolation: isolate;
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border: 2px solid var(--color-ink-black);
    border-radius: var(--border-radius-xs);
}

/* Deterministic identity inks, chosen by hashing the writer (avatar_helper).
   Dark inks only: this is identity coding, not decoration, and never orange.

   Every ink clears 4.5:1 against the white initial, so no writer draws the one
   avatar you have to squint at. The floor is neutral-600 at 6.0:1; the ramp
   stops there rather than continuing to neutral-500, which measured 3.2:1 and
   passed only on the technicality that the glyph is large. */
.avatar-bg-1 { background-color: var(--color-navy); }
.avatar-bg-2 { background-color: var(--color-ink-black); }
.avatar-bg-3 { background-color: var(--color-neutral-700); }
.avatar-bg-4 { background-color: var(--color-neutral-600); }
.avatar-bg-5 { background-color: var(--color-amber-700); }
.avatar-bg-6 { background-color: var(--color-green-800); }

.member-card-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* One diagonal bar of light: white at the core, colour splitting off either
   edge. Its travel is driven by the card's own tilt, so angling the card
   throws the band the way a real foil does. */
.member-card-avatar::before {
    content: '';
    position: absolute;
    inset: -20%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        112deg,
        transparent 30%,
        rgba(120, 200, 255, 0.55) 42%,
        rgba(255, 255, 255, 0.95) 50%,
        rgba(255, 140, 190, 0.55) 58%,
        transparent 70%
    );
    /* Travels further than the card turns, so it reads as a reflection rather
       than as part of the card's surface. */
    transform: translateX(calc(var(--tx) * 70%));
    opacity: 0;
    mix-blend-mode: screen;
    filter: blur(2px);
    transition: opacity 0.25s ease;
}

.member-card.is-tilting .member-card-avatar::before {
    opacity: 1;
}

/* The default face: shows through whenever there is no Gravatar to cover it.
   Italic Newsreader, lowercase, white on whichever ink the writer hashes to. */
.member-card-initial {
    font-family: var(--font-heading);
    font-size: 2.75rem;
    font-style: italic;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    text-transform: lowercase;
    color: var(--color-text-inverse);
}

/* --- Identity ------------------------------------------------------------ */

.member-card-identity {
    min-width: 0;
}

.member-card-name {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
    /* A long display name wraps rather than pushing the card wider. */
    overflow-wrap: anywhere;
}

.member-card-handle {
    margin: var(--spacing-xxs) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.member-card-bio {
    margin: var(--spacing-sm) 0 0;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* --- Stat line ----------------------------------------------------------- */

.member-card-stat {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

/* --- The issued-by row --------------------------------------------------- */

/* The card's bottom band: who issued it, and when they did. A hairline above
   it does the work a card's printed edge would. */
.member-card-issue {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

.member-card-brand {
    display: inline-flex;
    /* Small: it is a maker's mark on the card, not a banner over it. */
    opacity: 0.75;
    transition: opacity 0.2s ease;
}

.member-card-brand:hover,
.member-card-brand:focus-visible {
    opacity: 1;
}

.member-card-brand img {
    display: block;
    height: 20px;
    width: auto;
}

.member-card-since {
    font-size: var(--font-size-xxs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-lighter);
}

/* --- The door ------------------------------------------------------------ */

/* Below the card and outside the tilt, so the invitation reads as the site
   speaking rather than as something printed on the membership object. */
.card-door {
    margin: 0;
    font-size: var(--font-size-sm);
}

.card-door-lead,
.card-door-or {
    color: var(--color-text-light);
}

/* The only orange on the page. */
.card-door-link {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

.card-door-link:hover,
.card-door-link:focus-visible {
    text-decoration: underline;
}

/* --- Reduced motion ------------------------------------------------------ */

/* The tilt and the foil are both decoration. A writer who asked for less
   movement gets the card flat, lit evenly, and every link still works. */
@media (prefers-reduced-motion: reduce) {
    .member-card {
        transform: none;
        transition: none;
    }

    .member-card-avatar::before {
        display: none;
    }
}

/* --- Narrow -------------------------------------------------------------- */

@media (max-width: 30rem) {
    .member-card {
        padding: var(--spacing-lg);
    }

    .member-card-avatar {
        width: 4.5rem;
    }

    .member-card-issue {
        /* The wordmark and the date stop sharing a line before either has to
           shrink or truncate. */
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
}