/* AM Nusantara - Section art (line-art backgrounds added by art.js) */

.has-art {
    position: relative;
    overflow: hidden;
    isolation: isolate; /* keeps the art above the section background, below its content */
}

.section-art {
    --art-color: var(--accent-gold);
    --art-opacity: 0.45;
    position: absolute;
    z-index: -1;
    pointer-events: none;
    color: var(--art-color);
    opacity: 0;
    transition: opacity 1.8s ease;
}

.section-art.is-shown { opacity: var(--art-opacity); }

.section-light > .section-art { --art-color: var(--accent-gold-dark); --art-opacity: 0.5; }
[data-theme="light"] .section-art { --art-color: var(--accent-gold-dark); --art-opacity: 0.4; }

.section-art svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.section-art path,
.section-art line,
.section-art circle {
    stroke: currentColor;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.section-art .art-dot,
.section-art .art-grid circle,
.section-art .art-nodes circle {
    fill: currentColor;
    stroke: none;
}

.section-art .art-grid { opacity: 0.35; }

/* ---------- Placement ----------
 * Headings sit on the left, so the art lives in the open space at the top right,
 * nudged to alternate heights so consecutive pieces do not line up.
 */
.art-contours,
.art-ripple,
.art-orbit,
.art-archipelago {
    top: -140px;
    right: -6%;
    width: min(680px, 52vw);
    aspect-ratio: 1;
    -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent);
    mask-image: radial-gradient(closest-side, #000 58%, transparent);
}

.art-left { top: -60px; right: -2%; }

.art-archipelago {
    aspect-ratio: 800 / 560;
    -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent);
    mask-image: radial-gradient(closest-side, #000 50%, transparent);
}

.art-waves,
.art-candles,
.art-plot {
    left: 0;
    right: 0;
    bottom: 0;
    height: 280px;
    --art-opacity: 0.32;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.section-light > .art-waves,
.section-light > .art-candles,
.section-light > .art-plot { --art-opacity: 0.42; }

.art-candles,
.art-plot { --art-opacity: 0.4; height: 240px; }

/* Strips on the "left" turn sit along the top edge instead, fading downwards */
.art-waves.art-left,
.art-candles.art-left,
.art-plot.art-left {
    top: 0;
    bottom: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent), linear-gradient(#000 65%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent), linear-gradient(#000 65%, transparent);
    mask-composite: intersect;
}

.section-art .art-body { stroke-width: 5; stroke-opacity: 0.35; }
.section-art .art-body.is-up { stroke-opacity: 0.85; }
.section-art .art-area { fill: currentColor; fill-opacity: 0.07; stroke: none; }

@media (max-width: 760px) {
    .art-contours,
    .art-ripple,
    .art-orbit,
    .art-archipelago {
        top: -90px;
        right: -40%;
        width: 110vw;
    }
    .section-art { --art-opacity: 0.24; }
    .art-waves,
    .art-candles,
    .art-plot { height: 160px; }
}

/* ---------- Movement (slow, and only while on screen) ---------- */
@media (prefers-reduced-motion: no-preference) {
    .section-art .art-spin { transform-origin: 400px 400px; animation: art-rotate 240s linear infinite; }
    .section-art .art-spin-slow { transform-origin: 400px 400px; animation: art-rotate 360s linear infinite reverse; }

    .section-art .art-orbiter { transform-origin: 400px 400px; animation: art-rotate 48s linear infinite; }
    .section-art .art-orbiter-reverse { animation-duration: 90s; animation-direction: reverse; }
    .section-art .art-orbiter-fast { animation-duration: 26s; }

    .section-art .art-nodes circle {
        transform-box: fill-box;
        transform-origin: center;
        animation: art-pulse 6s ease-in-out infinite;
    }

    .section-art .art-links line {
        stroke-dasharray: 3 7;
        animation: art-dash 24s linear infinite;
    }

    .section-art .art-flow { animation: art-flow 46s linear infinite; }

    .section-art .art-dot { animation: art-glow 5s ease-in-out infinite; }

    /* Candles: the tape slides by, and bodies flicker like live prints */
    .section-art .art-tape { animation: art-tape 90s linear infinite; }
    .section-art .art-body { animation: art-print 5.6s ease-in-out infinite; }

    /* Plot: the line draws in once, then a cursor keeps reading across it */
    .section-art .art-reveal { transform: scaleX(0); transform-box: fill-box; transform-origin: left; }
    .section-art.is-shown .art-reveal { transform: scaleX(1); transition: transform 3.2s cubic-bezier(.65, 0, .35, 1) .3s; }
    /* Ripples: rings grow from the centre and fade as they reach the edge */
    .section-art .art-ring {
        transform-origin: 400px 400px;
        animation: art-ripple 18s linear infinite;
    }

    .section-art .art-scan { animation: art-scan 14s cubic-bezier(.45, 0, .55, 1) infinite; }

    .section-art:not(.is-running) * { animation-play-state: paused !important; }
}

@keyframes art-rotate { to { transform: rotate(360deg); } }
@keyframes art-flow { to { transform: translateX(-800px); } }
@keyframes art-ripple {
    0% { transform: scale(.08); stroke-opacity: 0; }
    15% { stroke-opacity: .9; }
    100% { transform: scale(1); stroke-opacity: 0; }
}
@keyframes art-tape { to { transform: translateX(-1600px); } }
@keyframes art-print {
    0%, 100% { stroke-opacity: var(--print-from, 0.35); }
    50% { stroke-opacity: 0.95; }
}
@keyframes art-scan {
    0% { transform: translateX(0); opacity: 0; }
    8%, 92% { opacity: 1; }
    100% { transform: translateX(1600px); opacity: 0; }
}
@keyframes art-dash { to { stroke-dashoffset: -200; } }
@keyframes art-pulse {
    0%, 100% { opacity: 0.35; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.5); }
}
@keyframes art-glow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}