/* BIMCAD — motion layer (loads last; overrides Bootstrap + reduced-motion killswitch where needed) */

:root {
  --bim-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --bim-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --bim-modal-dur: 0.52s;
  --bim-backdrop-dur: 0.45s;
  --bim-dropdown-dur: 0.42s;
  --bim-offcanvas-dur: 0.48s;
  --bim-sidebar-dur: 0.4s;
  --bim-toast-dur: 0.45s;
  --bim-fade-dur: 0.35s;
  --bim-btn-dur: 0.22s;
  /* Bootstrap reads this for offcanvas panels */
  --bs-offcanvas-transition: transform var(--bim-offcanvas-dur) var(--bim-ease-out);
}

/* ---- Modals: explicit motion (beats Bootstrap default + short reduce) ---- */
.modal.fade .modal-dialog {
  transition: transform var(--bim-modal-dur) var(--bim-ease-out) !important;
  transform: translateY(36px) scale(0.94) !important;
  transform-origin: center top;
}

.modal.show .modal-dialog {
  transform: none !important;
}

.modal-backdrop.fade {
  transition: opacity var(--bim-backdrop-dur) var(--bim-ease-soft) !important;
}

.modal-content {
  transition: box-shadow var(--bim-modal-dur) var(--bim-ease-soft);
}

/* ---- Dropdowns: class .bim-dd-motion toggled from app.js (Popper keeps transform) ---- */
@keyframes bim-dd-reveal {
  from {
    opacity: 0.65;
    clip-path: inset(0 0 92% 0 round 10px);
    filter: blur(1px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 10px);
    filter: blur(0);
  }
}

.dropdown-menu.bim-dd-motion {
  animation: bim-dd-reveal var(--bim-dropdown-dur) var(--bim-ease-out) both;
}

/* ---- Offcanvas (activity panel) ---- */
.offcanvas.offcanvas-start,
.offcanvas.offcanvas-end,
.offcanvas.offcanvas-top,
.offcanvas.offcanvas-bottom {
  transition: transform var(--bim-offcanvas-dur) var(--bim-ease-out) !important;
}

.offcanvas-backdrop.fade {
  transition: opacity var(--bim-offcanvas-dur) var(--bim-ease-soft) !important;
}

/* ---- Mobile sidebar ---- */
@media (max-width: 991.98px) {
  .sidebar {
    transition: transform var(--bim-sidebar-dur) var(--bim-ease-out) !important;
  }

  .sidebar-backdrop {
    transition: opacity var(--bim-sidebar-dur) var(--bim-ease-soft) !important;
  }
}

/* ---- Global fade (modal shell, alerts, tabs) ---- */
.fade {
  transition: opacity var(--bim-fade-dur) var(--bim-ease-soft) !important;
}

/* ---- Toasts ---- */
.toast.fade {
  transition:
    opacity var(--bim-toast-dur) var(--bim-ease-out),
    transform var(--bim-toast-dur) var(--bim-ease-out) !important;
}

.toast.fade:not(.show) {
  transform: translateX(20px);
  opacity: 0;
}

.toast.fade.show {
  transform: translateX(0);
  opacity: 1;
}

/* ---- Collapse ---- */
.collapsing {
  transition: height var(--bim-fade-dur) var(--bim-ease-out) !important;
}

/* ---- App shell + nav ---- */
.app-shell {
  transition: grid-template-columns var(--bim-sidebar-dur) var(--bim-ease-out) !important;
}

.sidebar .nav-link {
  transition:
    background-color var(--bim-btn-dur) var(--bim-ease-soft),
    color var(--bim-btn-dur) var(--bim-ease-soft),
    box-shadow var(--bim-btn-dur) var(--bim-ease-soft) !important;
}

/* ---- Buttons & header controls ---- */
.btn,
.icon-btn,
.profile-chip,
.privacy-toggle,
.dropdown-toggle {
  transition:
    background-color var(--bim-btn-dur) var(--bim-ease-soft),
    color var(--bim-btn-dur) var(--bim-ease-soft),
    border-color var(--bim-btn-dur) var(--bim-ease-soft),
    box-shadow var(--bim-btn-dur) var(--bim-ease-soft),
    transform var(--bim-btn-dur) var(--bim-ease-soft),
    opacity var(--bim-btn-dur) var(--bim-ease-soft) !important;
}

.icon-btn:active,
.profile-chip:active,
.btn:active {
  transform: scale(0.97);
}

.tab-pane.fade {
  transition: opacity var(--bim-fade-dur) var(--bim-ease-out) !important;
}

/* ---- OS “reduce motion”: keep subtle feedback (Bootstrap uses transition:none otherwise) ---- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --bim-modal-dur: 0.18s;
    --bim-backdrop-dur: 0.16s;
    --bim-dropdown-dur: 0.18s;
    --bim-offcanvas-dur: 0.2s;
    --bim-sidebar-dur: 0.18s;
    --bim-toast-dur: 0.18s;
    --bim-fade-dur: 0.16s;
    --bim-btn-dur: 0.1s;
    --bs-offcanvas-transition: transform var(--bim-offcanvas-dur) var(--bim-ease-soft);
  }

  .modal.fade .modal-dialog {
    transition: transform var(--bim-modal-dur) var(--bim-ease-soft) !important;
    transform: translateY(10px) scale(0.99) !important;
  }

  .fade {
    transition: opacity var(--bim-fade-dur) var(--bim-ease-soft) !important;
  }
}