.living-globe {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    isolation: isolate;
}
.living-globe-visual {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.living-globe-visual > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mask-image: radial-gradient(circle, #000 40%, transparent 72%);
}
.living-globe canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s;
}
.living-globe[data-ready] canvas {
    opacity: 1;
}
.living-globe[data-ready] .living-globe-visual > img {
    opacity: 0;
}
.globe-motion-control {
    position: absolute;
    z-index: 5;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    background: #081d28e8;
    border: 1px solid #41665d;
    border-radius: 20px;
    padding: 7px 12px;
    color: #bcebdc;
    font:
        11px/1.5 ui-sans-serif,
        system-ui,
        sans-serif;
    cursor: pointer;
}
.globe-motion-control input {
    width: 14px;
    height: 14px;
    accent-color: #9ef0cf;
    margin: 0;
    cursor: pointer;
}
.globe-motion-control:focus-within {
    outline: 2px solid #9ef0cf;
    outline-offset: 4px;
}
.globe-credit {
    position: absolute;
    z-index: 4;
    bottom: 9%;
    left: 50%;
    transform: translateX(-50%);
    color: #91b1b8;
    font:
        9px/1.4 ui-sans-serif,
        system-ui,
        sans-serif;
    white-space: nowrap;
}
.africa-globe .living-globe {
    position: absolute;
    inset: 0;
}
.africa-globe .globe-motion-control {
    bottom: 25%;
}
.africa-globe .globe-credit {
    bottom: 21%;
}
@media (prefers-reduced-motion: reduce) {
    .living-globe canvas {
        transition: none;
    }
    .globe-motion-control {
        display: none;
    }
}
/* Controls appear only after a working renderer has replaced the fallback. */
.living-globe:not([data-ready]) .globe-motion-control,
.living-globe:not([data-ready]) .globe-credit {
    visibility: hidden;
}
.africa-globe .globe-chip-2 {
    bottom: 40%;
}
@media (max-width: 600px) {
    .africa-globe .globe-caption {
        bottom: -65px;
    }
    .africa-experience:has(.living-globe) {
        margin-bottom: 75px;
    }
}