/* ============================================================
   Bella Ciao · controlV3a — SCADA Hub variant
   Overrides controlv3.css for the orbit (Earth + 6 pipes) only.
   Agents, Professor, Story, Lesson inherit from base.
   ============================================================ */

body.variant-a .topbar-title span {
    color: var(--gold);
    letter-spacing: 1.2px;
    font-family: "JetBrains Mono", monospace;
    font-weight: 500;
    font-size: 9.5px;
}

/* === Compress orbit to ~30vh, /control SCADA panel feel === */

.orbit.scada-hub {
    aspect-ratio: 400 / 280;
    max-height: 38vh;
    background-color: #060d0a;
    background-image:
        /* Outer corner glow */
        radial-gradient(circle at 50% 18%, rgba(61,245,138,0.06) 0%, transparent 42%),
        radial-gradient(circle at 8% 92%, rgba(61,245,138,0.04) 0%, transparent 30%),
        radial-gradient(circle at 92% 92%, rgba(61,245,138,0.04) 0%, transparent 30%),
        /* Vignette */
        radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(0,0,0,0.45) 100%),
        /* Hash grid */
        linear-gradient(0deg,  transparent 23px, rgba(61,245,138,0.05) 23px, rgba(61,245,138,0.05) 24px, transparent 24px),
        linear-gradient(90deg, transparent 23px, rgba(61,245,138,0.05) 23px, rgba(61,245,138,0.05) 24px, transparent 24px),
        /* Base panel color */
        linear-gradient(180deg, #0a1814 0%, #050c09 100%);
    background-size: auto, auto, auto, auto, 24px 24px, 24px 24px, auto;
    border: 1px solid rgba(61,245,138,0.18);
    box-shadow:
        inset 0 1px 0 rgba(61,245,138,0.08),
        inset 0 0 30px rgba(0,0,0,0.5),
        var(--shadow-card);
}

/* Inside-panel screws/marks at corners (subtle, ~3px) */
.orbit.scada-hub::before,
.orbit.scada-hub::after {
    content: "";
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(61,245,138,0.45);
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(61,245,138,0.4);
    z-index: 5;
}
.orbit.scada-hub::before { top: 7px; left: 7px; }
.orbit.scada-hub::after  { top: 7px; right: 7px; }

.orbit.scada-hub .hub {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* === Compact Earth hub === */

@keyframes hub-spin {
    from { transform: translate(200px, 48px) rotate(0deg); }
    to   { transform: translate(200px, 48px) rotate(360deg); }
}
@keyframes hub-breath {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 0.85; }
}

.hub-earth {
    animation: hub-spin 80s linear infinite;
    transform-origin: 0 0;
}
.hub-halo {
    animation: hub-breath 6s ease-in-out infinite;
}

@keyframes hub-anchor {
    0%, 60%, 100% { opacity: 0.45; r: 1.4; }
    70%          { opacity: 1;   r: 2.2; }
}
.hub-anchors .a1 { animation: hub-anchor 7s ease-in-out infinite; }
.hub-anchors .a2 { animation: hub-anchor 9s ease-in-out -1s infinite; }
.hub-anchors .a3 { animation: hub-anchor 11s ease-in-out -2.5s infinite; }
.hub-anchors .a4 { animation: hub-anchor 8s ease-in-out -3s infinite; }
.hub-anchors .a5 { animation: hub-anchor 10s ease-in-out -4s infinite; }
.hub-anchors .a6 { animation: hub-anchor 12s ease-in-out -1.5s infinite; }

/* === SCADA pipes (right-angle, with arrow markers) ===
   Override the base controlv3.css curved-stream defaults. */

.orbit.scada-hub .stream.scada {
    stroke-dasharray: 5 9;
    stroke-dashoffset: 0;
    opacity: 0.7;
    filter: drop-shadow(0 0 3px currentColor);
    stroke-linecap: square;
}

@keyframes scada-flow {
    to { stroke-dashoffset: -180; }
}
.orbit.scada-hub .stream.s-market.scada { stroke: var(--cat-market); animation: scada-flow 6s linear infinite; }
.orbit.scada-hub .stream.s-whales.scada { stroke: var(--cat-whales); animation: scada-flow 9s linear infinite; }
.orbit.scada-hub .stream.s-social.scada { stroke: var(--cat-social); animation: scada-flow 5s linear infinite; }
.orbit.scada-hub .stream.s-news.scada   { stroke: var(--cat-news);   animation: scada-flow 11s linear infinite; }
.orbit.scada-hub .stream.s-macro.scada  { stroke: var(--cat-macro);  animation: scada-flow 12s linear infinite; }
.orbit.scada-hub .stream.s-risk.scada   { stroke: var(--cat-risk);   animation: scada-flow 7s linear infinite; }

.orbit.scada-hub .stream.scada.pulse {
    opacity: 1;
    stroke-width: 3.5;
    filter: drop-shadow(0 0 8px currentColor);
}

/* === Mini-reservoir cylinders at pipe junctions ===
   Each cylinder takes color from its parent .cyl-<cat> class.
   Liquid fill is fixed at 75% (rect y=-3 of -8..11 range = 55% from top).
   Subtle breath animation on liquid surface for "alive" feel. */

.cyl { pointer-events: none; }

.cyl-back   { stroke-width: 0.6; stroke-dasharray: 1.4 2.2; opacity: 0.55; fill: none; }
.cyl-body   { fill: rgba(4,14,10,0.92); stroke-width: 1.1; opacity: 0.92; }
.cyl-liquid { opacity: 0.42; }
.cyl-surface{ opacity: 0.7; stroke-width: 0.7; }
.cyl-rim    { stroke-width: 1.2; }
.cyl-led-svg{ filter: drop-shadow(0 0 2px currentColor); }
.cyl-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 7.5px;
    font-weight: 600;
    letter-spacing: 1.1px;
    paint-order: stroke;
    stroke: rgba(6,13,10,0.85);
    stroke-width: 3;
    stroke-linejoin: round;
}

/* Cylinder colors via currentColor */
.cyl-market { color: var(--cat-market); }
.cyl-whales { color: var(--cat-whales); }
.cyl-social { color: var(--cat-social); }
.cyl-news   { color: var(--cat-news); }
.cyl-macro  { color: var(--cat-macro); }
.cyl-risk   { color: var(--cat-risk); }

.cyl .cyl-back   { stroke: currentColor; }
.cyl .cyl-body   { stroke: currentColor; }
.cyl .cyl-liquid { fill: currentColor; }
.cyl .cyl-surface{ fill: currentColor; stroke: currentColor; }
.cyl .cyl-rim    { stroke: currentColor; }
.cyl .cyl-led-svg{ fill: currentColor; }
.cyl .cyl-label  { fill: currentColor; }

/* === Subtle liquid breath animation per cylinder (staggered) === */

@keyframes cyl-breath {
    0%, 100% { transform: translateY(0)   scaleY(1); opacity: 0.42; }
    50%      { transform: translateY(-0.4px) scaleY(1.06); opacity: 0.55; }
}
@keyframes cyl-surface-breath {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50%      { transform: translateY(-0.4px); opacity: 0.95; }
}

.cyl-market .cyl-liquid   { animation: cyl-breath        6s ease-in-out infinite; transform-origin: center bottom; transform-box: fill-box; }
.cyl-market .cyl-surface  { animation: cyl-surface-breath 6s ease-in-out infinite; transform-box: fill-box; }
.cyl-whales .cyl-liquid   { animation: cyl-breath        7s ease-in-out -1.5s infinite; transform-origin: center bottom; transform-box: fill-box; }
.cyl-whales .cyl-surface  { animation: cyl-surface-breath 7s ease-in-out -1.5s infinite; transform-box: fill-box; }
.cyl-social .cyl-liquid   { animation: cyl-breath        5.5s ease-in-out -2s infinite; transform-origin: center bottom; transform-box: fill-box; }
.cyl-social .cyl-surface  { animation: cyl-surface-breath 5.5s ease-in-out -2s infinite; transform-box: fill-box; }
.cyl-news   .cyl-liquid   { animation: cyl-breath        8s ease-in-out -0.5s infinite; transform-origin: center bottom; transform-box: fill-box; }
.cyl-news   .cyl-surface  { animation: cyl-surface-breath 8s ease-in-out -0.5s infinite; transform-box: fill-box; }
.cyl-macro  .cyl-liquid   { animation: cyl-breath        6.5s ease-in-out -3s infinite; transform-origin: center bottom; transform-box: fill-box; }
.cyl-macro  .cyl-surface  { animation: cyl-surface-breath 6.5s ease-in-out -3s infinite; transform-box: fill-box; }
.cyl-risk   .cyl-liquid   { animation: cyl-breath        5s ease-in-out -2.5s infinite; transform-origin: center bottom; transform-box: fill-box; }
.cyl-risk   .cyl-surface  { animation: cyl-surface-breath 5s ease-in-out -2.5s infinite; transform-box: fill-box; }

/* LED on cylinder top — gentle blink */
@keyframes cyl-led-blink {
    0%, 65%, 100% { opacity: 0.55; }
    72%           { opacity: 1; filter: drop-shadow(0 0 5px currentColor); }
}
.cyl-market .cyl-led-svg { animation: cyl-led-blink 4.5s ease-in-out infinite; }
.cyl-whales .cyl-led-svg { animation: cyl-led-blink 6s ease-in-out -1s infinite; }
.cyl-social .cyl-led-svg { animation: cyl-led-blink 4s ease-in-out -2s infinite; }
.cyl-news   .cyl-led-svg { animation: cyl-led-blink 7s ease-in-out -0.5s infinite; }
.cyl-macro  .cyl-led-svg { animation: cyl-led-blink 5.5s ease-in-out -3s infinite; }
.cyl-risk   .cyl-led-svg { animation: cyl-led-blink 4.8s ease-in-out -1.5s infinite; }

/* === Hub label (matches /control engineering aesthetic) === */

.hub-label {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    font-family: "JetBrains Mono", monospace;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 1.2px;
    color: #3df58a;
    text-transform: uppercase;
    background: rgba(6,13,10,0.85);
    padding: 3px 9px;
    border-radius: 3px;
    border: 1px solid rgba(61,245,138,0.35);
    z-index: 3;
    pointer-events: none;
    text-shadow: 0 0 4px rgba(61,245,138,0.3);
}

/* === Tighten gap + engineering-green agent cards (V3a only) === */

body.variant-a {
    background:
        radial-gradient(ellipse at top center, rgba(61,245,138,0.03) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(61,245,138,0.02) 0%, transparent 50%),
        #050c09;
}

body.variant-a .stage { gap: 10px; }

/* Override warm-brown card background → /control engineering-green panel */
body.variant-a .agent {
    position: relative;
    background:
        radial-gradient(circle at 20% 25%, rgba(61,245,138,0.04) 0%, transparent 50%),
        linear-gradient(180deg, #0d1d18 0%, #07120d 100%);
    border: 1px solid rgba(61,245,138,0.18);
    box-shadow:
        inset 0 1px 0 rgba(61,245,138,0.05),
        inset 0 0 16px rgba(0,0,0,0.4),
        var(--shadow-card);
}
body.variant-a .agent:hover { border-color: rgba(61,245,138,0.35); }

/* Category color border (left edge) stays — visual continuity with pipes */
body.variant-a .agent[data-cat="market"] { border-left: 3px solid var(--cat-market); }
body.variant-a .agent[data-cat="whales"] { border-left: 3px solid var(--cat-whales); }
body.variant-a .agent[data-cat="social"] { border-left: 3px solid var(--cat-social); }
body.variant-a .agent[data-cat="news"]   { border-left: 3px solid var(--cat-news); }
body.variant-a .agent[data-cat="macro"]  { border-left: 3px solid var(--cat-macro); }
body.variant-a .agent[data-cat="risk"]   { border-left: 3px solid var(--cat-risk); }

/* Portrait frame in cyan-green tint (matches panel) */
body.variant-a .agent-portrait {
    border: 1px solid rgba(61,245,138,0.25);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.5);
}

/* Agent meta text — slight cyan-green tint on domain line */
body.variant-a .agent-domain {
    color: rgba(170,210,190,0.75);
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    letter-spacing: 0.3px;
}

/* PIPE-IN marker at top-center of each agent (existing) */
body.variant-a .agent::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background: currentColor;
    color: rgba(61,245,138,0.4);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 0 7px currentColor;
    opacity: 0.85;
    z-index: 2;
}
body.variant-a .agent[data-cat="market"]::before { color: var(--cat-market); }
body.variant-a .agent[data-cat="whales"]::before { color: var(--cat-whales); }
body.variant-a .agent[data-cat="social"]::before { color: var(--cat-social); }
body.variant-a .agent[data-cat="news"]::before   { color: var(--cat-news); }
body.variant-a .agent[data-cat="macro"]::before  { color: var(--cat-macro); }
body.variant-a .agent[data-cat="risk"]::before   { color: var(--cat-risk); }

/* Override warm idle pulse animation on agent cards */
body.variant-a .agent { animation: variant-a-idle 6s ease-in-out infinite; }
@keyframes variant-a-idle {
    0%, 100% {
        box-shadow:
            inset 0 1px 0 rgba(61,245,138,0.05),
            inset 0 0 16px rgba(0,0,0,0.4),
            var(--shadow-card);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(61,245,138,0.1),
            inset 0 0 18px rgba(0,0,0,0.3),
            0 0 12px rgba(61,245,138,0.06),
            var(--shadow-card);
    }
}

/* Professor bar — also engineering-tint */
body.variant-a .professor {
    background:
        radial-gradient(circle at 15% 50%, rgba(61,245,138,0.06) 0%, transparent 55%),
        linear-gradient(135deg, rgba(45,106,79,0.22) 0%, rgba(7,18,13,0.85) 100%);
    border: 1px solid rgba(61,245,138,0.28);
}
body.variant-a .prof-label { color: #3df58a; }
body.variant-a .prof-portrait {
    border: 1.5px solid rgba(61,245,138,0.6);
}
body.variant-a .prof-why {
    border: 1px solid rgba(61,245,138,0.55);
    background: rgba(61,245,138,0.1);
    color: #3df58a;
}
body.variant-a .prof-why:hover {
    background: #3df58a;
    color: #050c09;
}

/* === Responsive: desktop refinement === */

@media (min-width: 720px) {
    .orbit.scada-hub {
        aspect-ratio: 720 / 220;
        max-height: 220px;
    }
}

@media (min-width: 1100px) {
    .orbit.scada-hub {
        aspect-ratio: 1080 / 240;
        max-height: 240px;
    }
}