/*
 * Centricity MF Screener Dashboard — transitions.css
 *
 * Premium institutional motion. NO bouncy springs / parallax / Lottie /
 * gradients outside palette. Everything is ease-out cubic, modest duration,
 * fires once per section, respects prefers-reduced-motion.
 *
 * Reference: Stripe / Linear / Bloomberg Terminal. Calm, important, smooth.
 *
 * If reverting: delete this file + remove the <link> in every HTML page +
 * delete js/transitions.js + remove its <script> tag. One commit's worth.
 */

/* ============================================================
   1. PAGE-LOAD FADE — 320 ms quiet entrance, body-wide.
   OPACITY-ONLY (Batch-10 item 2): the old translateY keyframes +
   fill-mode `both` left a permanent transform on <body>, which per
   CSS Transforms makes body the containing block for EVERY
   position:fixed descendant — overlays/toasts anchored to the
   document instead of the viewport (off-screen when scrolled).
   Opacity never creates a containing block.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  body {
    animation: cx-page-fade 320ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  @keyframes cx-page-fade {
    from { opacity: 0.88; }
    to   { opacity: 1;    }
  }
}

/* ============================================================
   2. SECTION REVEAL — JS adds .cx-reveal on page load with a per-
      element animation-delay (60 ms × index, capped at 8). Animation
      runs once, both fill mode holds the end state. Animations
      override declarations + inline styles during playback, which
      makes this robust against odd compositor pinning that defeats
      pure transition-based reveals on certain block-level elements.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .cx-reveal {
    animation: cx-reveal-anim 700ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    will-change: transform, opacity;
  }
}
@keyframes cx-reveal-anim {
  from { transform: translateY(20px) scale(0.992); opacity: 0; }
  to   { transform: translateY(0)    scale(1);     opacity: 1; }
}

/* ============================================================
   3. NAV-LINK GOLD UNDERLINE — 200 ms scaleX from left.
      Replaces the brand's existing :hover color shift.
   ============================================================ */
header.appbar nav a {
  position: relative;
  transition: color 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
header.appbar nav a:not(.dropdown-trigger)::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -3px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
header.appbar nav a:not(.dropdown-trigger):hover::after,
header.appbar nav a.active:not(.dropdown-trigger)::after {
  transform: scaleX(1);
}

/* Dropdown menu items get a softer gold-fill hover instead. */
header.appbar .nav-dropdown-menu a {
  transition: background 180ms ease-out, color 180ms ease-out;
}

/* ============================================================
   4. CARD / TILE HOVER LIFT — 220 ms translate + shadow upgrade.
      Applies to clickable surfaces only.
   ============================================================ */
.qtile,
.pb-card,
.alert,
.change-card,
.q-tile,
.archive-tile,
.tile,
.profile-card,
.peer-card,
.fund-card {
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.qtile:hover,
a.qtile:hover,
.archive-tile:hover,
.tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .07),
              0 1px 0 rgba(189, 149, 104, .35);
}
.qtile:active,
a.qtile:active,
.archive-tile:active {
  transform: translateY(0);
  transition-duration: 80ms;
}

/* ============================================================
   5. SEARCH DROPDOWN — smooth open via opacity + 4-px slide.
      Sits on top of the existing [hidden] gating in centricity.css §12a.
   ============================================================ */
.search-dropdown {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 180ms ease-out, transform 180ms ease-out;
  pointer-events: none;
}
.search-dropdown:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.search-dropdown .search-row {
  transition: background 180ms ease-out;
}

/* ============================================================
   6. SMOOTH SCROLL — anchor jumps + horizontally-scrolling tables.
   ============================================================ */
html {
  scroll-behavior: smooth;
}
.table-wrap,
.tbl-scroll,
.matrix-scroll,
.crumb,
.compare-scroll,
.holdings-scroll {
  scroll-behavior: smooth;
}

/* ============================================================
   7. BUTTONS + LINKS — institutional ease, gentle press.
   ============================================================ */
.btn,
button.btn,
.more,
.cta,
a.cta,
.btn-primary,
.btn-ghost,
.btn-link {
  transition: opacity 180ms ease-out,
              color 180ms ease-out,
              background 180ms ease-out,
              border-color 180ms ease-out,
              box-shadow 180ms ease-out,
              transform 120ms ease-out;
}
.btn:active:not([disabled]),
button.btn:active:not([disabled]) {
  transform: scale(0.985);
}

/* Disabled buttons should not animate / lift. */
.btn[disabled],
.btn.deferred,
button:disabled {
  transition: none;
  transform: none !important;
}

/* ============================================================
   8. TABLE ROW HOVER — smooth bg + subtle gold left-edge.
   ============================================================ */
.fund-tbl tbody tr,
.pb-tbl tbody tr,
.holdings-tbl tbody tr,
.compare-tbl tbody tr,
table.screener-tbl tbody tr {
  transition: background 180ms ease-out,
              box-shadow 180ms ease-out;
}
.fund-tbl tbody tr:hover,
.pb-tbl tbody tr:hover,
.holdings-tbl tbody tr:hover,
.compare-tbl tbody tr:hover,
table.screener-tbl tbody tr:hover {
  box-shadow: inset 3px 0 0 var(--gold);
}

/* ============================================================
   9. PORTFOLIO BUILDER MODE TABS — fade swap.
   ============================================================ */
.pb-mode-a,
#modeA,
#modeB {
  animation: cx-tab-swap 240ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes cx-tab-swap {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.pb-mode-tab {
  transition: color 200ms ease-out,
              border-color 200ms ease-out,
              background 200ms ease-out;
}

/* ============================================================
   10. WEIGHT DRAWER + ANY MODAL OVERLAYS — backdrop fade.
   ============================================================ */
.modal-backdrop,
.drawer-backdrop {
  transition: opacity 220ms ease-out;
}
.modal-panel,
.drawer-panel {
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 220ms ease-out;
}

/* ============================================================
   11. <details> COLLAPSIBLES (e.g. Manager History on fund-detail)
   ============================================================ */
details > summary {
  transition: color 180ms ease-out, background 180ms ease-out;
}

/* ============================================================
   12. REDUCED-MOTION OPT-OUT — kill non-essential motion.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .cx-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}
