/* Gentle motion: 150–250 ms, ease-out, transform and opacity (the theme switch cross-fades colours).
   Everything here stops under prefers-reduced-motion, the Glow band included. */
.view-switch::before {
    transition: transform 200ms ease-out;
}

.day-collapsed.day-selected .date {
    animation: select-pop 200ms ease-out;
}

#day-panel > *,
.week-day-panel > * {
    animation: list-in 220ms ease-out;
}

#calendar[data-travel="next"] {
    animation: travel-next 220ms ease-out;
}

#calendar[data-travel="prev"] {
    animation: travel-prev 220ms ease-out;
}

.theme-switching,
.theme-switching * {
    transition: background-color 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out !important;
}

.live-dot {
    position: relative;
}

.live-dot::after {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: currentColor;
    content: "";
    animation: live-pulse 1800ms ease-out infinite;
}

@keyframes select-pop {
    from {
        opacity: .6;
        transform: scale(.85);
    }
}

@keyframes list-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

@keyframes travel-next {
    from {
        opacity: .4;
        transform: translateX(24px);
    }
}

@keyframes travel-prev {
    from {
        opacity: .4;
        transform: translateX(-24px);
    }
}

@keyframes live-pulse {
    from {
        opacity: .6;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(2.6);
    }
}

@media (prefers-reduced-motion: reduce) {
    .view-switch::before,
    .theme-switching,
    .theme-switching * {
        transition: none !important;
    }

    .day-collapsed.day-selected .date,
    #day-panel > *,
    .week-day-panel > *,
    #calendar[data-travel="next"],
    #calendar[data-travel="prev"],
    .live-dot::after,
    .topbar[data-section="calendar"] {
        animation: none !important;
    }
}