@keyframes flow-forward {
    from { opacity: 0; transform: translateX(var(--tx-28)); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes flow-back {
    from { opacity: 0; transform: translateX(var(--tx-28-back)); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fade {
    from { opacity: 0; transform: translateY(var(--ty-4)); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pop {
    from { opacity: 0; transform: scale(var(--scale-096)) translateY(var(--ty-8)); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes rise {
    from { opacity: 0; transform: translateY(var(--ty-10)); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes strike-in {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes strike-text-in {
    from { color: inherit; }
    to { color: var(--navy); }
}

.flow-forward { animation: flow-forward var(--t-240) var(--e-standard); }
.flow-back { animation: flow-back var(--t-240) var(--e-standard); }

.enter-fade { animation: fade var(--t-220) var(--e-ease) both; }

.enter-rise { animation: rise var(--t-420) var(--e-emphasis) both; }

.enter-pop { animation: pop var(--t-260) var(--e-emphasis) both; }

.stagger-2 { animation-delay: var(--delay-50); }

.stagger-3 { animation-delay: var(--delay-100); }

.stagger-4 { animation-delay: var(--delay-150); }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: var(--t-still) !important;
        animation-iteration-count: 1 !important;
        transition-duration: var(--t-still) !important;
    }

    .flow-forward,
    .flow-back,
    .week-track { animation: none; transition: none; }
}

@media (forced-colors: active) {
    .tile-disc,
    .tile-disc-small,
    .tile-disc-large { background-color: Canvas; }

    .is-auto.row,
    .is-held.row,
    .is-booked.row { outline-color: Highlight; }
}