/*
 * Global dimmed overlay scrim - single source of truth for fade timing across
 * drawers, nav menus, modals, and any KOverlayScrim / k-overlay-scrim usage.
 *
 * Change duration once:
 *   :root { --overlay-scrim-duration: 500ms; --drawer-panel-duration: 500ms; }
 */
:root {
  --modal-scrim-background: rgb(0 0 0 / 40%);
  --modal-scrim-blur: 1px;
  --overlay-scrim-duration: 200ms;
  --overlay-scrim-easing: ease;
  --drawer-panel-duration: 200ms;
  --drawer-panel-easing: ease;
}

.k-overlay-scrim-fade-enter-active,
.k-overlay-scrim-fade-leave-active {
  transition: opacity var(--overlay-scrim-duration) var(--overlay-scrim-easing);
}

.k-overlay-scrim-fade-enter-from,
.k-overlay-scrim-fade-leave-to {
  opacity: 0;
}

/* Reka-ui DialogOverlay (KModal) - same timing via keyframes + data-state. */
@keyframes k-overlay-scrim-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes k-overlay-scrim-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.k-overlay-scrim[data-state='open'] {
  animation: k-overlay-scrim-in var(--overlay-scrim-duration) var(--overlay-scrim-easing) forwards;
}

.k-overlay-scrim[data-state='closed'] {
  animation: k-overlay-scrim-out var(--overlay-scrim-duration) var(--overlay-scrim-easing) forwards;
}

/* Drawer / slide-over panels - same timing tokens as the author sidebar menu. */
.k-drawer-panel-surface {
  transition: transform var(--drawer-panel-duration) var(--drawer-panel-easing);
}

.k-drawer-panel-slide-left-enter-active,
.k-drawer-panel-slide-left-leave-active,
.k-drawer-panel-slide-right-enter-active,
.k-drawer-panel-slide-right-leave-active {
  transition: transform var(--drawer-panel-duration) var(--drawer-panel-easing);
}

.k-drawer-panel-slide-left-enter-from,
.k-drawer-panel-slide-left-leave-to {
  transform: translateX(-100%);
}

.k-drawer-panel-slide-right-enter-from,
.k-drawer-panel-slide-right-leave-to {
  transform: translateX(100%);
}

/* Shared surface for KModal and the pre-hydration consent dialog. */
.k-modal-scrim {
  background: var(--modal-scrim-background);
  backdrop-filter: blur(var(--modal-scrim-blur));
}