/* Callouts on the homepage photograph, revealed together by "explore this photo". */

.welcome-portrait.pa-ready { position: relative; transition: padding-top .3s cubic-bezier(.22, 1, .36, 1); }
.pa-stage { position: relative; display: block; line-height: 0; }

/* ─── leaders and rings ──────────────────────────────────────────────────── */
/* leaders can start outside the picture, so this layer must not clip */
.pa-leaders { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible;
    pointer-events: none; opacity: 0; transition: opacity .22s ease; }
.pa-exploring .pa-leaders { opacity: 1; transition-delay: .08s; }
.pa-leader-case { fill: none; stroke: rgba(4, 4, 8, .82); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.pa-leader { fill: none; stroke: #fbf7ee; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.pa-ring { fill: rgba(6, 6, 10, .5); stroke: var(--gold); stroke-width: 2; }

/* ─── labels ─────────────────────────────────────────────────────────────── */
/* width is fixed by content rather than by where the label lands, so it can be
   measured before it is placed; long names wrap onto a second balanced line */
.pa-tag { position: absolute; z-index: 3; width: max-content; max-width: 220px; padding: 3px 8px 4px;
    background: rgba(6, 6, 10, .9); border: 1px solid rgba(251, 247, 238, .2); border-bottom: 1.4px solid #fbf7ee;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .5);
    font-family: var(--mono); font-size: 11px; line-height: 1.3; letter-spacing: .02em;
    color: #fdfbf6; white-space: normal; text-wrap: balance; text-decoration: none; pointer-events: none;
    visibility: hidden; opacity: 0; transform: translateY(-100%) translateY(4px);
    transition: opacity .22s ease, transform .3s cubic-bezier(.22, 1, .36, 1), visibility .22s; }
.pa-exploring .pa-tag { visibility: visible; opacity: 1; transform: translateY(-100%); pointer-events: auto; }
/* the captions link to the case reports, so say so */
.pa-tag::after { content: "\2197"; margin-left: .35em; opacity: .75; }
.pa-tag:hover, .pa-tag:focus-visible { background: #1b1b28; border-color: #fbf7ee; color: #fff;
    text-decoration: underline; text-underline-offset: 2px; outline: none; }
.pa-tag:focus-visible { box-shadow: 0 0 0 2px var(--gold); }

/* ─── the control under the picture ──────────────────────────────────────── */
.pa-explore { display: inline-flex; align-items: center; gap: .4rem; flex: none;
    padding: .28rem .55rem; border: 1px solid var(--line); border-radius: 3px; background: none;
    color: var(--gold); cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit;
    transition: color .2s, border-color .2s, background-color .2s; }
.pa-explore:hover, .pa-explore[aria-expanded="true"] { border-color: var(--gold);
    background: color-mix(in srgb, var(--gold) 10%, transparent); }
.pa-explore:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .pa-tag, .pa-leaders { transition: none; }
}