/* Hero rechts: Fadenkugel. Aus der Rosette in der Mitte winden sich Faeden
   ueber eine Kugel, jeder endet an einer Software oder bei Anwendern.
   Gezeichnet auf Canvas, die Beschriftungen sind HTML. Ablauf: hero-sphere.js. */

.hsph {
    --bleed: 0px;
    position: relative;
    justify-self: end;
    width: calc(100% + var(--bleed));
    max-width: 40rem;
    aspect-ratio: 1;
    margin-right: calc(-1 * var(--bleed));
}

@media (min-width: 52.01rem) {
    .hsph { --bleed: clamp(0px, calc((100vw - var(--container)) / 2 - 1rem), 9rem); }
}

.hsph canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ---------- Beschriftungen ---------- */
.hsph__labels {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hsph__l {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .005em;
    white-space: nowrap;
    color: var(--text);
    /* kein Kasten: Schein in Hintergrundfarbe haelt die Schrift ueber den Faeden lesbar */
    text-shadow: 0 0 2px var(--bg), 0 0 8px var(--bg), 0 0 14px var(--bg);
    will-change: transform, opacity;
}

.hsph__l i {
    display: grid;
    place-items: center;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: .3rem;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 18%, var(--bg));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent);
    transition: background .3s, color .3s;
}

.hsph__l svg {
    width: .6875rem;
    height: .6875rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Anwender: runde Markierung statt eckiger */
.hsph__l--user i { border-radius: 50%; }

/* kurz aufleuchten, wenn ein Datenimpuls ankommt, und beim Ueberfahren */
.hsph__l.is-hit i,
.hsph__l:hover i {
    color: #fff;
    background: var(--c);
}

@media (max-width: 52rem) {
    .hsph {
        justify-self: center;
        width: min(100%, 26rem);
    }

    .hsph__l { font-size: .6875rem; }
}

/* Ziele lassen sich ueberfahren, der Faden dazu wird hervorgehoben */
.hsph__l { cursor: default; }

.hsph__hint {
    position: absolute;
    right: 12%;
    bottom: 2%;
    font: 500 .6875rem var(--font-mono);
    color: var(--text-muted);
    transition: opacity .3s;
}

.hsph.was-used .hsph__hint { opacity: 0; }