/*
 * Pewarnaan titik timeline milestone per status.
 * `data-milestone-status` ditempel di Stack kartu (MilestonesTimelineRelationManager),
 * lalu dibaca dari luar kartu pakai :has() karena paket timeline tidak menyediakan
 * hook per-record untuk titiknya.
 */

.ftv-item:has([data-milestone-status='not_started']) {
    --milestone-color: var(--gray-400);
}

.ftv-item:has([data-milestone-status='on_progress']) {
    --milestone-color: var(--warning-500);
    --ftv-card-ring: color-mix(in oklab, var(--warning-500) 45%, transparent);
}

.ftv-item:has([data-milestone-status='done']) {
    --milestone-color: var(--success-500);
}

.ftv-item:has([data-milestone-status]) .ftv-item-dot {
    background: var(--milestone-color);
}

/* Yang sedang berjalan berdenyut supaya langsung kelihatan. */
.ftv-item:has([data-milestone-status='on_progress']) .ftv-item-dot {
    animation: milestone-pulse 1.8s ease-out infinite;
}

/* Yang belum mulai sengaja diredupkan. */
.ftv-item:has([data-milestone-status='not_started']) .ftv-card {
    opacity: 0.75;
}

@keyframes milestone-pulse {
    0% {
        box-shadow:
            0 0 0 4px var(--ftv-dot-halo),
            0 0 0 0 color-mix(in oklab, var(--warning-500) 55%, transparent);
    }

    70% {
        box-shadow:
            0 0 0 4px var(--ftv-dot-halo),
            0 0 0 9px color-mix(in oklab, var(--warning-500) 0%, transparent);
    }

    100% {
        box-shadow:
            0 0 0 4px var(--ftv-dot-halo),
            0 0 0 0 color-mix(in oklab, var(--warning-500) 0%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ftv-item:has([data-milestone-status='on_progress']) .ftv-item-dot {
        animation: none;
    }
}