/* =========================================================
   ABOUT — DATA VISUAL
   ========================================================= */

.about-data-visual {
    --about-visual-navy-deep: #162235;
    --about-visual-navy-mid: #334155;
    --about-visual-slate: #6b7280;
    --about-visual-slate-soft: #9aa3af;

    --about-visual-accent: #8b2c2c;
    --about-visual-accent-deep: #6f2020;
    --about-visual-accent-light: #b46a6a;

    --about-visual-ring: rgba(22, 34, 53, 0.055);
    --about-visual-guide: rgba(51, 65, 85, 0.075);

    width: min(420px, 100%);
    aspect-ratio: 1 / 1;

    display: block;
    overflow: visible;
}


/* =========================================================
   FRAME
   ========================================================= */

.about-data-visual__frame {
    fill: url(#aboutFrameGradient);

    stroke: rgba(22, 34, 53, 0.08);
    stroke-width: 1;

    filter: drop-shadow(
        0 10px 24px rgba(22, 34, 53, 0.055)
    );
}


/* =========================================================
   GUIDE LINES
   ========================================================= */

.about-data-visual__guide {
    fill: none;

    stroke: var(--about-visual-guide);
    stroke-width: 0.8;
    stroke-dasharray: 2 9;

    vector-effect: non-scaling-stroke;
}


/* =========================================================
   ANALYTICAL CURVE
   ========================================================= */

.about-data-visual__curve {
    fill: none;

    stroke: url(#aboutCurveGradient);

    stroke-linecap: round;
    stroke-linejoin: round;

    vector-effect: non-scaling-stroke;
}


/* =========================================================
   DATA POINTS
   ========================================================= */

.about-data-visual__point {
    transform-box: fill-box;
    transform-origin: center;
}


/* =========================================================
   DISCOVERED POINT HALOS
   ========================================================= */

.about-data-visual__halo {
    fill: none;

    stroke: rgba(139, 44, 44, 0.26);
    stroke-width: 1.4;

    vector-effect: non-scaling-stroke;
    pointer-events: none;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {
    .about-data-visual {
        width: min(320px, 86vw);
    }
}