/* Globe Logo 3D Spinner — Front-end Styles */

.globe-logo-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.glg-scene {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Spinning rings ── */
.glg-ring {
    position: absolute;
    border-radius: 50%;
    border-style: solid;
    border-width: 3px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: glg-ring-spin linear infinite;
    box-sizing: border-box;
}

@keyframes glg-ring-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ── Orbiting dots ── */
.glg-dot {
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    z-index: 4;
    animation: glg-dot-orbit linear infinite;
}

@keyframes glg-dot-orbit {
    from { transform: translate(-50%, -50%) rotate(0deg)   translateX(var(--orbit-r, 100px)); }
    to   { transform: translate(-50%, -50%) rotate(360deg) translateX(var(--orbit-r, 100px)); }
}

/* ── Photo circle — clean border, no overflow clipping on wrapper ── */
.glg-photo {
    position: absolute;
    border-radius: 50%;
    border-style: solid;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    box-sizing: border-box;
    overflow: hidden;
    background: transparent;
}

/* ── 3D spinning inner — animation set per-instance via scoped <style> ── */
.glg-photo-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    /* animation injected inline per instance */
}

.glg-photo-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* ── Responsive helpers ── */
.globe-logo-wrap.glg-center { display: flex; justify-content: center; }
.globe-logo-wrap.glg-left   { display: flex; justify-content: flex-start; }
.globe-logo-wrap.glg-right  { display: flex; justify-content: flex-end; }

/* ── Admin settings preview ── */
.wrap .globe-logo-wrap { background: #f0f0f0; padding: 20px; border-radius: 8px; }