@keyframes nc-blip {
        0%, 100% {
            opacity: 1;
        }

        50% {
            opacity: .35;
        }
    }

    @keyframes nc-dawn-sweep {
        0%, 56% {
            background-position: 0% 0;
        }

        64%, 94% {
            background-position: 100% 0;
        }

        95%, 100% {
            background-position: 0% 0;
        }
    }

    @keyframes nc-wash {
        0%, 88% {
            opacity: 0;
        }

        93%, 96% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

    @keyframes nc-press {
        0%, 3.2% {
            transform: none;
            filter: none;
        }

        4.3% {
            transform: scale(.955);
            filter: brightness(.86);
        }

        5.8%, 100% {
            transform: none;
            filter: none;
        }
    }

    @keyframes nc-day-in {
        0%, 58% {
            opacity: 0;
        }

        64%, 94% {
            opacity: 1;
        }

        95%, 100% {
            opacity: 0;
        }
    }

    @keyframes nc-night-out {
        0%, 58% {
            opacity: 1;
        }

        64%, 94% {
            opacity: 0;
        }

        95%, 100% {
            opacity: 1;
        }
    }

    @keyframes nc-crew-press {
        0%, 27% {
            transform: none;
            filter: none;
        }

        28.2% {
            transform: scale(.95);
            filter: brightness(.88);
        }

        29.6%, 100% {
            transform: none;
            filter: none;
        }
    }

    @keyframes nc-march {
        0%, 7.5% {
            left: .8%;
        }

        29.29% {
            left: 6.5%;
        }

        32.14% {
            left: 22.3%;
        }

        35.36% {
            left: 32.9%;
        }

        38.21% {
            left: 63.5%;
        }

        42.5% {
            left: 90%;
        }

        63.57%, 94% {
            left: 100%;
        }

        95%, 100% {
            left: .8%;
        }
    }

    /* ============================================================
       Client activity
       ============================================================ */

    @keyframes nc-f1 {
        0%, 7.5% {
            opacity: 0;
            transform: translateY(6px);
        }

        10.71%, 94% {
            opacity: 1;
            transform: none;
        }

        95%, 100% {
            opacity: 0;
            transform: translateY(6px);
        }
    }

    @keyframes nc-f2 {
        0%, 14.29% {
            opacity: 0;
            transform: translateY(6px);
        }

        17.5%, 94% {
            opacity: 1;
            transform: none;
        }

        95%, 100% {
            opacity: 0;
            transform: translateY(6px);
        }
    }

    @keyframes nc-f3 {
        0%, 35.36% {
            opacity: 0;
            transform: translateY(6px);
        }

        38.57%, 94% {
            opacity: 1;
            transform: none;
        }

        95%, 100% {
            opacity: 0;
            transform: translateY(6px);
        }
    }

    @keyframes nc-f4 {
        0%, 48.93% {
            opacity: 0;
            transform: translateY(6px);
        }

        52.14%, 94% {
            opacity: 1;
            transform: none;
        }

        95%, 100% {
            opacity: 0;
            transform: translateY(6px);
        }
    }

    /* ============================================================
       Office log activity
       ============================================================ */

    @keyframes nc-l1 {
        0%, 11.07% {
            opacity: 0;
            transform: translateY(6px);
        }

        14.29%, 94% {
            opacity: 1;
            transform: none;
        }

        95%, 100% {
            opacity: 0;
            transform: translateY(6px);
        }
    }

    @keyframes nc-l2 {
        0%, 16.79% {
            opacity: 0;
            transform: translateY(6px);
        }

        20%, 94% {
            opacity: 1;
            transform: none;
        }

        95%, 100% {
            opacity: 0;
            transform: translateY(6px);
        }
    }

    @keyframes nc-l3 {
        0%, 21.07% {
            opacity: 0;
            transform: translateY(6px);
        }

        24.29%, 94% {
            opacity: 1;
            transform: none;
        }

        95%, 100% {
            opacity: 0;
            transform: translateY(6px);
        }
    }

    @keyframes nc-l4 {
        0%, 45.36% {
            opacity: 0;
            transform: translateY(6px);
        }

        48.57%, 94% {
            opacity: 1;
            transform: none;
        }

        95%, 100% {
            opacity: 0;
            transform: translateY(6px);
        }
    }

    @keyframes nc-l5 {
        0%, 52.5% {
            opacity: 0;
            transform: translateY(6px);
        }

        55.71%, 94% {
            opacity: 1;
            transform: none;
        }

        95%, 100% {
            opacity: 0;
            transform: translateY(6px);
        }
    }

    /* ============================================================
       Crew / invitation activity
       ============================================================ */

    @keyframes nc-crew-in {
        0%, 20.36% {
            opacity: 0;
            transform: translateY(8px);
        }

        23.57%, 94% {
            opacity: 1;
            transform: none;
        }

        95%, 100% {
            opacity: 0;
            transform: translateY(8px);
        }
    }

    @keyframes nc-invite-in {
        0%, 22.14% {
            opacity: 0;
            transform: translateY(6px);
        }

        25.36%, 94% {
            opacity: 1;
            transform: none;
        }

        95%, 100% {
            opacity: 0;
            transform: translateY(6px);
        }
    }

    @keyframes nc-push {
        0%, 56.79% {
            opacity: 0;
            transform: translateY(-12px);
        }

        60%, 94% {
            opacity: 1;
            transform: none;
        }

        95%, 100% {
            opacity: 0;
            transform: translateY(-12px);
        }
    }

    @keyframes nc-row {
        0%, 23.93% {
            opacity: 0;
            transform: translateY(4px);
        }

        27.14%, 94% {
            opacity: 1;
            transform: none;
        }

        95%, 100% {
            opacity: 0;
            transform: translateY(4px);
        }
    }

    @keyframes nc-buttons {
        0%, 27.14% {
            opacity: 1;
        }

        29.29%, 94.9% {
            opacity: 0;
        }

        95%, 100% {
            opacity: 1;
        }
    }

    @keyframes nc-done {
        0%, 29.29% {
            opacity: 0;
        }

        31.43%, 94% {
            opacity: 1;
        }

        95%, 100% {
            opacity: 0;
        }
    }

    /* ============================================================
       Crew member status transitions
       ============================================================ */

    @keyframes nc-c1-s1 {
        0%, 24.29% { opacity: 1; }
        26.43%, 94.9% { opacity: 0; }
        95%, 100% { opacity: 1; }
    }

    @keyframes nc-c1-s2 {
        0%, 26.43% { opacity: 0; }
        28.57% { opacity: 1; }
        29.29%, 100% { opacity: 0; }
    }

    @keyframes nc-c1-s3 {
        0%, 29.29% { opacity: 0; }
        31.43%, 94% { opacity: 1; }
        95%, 100% { opacity: 0; }
    }

    @keyframes nc-c2-s1 {
        0%, 26.07% { opacity: 1; }
        28.21%, 94.9% { opacity: 0; }
        95%, 100% { opacity: 1; }
    }

    @keyframes nc-c2-s2 {
        0%, 28.21% { opacity: 0; }
        30.36% { opacity: 1; }
        32.14%, 100% { opacity: 0; }
    }

    @keyframes nc-c2-s3 {
        0%, 32.14% { opacity: 0; }
        34.29%, 94% { opacity: 1; }
        95%, 100% { opacity: 0; }
    }

    @keyframes nc-c3-s1 {
        0%, 28.57% { opacity: 1; }
        30.71%, 94.9% { opacity: 0; }
        95%, 100% { opacity: 1; }
    }

    @keyframes nc-c3-s2 {
        0%, 30.71% { opacity: 0; }
        32.86%, 36.07% { opacity: 1; }
        38.21%, 100% { opacity: 0; }
    }

    @keyframes nc-c3-s3 {
        0%, 38.21% { opacity: 0; }
        40.36%, 94% { opacity: 1; }
        95%, 100% { opacity: 0; }
    }

    @keyframes nc-c4-s1 {
        0%, 32.14% { opacity: 1; }
        34.29%, 94.9% { opacity: 0; }
        95%, 100% { opacity: 1; }
    }

    @keyframes nc-c4-s2 {
        0%, 34.29% { opacity: 0; }
        36.43%, 40.36% { opacity: 1; }
        42.5%, 100% { opacity: 0; }
    }

    @keyframes nc-c4-s3 {
        0%, 42.5% { opacity: 0; }
        44.64%, 94% { opacity: 1; }
        95%, 100% { opacity: 0; }
    }

    @keyframes nc-avatar {
        0%, 29.29% {
            background: #E1F0FD;
            color: #085F9C;
        }

        31.43%, 94% {
            background: #E7F6F0;
            color: #0E9566;
        }

        95%, 100% {
            background: #E1F0FD;
            color: #085F9C;
        }
    }

    /* ============================================================
       Clock animation
       ============================================================ */

    @keyframes nc-clock-1 {
        0%, 26.79% { opacity: 1; }
        28.93%, 94.9% { opacity: 0; }
        95%, 100% { opacity: 1; }
    }

    @keyframes nc-clock-2 {
        0%, 28.93% { opacity: 0; }
        31.07% { opacity: 1; }
        31.79%, 100% { opacity: 0; }
    }

    @keyframes nc-clock-3 {
        0%, 31.79% { opacity: 0; }
        33.93% { opacity: 1; }
        35%, 100% { opacity: 0; }
    }

    @keyframes nc-clock-4 {
        0%, 35% { opacity: 0; }
        37.14% { opacity: 1; }
        37.86%, 100% { opacity: 0; }
    }

    @keyframes nc-clock-5 {
        0%, 37.86% { opacity: 0; }
        40% { opacity: 1; }
        42.14%, 100% { opacity: 0; }
    }

    @keyframes nc-clock-6 {
        0%, 42.14% { opacity: 0; }
        44.29%, 61.43% { opacity: 1; }
        63.57%, 100% { opacity: 0; }
    }

    @keyframes nc-clock-7 {
        0%, 63.57% { opacity: 0; }
        65.71%, 94% { opacity: 1; }
        95%, 100% { opacity: 0; }
    }


    /* ============================================================
       Animation bindings
       ============================================================ */

    .nc-night-body {
        background:
            linear-gradient(
                100deg,
                #060F26 0%,
                #0A1836 20%,
                #122550 42%,
                #1B3467 60%,
                #20447F 76%,
                #2E5794 90%,
                #3E6FB0 100%
            );

        background-size: 200% 100%;
        background-position: 0 0;
        animation: nc-dawn-sweep 14s ease-in-out infinite;
    }

    .nc-wash {
        animation: nc-wash 14s linear infinite;
    }

    .nc-live-dot {
        animation: nc-blip 2.4s infinite;
    }

    .nc-submit {
        animation: nc-press 14s ease infinite;
    }

    .nc-night-state {
        animation: nc-night-out 14s ease infinite;
    }

    .nc-day-state {
        animation: nc-day-in 14s ease infinite;
    }

    .nc-f1 {
        animation: nc-f1 14s ease infinite;
    }

    .nc-f2 {
        animation: nc-f2 14s ease infinite;
    }

    .nc-f3 {
        animation: nc-f3 14s ease infinite;
    }

    .nc-f4 {
        animation: nc-f4 14s ease infinite;
    }

    .nc-l1 {
        animation: nc-l1 14s ease infinite;
    }

    .nc-l2 {
        animation: nc-l2 14s ease infinite;
    }

    .nc-l3 {
        animation: nc-l3 14s ease infinite;
    }

    .nc-l4 {
        animation: nc-l4 14s ease infinite;
    }

    .nc-l5 {
        animation: nc-l5 14s ease infinite;
    }

    .nc-crew {
        animation: nc-crew-in 14s ease infinite;
    }

    .nc-invitation {
        animation: nc-invite-in 14s ease infinite;
    }

    .nc-push,
    .nc-phone-scrim {
        animation: nc-push 14s ease infinite;
    }

    .nc-crew-row {
        animation: nc-row 14s ease infinite;
    }

    .nc-accept-buttons {
        animation: nc-buttons 14s linear infinite;
    }

    .nc-accepted {
        animation: nc-done 14s linear infinite;
    }

    .nc-accept-button {
        animation: nc-crew-press 14s ease infinite;
    }


    /* Crew 1 */

    .nc-c1 .nc-s1 {
        animation: nc-c1-s1 14s linear infinite;
    }

    .nc-c1 .nc-s2 {
        animation: nc-c1-s2 14s linear infinite;
    }

    .nc-c1 .nc-s3 {
        animation: nc-c1-s3 14s linear infinite;
    }


    /* Crew 2 */

    .nc-c2 .nc-s1 {
        animation: nc-c2-s1 14s linear infinite;
    }

    .nc-c2 .nc-s2 {
        animation: nc-c2-s2 14s linear infinite;
    }

    .nc-c2 .nc-s3 {
        animation: nc-c2-s3 14s linear infinite;
    }


    /* Crew 3 */

    .nc-c3 .nc-s1 {
        animation: nc-c3-s1 14s linear infinite;
    }

    .nc-c3 .nc-s2 {
        animation: nc-c3-s2 14s linear infinite;
    }

    .nc-c3 .nc-s3 {
        animation: nc-c3-s3 14s linear infinite;
    }


    /* Crew 4 */

    .nc-c4 .nc-s1 {
        animation: nc-c4-s1 14s linear infinite;
    }

    .nc-c4 .nc-s2 {
        animation: nc-c4-s2 14s linear infinite;
    }

    .nc-c4 .nc-s3 {
        animation: nc-c4-s3 14s linear infinite;
    }


    /* Avatar states */

    .nc-c1 .nc-avatar,
    .nc-c2 .nc-avatar,
    .nc-c3 .nc-avatar,
    .nc-c4 .nc-avatar {
        animation: nc-avatar 14s linear infinite;
    }


    /* ============================================================
       Animated clock
       ============================================================ */

    .nc-clock {
        position: relative;
        display: inline-block;
        font-variant-numeric: tabular-nums;
    }

    .nc-clock::before {
        content: "00:00 pm";
        visibility: hidden;
    }

    .nc-clock > span {
        position: absolute;
        top: 0;
        left: 0;
        white-space: nowrap;
        opacity: 0;
    }

    .nc-clock-right > span {
        left: auto;
        right: 0;
    }

    .nc-k1 {
        animation: nc-clock-1 14s linear infinite;
    }

    .nc-k2 {
        animation: nc-clock-2 14s linear infinite;
    }

    .nc-k3 {
        animation: nc-clock-3 14s linear infinite;
    }

    .nc-k4 {
        animation: nc-clock-4 14s linear infinite;
    }

    .nc-k5 {
        animation: nc-clock-5 14s linear infinite;
    }

    .nc-k6 {
        animation: nc-clock-6 14s linear infinite;
    }

    .nc-k7 {
        animation: nc-clock-7 14s linear infinite;
    }


    /* ============================================================
       Timeline progress marker
       ============================================================ */

    .nc-progress-marker {
        animation: nc-march 14s linear infinite;
    }


    /* ============================================================
       Accessibility: reduced motion
       ============================================================ */

    @media (prefers-reduced-motion: reduce) {

        .nc-night-body,
        .nc-wash,
        .nc-live-dot,
        .nc-submit,
        .nc-night-state,
        .nc-day-state,
        .nc-f1,
        .nc-f2,
        .nc-f3,
        .nc-f4,
        .nc-l1,
        .nc-l2,
        .nc-l3,
        .nc-l4,
        .nc-l5,
        .nc-crew,
        .nc-invitation,
        .nc-push,
        .nc-phone-scrim,
        .nc-crew-row,
        .nc-accept-buttons,
        .nc-accepted,
        .nc-accept-button,
        .nc-progress-marker,
        .nc-k1,
        .nc-k2,
        .nc-k3,
        .nc-k4,
        .nc-k5,
        .nc-k6,
        .nc-k7,
        .nc-s1,
        .nc-s2,
        .nc-s3,
        .nc-avatar {
            animation: none !important;
        }

        .nc-night-state {
            opacity: 0;
        }

        .nc-day-state,
        .nc-crew,
        .nc-invitation,
        .nc-crew-row,
        .nc-accepted {
            opacity: 1;
            transform: none;
        }

        .nc-accept-buttons,
        .nc-push,
        .nc-phone-scrim {
            opacity: 0;
        }

        .nc-clock > span {
            opacity: 0;
        }

        .nc-clock > .nc-k7 {
            opacity: 1;
        }

        .nc-progress-marker {
            left: 100%;
        }
    }