@layer lu-base {
  /* ─── Collapsible transition ───────────────────────────────────────────────── */
  .lu-collapsible-enter-active,
  .lu-collapsible-leave-active {
    display: grid;
    transition: grid-template-rows 200ms ease;
  }
  .lu-collapsible-enter-from,
  .lu-collapsible-leave-to {
    grid-template-rows: 0fr;
  }
  .lu-collapsible-enter-to,
  .lu-collapsible-leave-from {
    grid-template-rows: 1fr;
  }

  /* ─── Keyframe animations ──────────────────────────────────────────────────── */
  @keyframes lu-fade-in {
    from {
      opacity: 0;
      transform: scale(0.97) translateY(-3px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  .lu-fade-in {
    animation: lu-fade-in 130ms var(--lu-ease-spring) forwards;
  }

  @keyframes lu-slide-down {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .lu-slide-down {
    animation: lu-slide-down 160ms var(--lu-ease-spring) forwards;
  }

  @keyframes lu-slide-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .lu-slide-up {
    animation: lu-slide-up 160ms var(--lu-ease-spring) forwards;
  }

  /* ─── Generic Fade Transition ──────────────────────────────────────────────── */
  .lu-fade-enter-active,
  .lu-fade-leave-active {
    transition: opacity 200ms ease;
  }
  .lu-fade-enter-from,
  .lu-fade-leave-to {
    opacity: 0;
  }

  /* ─── Notification center panel transition ─────────────────────────────────── */
  .lu-notification-panel-enter-active { animation: lu-slide-down 180ms var(--lu-ease-spring) forwards; }
  .lu-notification-panel-leave-active { animation: lu-slide-down 140ms ease reverse forwards; }

  /* ─── Drawer Transitions ─────────────────────────────────────────────────── */
  .lu-drawer-fade-enter-active,
  .lu-drawer-fade-leave-active {
    transition: opacity 300ms ease;
  }
  .lu-drawer-fade-enter-from,
  .lu-drawer-fade-leave-to {
    opacity: 0;
  }

  .lu-drawer-slide-left-enter-active,
  .lu-drawer-slide-left-leave-active,
  .lu-drawer-slide-right-enter-active,
  .lu-drawer-slide-right-leave-active,
  .lu-drawer-slide-top-enter-active,
  .lu-drawer-slide-top-leave-active,
  .lu-drawer-slide-bottom-enter-active,
  .lu-drawer-slide-bottom-leave-active {
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .lu-drawer-slide-left-enter-from,
  .lu-drawer-slide-left-leave-to {
    transform: translateX(-100%);
  }
  .lu-drawer-slide-right-enter-from,
  .lu-drawer-slide-right-leave-to {
    transform: translateX(100%);
  }
  .lu-drawer-slide-top-enter-from,
  .lu-drawer-slide-top-leave-to {
    transform: translateY(-100%);
  }
  .lu-drawer-slide-bottom-enter-from,
  .lu-drawer-slide-bottom-leave-to {
    transform: translateY(100%);
  }

  /* ─── Bottom Sheet Transitions ───────────────────────────────────────────── */
  .lu-bottom-sheet-fade-enter-active,
  .lu-bottom-sheet-fade-leave-active {
    transition: opacity 300ms ease;
  }
  .lu-bottom-sheet-fade-enter-from,
  .lu-bottom-sheet-fade-leave-to {
    opacity: 0;
  }

  .lu-bottom-sheet-slide-enter-active,
  .lu-bottom-sheet-slide-leave-active {
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .lu-bottom-sheet-slide-enter-from,
  .lu-bottom-sheet-slide-leave-to {
    transform: translateY(100%);
  }

  /* ─── Toast Transitions ─────────────────────────────────────────────────── */
  .lu-toast-fade-enter-active,
  .lu-toast-fade-leave-active {
    transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .lu-toast-fade-enter-from {
    opacity: 0;
    transform: translateY(12px) scale(0.95);
  }
  .lu-toast-fade-leave-to {
    opacity: 0;
    transform: scale(0.95);
  }
}