/*
 * globe.css
 * Globe-specific styles — station markers, marbles, labels
 *
 * Layout is handled by dashboard.css. This file covers only
 * the globe view's unique elements.
 *
 * Location: /Library/WebServer/Documents/Canemah/projects/ecoSPLAT/viewer/css/
 * Author: M. Hamilton / Claude collaboration
 * Date: February 2026
 */

/* ── Station marker wrappers ── */
.station-marker-wrapper {
    cursor: pointer;
    transition: transform var(--transition-medium);
}
.station-marker-wrapper:hover {
    transform: scale(1.3);
}
.station-marker-wrapper.active {
    transform: scale(1.2);
}
.station-marker-wrapper.active canvas,
.station-marker-wrapper.active .marble {
    box-shadow: 0 0 12px var(--eco-green-dim), 0 0 24px var(--eco-green-dim);
}
.station-marker-wrapper.has-data canvas,
.station-marker-wrapper.has-data .marble {
    box-shadow: 0 0 8px var(--accent-glow);
}
.station-marker-wrapper.no-data {
    opacity: 0.6;
}

.station-label {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--font-size-xs);
    color: var(--text-bright);
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--transition-fast);
    pointer-events: none;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.station-marker-wrapper:hover .station-label {
    opacity: 1;
}

/* ── Marble spheres ── */
.marble {
    border-radius: var(--radius-round);
    background-size: cover;
    background-position: center;
    cursor: pointer;
}
.marble.placeholder {
    opacity: 0.7;
}