@keyframes morph {
    0%, 100% {
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%;
        transform: translate(3%, 2%) rotate(8deg);
    }
    66% {
        border-radius: 30% 70% 40% 60% / 60% 40% 70% 30%;
        transform: translate(-2%, 4%) rotate(-5deg);
    }
}

.blob-3 {
    animation-name: morphCenter;
}

@keyframes morphCenter {
    0%, 100% {
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        transform: translate(-50%, -50%) rotate(0deg);
    }
    50% {
        transform: translate(-50%, calc(-50% + 3%)) rotate(5deg);
    }
}

@keyframes ringSpin {
    to { --ring-angle: 360deg; }
}

@keyframes frameIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.988);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.dashboard-frame {
    animation: frameIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes rollIn {
    from { transform: translateY(80%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes rollInSmall {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes pulseDraw {
    from { stroke-dashoffset: var(--pulse-length, 800); }
    to { stroke-dashoffset: 0; }
}

.hour-value.roll-up,
.unit-value.roll-up {
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.3s ease;
}

.unit-value.roll-up {
    transition-duration: 0.35s, 0.25s;
}

.hour-value.roll-in {
    animation: rollIn 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

.unit-value.roll-in {
    animation: rollInSmall 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

.minute-block.minute-flash .unit-value {
    animation: minuteFlash 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
    .blob,
    .orbit-ring,
    .pulse-path.beating,
    .pulse-glow.beating {
        animation: none !important;
    }

    .hour-value.roll-in,
    .unit-value.roll-in {
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    .dashboard-frame {
        animation: none !important;
        opacity: 1;
        transform: none !important;
    }
}