/**
 *  CHART CSS
 */

svg.svg-chart{ 
    overflow:               visible;
    pointer-events:         all;
    max-width:              100%; 
    height:                 auto;


    /* GENERAL */
    .hidden {
        opacity: 0;
    }

    text {
        font-family: "League Spartan", sans-serif;
        fill:        var(--color-light);
        font-size:   20px;
    }

    /* AXIS */
    .x-axis .tick line {
        display: none;
    }
    .x-axis .tick{
        opacity:        0.35;
    }
    .domain {
        visibility:     hidden;
    }

    /** NODES **/
    .conflict-node {
        transition:     opacity 0.2s ease;

        circle {
            fill:         none;
            stroke:       #ffffff;
            transition:   opacity 0.2s ease;
        }

        .conflict-outer {
            fill:         none;
            stroke-width: 1.5;
        }

        .conflict-ring {
            fill:         none;
            stroke-width: 1.25;
        }

        .conflict-ring.region-hidden {
            opacity:        0;
        }
    }

    .disaster-node {
        isolation:          isolate;
        transition:         opacity 0.2s ease;
    }

    /** NODE OPACITY STATES
     *  Order matters here — more specific states override less specific ones
     *  Default (no state active): 0.75
     *  Region active:             contributing 0.9, non-contributing 0.15
     *  Playback active:           current 1.0, others 0.15
     *  Type active:               contributing 0.9, others 0.04
     *  Combined states handled at the bottom
     **/

    /* DEFAULT */
    .node-layer {
        .conflict-node,
        .disaster-node { opacity: 0.75; }
    }

    .node-layer:not(.playback-active) {
        .disaster-node.below-threshold {
            opacity:        0.3;
        }
    }

    /* REGION ONLY */
    .node-layer.region-active {
        .conflict-node,
        .disaster-node {
            opacity:        0.15;
            pointer-events: none;
        }

        .conflict-node.region-contributing,
        .disaster-node.region-contributing {
            opacity:        0.9;
            pointer-events: all;
        }
    }

    /* TYPE ONLY */
    .node-layer.type-active {
        .conflict-node,
        .disaster-node { opacity: 0.04; }

        .conflict-node.type-contributing,
        .disaster-node.type-contributing { opacity: 0.9; }
    }

    /* PLAYBACK ONLY */
    .node-layer.playback-active {
        .conflict-node,
        .disaster-node { opacity: 0.15; }

        .conflict-node.playback-active,
        .disaster-node.playback-active { opacity: 1; }
    }

    /* REGION + PLAYBACK */
    .node-layer.region-active.playback-active {
        .conflict-node,
        .disaster-node {
            opacity:        0.05;
            pointer-events: none;
        }

        .conflict-node.region-contributing,
        .disaster-node.region-contributing {
            opacity:        0.15;
            pointer-events: all;
        }

        .conflict-node.region-contributing.playback-active,
        .disaster-node.region-contributing.playback-active {
            opacity: 1;
        }
    }

    /* REGION + TYPE */
    .node-layer.region-active.type-active {
        .conflict-node,
        .disaster-node { opacity: 0.04; }

        .conflict-node.region-contributing.type-contributing,
        .disaster-node.region-contributing.type-contributing { opacity: 0.9; }
    }

    /* PLAYBACK + TYPE */
    .node-layer.playback-active.type-active {
        .conflict-node,
        .disaster-node { opacity: 0.04; }

        .conflict-node.playback-active.type-contributing,
        .disaster-node.playback-active.type-contributing { opacity: 1; }
    }

    /* REGION + PLAYBACK + TYPE */
    .node-layer.region-active.playback-active.type-active {
        .conflict-node,
        .disaster-node { opacity: 0.04; }

        .conflict-node.region-contributing.playback-active.type-contributing,
        .disaster-node.region-contributing.playback-active.type-contributing { opacity: 1; }
    }

    /** LEGEND **/
    .legend-group {
        .legend-from, 
        .legend-ampersand {
            opacity: 0.5;
            transition: opacity 0.4s ease;
        }

        .legend-item {
            transition: opacity 0.4s ease;
            cursor: pointer;

            circle {
                opacity: 0.6;
                stroke: none;
            }

            circle.conflict {
                fill: none;
                stroke: white;
                stroke-width: 1.5;
            }

            text {
                fill: #cccccc;
                font-size: 28px;
                dominant-baseline: middle;
            }
        }

        .legend-ampersand {
            font-size: 28px;
        }

        .legend-title {
            font-size: 28px;
            opacity: 0.5;
            font-style: italic;
            text-anchor: start;
            dominant-baseline: middle;
            transition: opacity 0.4s ease;
        }

        .legend-item text {
            dominant-baseline: middle;
        }

        .legend-summary {
            transition: opacity 0.4s ease;

            .legend-summary-label {
                fill: rgba(255, 255, 255, 0.7);
                font-size: 28px;
                dominant-baseline: middle;
                cursor: pointer;
            }

            path {
                opacity: 0.75;
            }
        }

        .legend-toggle-group {
            cursor: pointer;
             pointer-events: bounding-box;
            path {
                fill: rgba(255, 255, 255, 0.5);
                transition: fill 0.2s ease;
            }
        }

        /* FADED STATE — all fadeable elements */
        .legend-item.region-faded,
        .legend-summary.region-faded,
        .legend-from.region-faded,
        .legend-ampersand.region-faded,
        .legend-title.region-faded {
            opacity: 0.1 !important;
            pointer-events: none;
        }
    }

    .chart-header {
        font-family: "Sankofa Display", sans-serif;
        font-size:      48px;
        fill:           rgba(255, 255, 255, 0.9);
        letter-spacing: 0.1em;
        text-transform: lowercase;
        text-anchor:    middle;
        opacity:        0;
    }

    /** STREAMGRAPH **/
    .stock-area {
        stroke:      rgba(0, 0, 0, 0.5);
        stroke-width: 1;
        opacity:      0.75;
        transition:   opacity 0.2s ease, stroke 0.2s ease;

        &hover{
            stroke:      rgba(255, 255, 255, 0.75);
            stroke-width: 5;
        }
    }

    .stock-label {
        opacity:    1;
        transition: opacity 0.2s ease;
        cursor:     pointer;
    }

    .stock-axis {
        stroke:       rgba(255,255,255,0.2);
        stroke-width: 1;
    }

    .stock-group.region-active {
        .stock-area {
            opacity: 0.15;
            stroke:  rgba(255,255,255,0.1);
        }

        .stock-area.region-contributing {
            opacity: 1;
            stroke:  rgba(255,255,255,0.8);
        }

        .stock-label { opacity: 0.2; }

        .stock-label.region-contributing { opacity: 1; }
    }

    /** SONIFICATION **/
    .sonic-marker-group {
        .step, .step-annual {
            fill:           #fff;
            opacity:        0;
            pointer-events: none;
        }
       .step{
            transition:     all 100ms;
            mix-blend-mode: overlay;
        }
        .step-annual {
            transition:     all 800ms;
            mix-blend-mode: overlay;
        }
        .step.active, .step-annual.active {
            opacity:     0.5;
        }
    }
}


/** HTML TOOLTIP **/
.chart__wrapper {
    position: relative;

    .vis-tooltip {
        position:      absolute;
        pointer-events: none;
        opacity:        0;
        background:     rgba(15, 15, 20, 0.92);
        border:         0.5px solid rgba(255, 255, 255, 0.15);
        border-radius:  8px;
        padding:        10px 14px;
        font-size:      12px;
        color:          #e0e0e0;
        line-height:    1.7;
        width:          220px;
        z-index:        10;
        transition:     opacity 0.15s ease;
    }

    .vis-tooltip .tt-type {
        font-size:     14px;
        font-weight: 700;
        text-transform: uppercase;
        opacity:       0.8;
        margin-bottom: 4px;
    }

    .vis-tooltip .tt-value {
        font-size:   15px;
        font-weight: 500;
        color:       #ffffff;
    }

    .vis-tooltip .tt-meta {
        font-size: 11px;
        opacity:   0.5;
    }

    .vis-tooltip .tt-divider {
        border:     none;
        border-top: 0.5px solid rgba(255, 255, 255, 0.1);
        margin:     6px 0;
    }

    .vis-tooltip .tt-date {
        font-size: 11px;
        color:     #e0e0e0;
    }

    .vis-tooltip .tt-countries {
        font-size:  11px;
        opacity:    0.7;
        margin-top: 3px;
    }
}