/* ============================================================
   Bella Ciao · controlV3a-globe — Realistic Earth (globe.gl)
   Adds Three.js WebGL globe positioned where SVG Earth was.
   Hide SVG Earth (hub-earth + hub-halo) when this variant active.
   ============================================================ */

/* Hide the SVG Earth in this variant — replaced by Three.js globe */
body.variant-a-globe .hub-earth,
body.variant-a-globe .hub-halo {
    display: none;
}

/* Globe container — Earth center pinned to SVG y=140 of viewBox 320 (43.75% from top) */
.hub-globe-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

#hub-globe {
    position: absolute;
    top: 43.75%;            /* match SVG cylinders' equator line (y=140/320) */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130px;           /* mobile — smaller per user (was 180px) */
    height: 130px;
    background: transparent;
}

/* Globe canvas inside must be transparent + rounded */
#hub-globe canvas {
    background: transparent !important;
    border-radius: 50%;
}

.hub-globe-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    color: rgba(61,245,138,0.7);
    letter-spacing: 1.5px;
    background: rgba(6,13,10,0.7);
    padding: 4px 9px;
    border-radius: 3px;
    border: 1px solid rgba(61,245,138,0.3);
    pointer-events: none;
    z-index: 2;
    animation: hub-loading-blink 1.4s ease-in-out infinite;
}
.hub-globe-loading.hidden { display: none; }

@keyframes hub-loading-blink {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

/* Hub label sits above globe, top of panel */
body.variant-a-globe .hub-label {
    top: 6px;
    z-index: 6;
}

/* Pipes visible OVER the globe — bump SVG z-index */
body.variant-a-globe .hub {
    z-index: 2;
}

/* Taller orbit aspect to accommodate Earth + cylinders + extended down-pipes */
body.variant-a-globe .orbit.scada-hub {
    aspect-ratio: 400 / 320;
    max-height: 46vh;
}

/* ============================================================
   AGENT CARD MINI-TERMINAL
   Replaces the simple verdict pill with a small SCADA-style
   cylinder (data terminal) and a thin pipe extending above the
   card border, suggesting flow from orbit's down-pipes.

   Outline color  = category (data channel)
   Liquid color   = current verdict signal (bull/bear/neutral/watch)
   ============================================================ */

/* Hide the existing PIPE-IN bar (::before) — replaced by SVG pipe inside card */
body.variant-a-globe .agent::before {
    display: none;
}

/* Hide the original verdict pill — info now lives in the cylinder fill */
body.variant-a-globe .agent-verdict {
    display: none;
}

.card-feed {
    position: absolute;
    top: 8px;            /* fully inside card */
    right: 8px;
    width: 22px;
    height: 60px;
    pointer-events: none;
    z-index: 3;
}

.card-feed-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Category color via currentColor — set per cat below */
.agent[data-cat="market"] .card-feed     { color: var(--cat-market); }
.agent[data-cat="whales"] .card-feed     { color: var(--cat-whales); }
.agent[data-cat="social"] .card-feed     { color: var(--cat-social); }
.agent[data-cat="news"]   .card-feed     { color: var(--cat-news); }
.agent[data-cat="macro"]  .card-feed     { color: var(--cat-macro); }
.agent[data-cat="risk"]   .card-feed     { color: var(--cat-risk); }

/* Pipe flow animation */
@keyframes card-feed-flow {
    to { stroke-dashoffset: -28; }
}
.card-feed-pipe {
    animation: card-feed-flow 1.6s linear infinite;
    filter: drop-shadow(0 0 2px currentColor);
}

/* LED blink */
@keyframes card-feed-led-blink {
    0%, 65%, 100% { opacity: 0.55; }
    75%           { opacity: 1; filter: drop-shadow(0 0 4px currentColor); }
}
.card-feed-led {
    animation: card-feed-led-blink 3.5s ease-in-out infinite;
}

/* Subtle liquid breath */
@keyframes card-feed-breath {
    0%, 100% { transform: scaleY(1);    opacity: 0.42; }
    50%      { transform: scaleY(1.06); opacity: 0.55; }
}
.card-feed-liquid {
    transform-origin: center bottom;
    transform-box: fill-box;
    animation: card-feed-breath 4s ease-in-out infinite;
}

/* Make agent meta wrap a bit narrower to leave room for cylinder */
body.variant-a-globe .agent-meta {
    padding-right: 36px;
}

/* Tablet+ : grow as screen widens (user wants Earth bigger on desktop) */
@media (min-width: 720px) {
    #hub-globe {
        width: 230px;
        height: 230px;
    }
}

@media (min-width: 1100px) {
    #hub-globe {
        width: 300px;
        height: 300px;
    }
}

@media (min-width: 1400px) {
    #hub-globe {
        width: 340px;
        height: 340px;
    }
}