/* Shared Dev: the one moment of motion. On load the marks of the home cluster drop into place one after
   another and the large page-head mark drops in; a cluster mark lifts on hover. With
   prefers-reduced-motion: reduce none of this applies, so nothing moves. */

@media (prefers-reduced-motion: no-preference) {
    .sd-cluster a,
    .sd-phead > .sd-mark { animation: sd-drop 0.7s cubic-bezier(0.2, 1.3, 0.4, 1) both; }

    .sd-cluster a:nth-child(4) { animation-delay: 0.05s; }
    .sd-cluster a:nth-child(5) { animation-delay: 0.18s; }
    .sd-cluster a:nth-child(6) { animation-delay: 0.31s; }
    .sd-cluster a:nth-child(2) { animation-delay: 0.48s; }
    .sd-cluster a:nth-child(3) { animation-delay: 0.61s; }
    .sd-cluster a:nth-child(1) { animation-delay: 0.8s; }

    .sd-cluster .sd-mark { transition: transform 0.25s ease; }
    .sd-cluster a:hover .sd-mark,
    .sd-cluster a:focus-visible .sd-mark { transform: translateY(-6px); }

    .sd-cluster span { transition: opacity 0.2s; }

    @keyframes sd-drop {
        from { transform: translateY(-140%); opacity: 0; }
        60% { opacity: 1; }
        to { transform: none; opacity: 1; }
    }
}