@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800;900&display=swap');

* {
    box-sizing: border-box;
}

body {
    font-family: Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[data-planning-card] {
    -webkit-user-drag: none;
    user-select: none;
}

.js-ready [data-ui-reveal="ready"] {
    opacity: 0;
    transform: translateY(10px);
}

.js-ready [data-ui-reveal="visible"] {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 520ms ease,
        transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

.js-ready button,
.js-ready a,
.js-ready [data-planning-card],
.js-ready [data-calendar-view],
.js-ready .shadow-panel {
    will-change: transform;
}

.js-ready button:hover,
.js-ready a:hover {
    transform: translateY(-1px);
}

.js-ready [data-planning-card]:hover,
.js-ready [data-calendar-view]:hover,
.js-ready .shadow-panel:hover {
    transform: translateY(-2px);
}

.js-ready [data-planning-card],
.js-ready [data-calendar-view],
.js-ready .shadow-panel,
.js-ready button,
.js-ready a {
    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        color 180ms ease,
        opacity 180ms ease,
        transform 180ms ease;
}

.js-ready [data-modal].flex > * {
    animation: modal-enter 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes modal-enter {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .js-ready *,
    .js-ready *::before,
    .js-ready *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .js-ready [data-ui-reveal="ready"],
    .js-ready [data-ui-reveal="visible"] {
        opacity: 1;
        transform: none;
    }
}