/* ─── UX Effects layer — motion and micro-interactions ───────────────────────
   Scope: additive only. Does NOT change any color, layout, or typography.
   All animations are scoped to .is-entering to avoid firing on data re-renders.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── 1. SCREEN NAVIGATION TRANSITION ────────────────────────────────────── */
/* is-entering is set by setScreen() and removed after 450ms */
#screenHost.is-entering > * {
  animation: uxScreenEnter .2s cubic-bezier(.22,.6,.36,1) both;
}

/* dashboard metric cards stagger */
#screenHost.is-entering .metric-grid > *:nth-child(1) { animation-delay: .02s; }
#screenHost.is-entering .metric-grid > *:nth-child(2) { animation-delay: .06s; }
#screenHost.is-entering .metric-grid > *:nth-child(3) { animation-delay: .10s; }
#screenHost.is-entering .metric-grid > *:nth-child(4) { animation-delay: .14s; }
#screenHost.is-entering .metric-grid > *:nth-child(5) { animation-delay: .18s; }
#screenHost.is-entering .metric-grid > *:nth-child(6) { animation-delay: .22s; }

/* dashboard panels stagger after metrics */
#screenHost.is-entering .dashboard-grid > *:nth-child(1) { animation-delay: .16s; }
#screenHost.is-entering .dashboard-grid > *:nth-child(2) { animation-delay: .20s; }
#screenHost.is-entering .table-card { animation-delay: .24s; }

@keyframes uxScreenEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 2. TABLE ROW STAGGER ────────────────────────────────────────────────── */
.reference-table tbody tr {
  animation: uxRowEnter .14s ease both;
}

@keyframes uxRowEnter {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── 3. NAV ACTIVE INDICATOR ─────────────────────────────────────────────── */
.nav-item {
  position: relative;
}

/* left-edge glow marker on active item */
.nav-item.active::after {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(248,189,36,.6);
  animation: uxNavIndicator .18s ease both;
}

@keyframes uxNavIndicator {
  from { opacity: 0; transform: scaleY(.5); }
  to   { opacity: 1; transform: scaleY(1); }
}

/* ── 4. STATUS PILL PULSE (ok/online states) ─────────────────────────────── */
.status-pill.ok,
.health-pill.ok {
  gap: 7px;
}

.status-pill.ok::before,
.health-pill.ok::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  animation: uxStatusPulse 2.4s ease-out infinite;
}

@keyframes uxStatusPulse {
  0%   { box-shadow: 0 0 0 0 rgba(40,211,104,.55); }
  65%  { box-shadow: 0 0 0 5px rgba(40,211,104,0); }
  100% { box-shadow: 0 0 0 0 rgba(40,211,104,0); }
}

/* ── 5. BUTTON TACTILE PRESS FEEDBACK ───────────────────────────────────── */
.gold-button:not(:disabled):active,
.outline-button:not(:disabled):active,
.ghost-button:not(:disabled):active,
.mini-button:not(:disabled):active {
  transform: scale(.97);
}

/* gold button hover glow */
.gold-button:not(:disabled):hover {
  box-shadow: 0 0 28px rgba(248,189,36,.28), 0 4px 14px rgba(0,0,0,.3);
}

/* metric card press: cancel the lift on active */
.dashboard-metric:not(:disabled):active {
  transform: translateY(0) !important;
}

/* ── 6. SEARCH BOX FOCUS EXPAND ─────────────────────────────────────────── */
.search-box {
  transition: width .2s ease;
}

.search-box:focus-within {
  width: min(390px, 30vw);
}

/* ── 7. PLAN METER ANIMATED FILL ────────────────────────────────────────── */
/* width is set via JS — transition makes it sweep on load */
.meter span {
  transition: width .72s cubic-bezier(.22,.6,.36,1);
}

/* ── 8. DONUT CHART ENTRANCE ────────────────────────────────────────────── */
#screenHost.is-entering .donut {
  animation: uxDonutEnter .38s cubic-bezier(.22,.6,.36,1) both;
  animation-delay: .24s;
}

@keyframes uxDonutEnter {
  from { opacity: .5; transform: scale(.88) rotate(-6deg); }
  to   { opacity: 1;  transform: scale(1)  rotate(0); }
}

/* ── 9. SVG CHART FADE-IN ───────────────────────────────────────────────── */
#screenHost.is-entering .chart {
  animation: uxChartEnter .32s ease both;
  animation-delay: .18s;
}

@keyframes uxChartEnter {
  from { opacity: 0; transform: scaleX(.94); transform-origin: left center; }
  to   { opacity: 1; transform: scaleX(1); }
}

/* ── 10. PANEL HOVER TRANSITION (smoother than default) ─────────────────── */
.panel,
.table-card,
.settings-card,
.form-card,
.integration-card {
  transition: border-color .14s ease, box-shadow .2s ease;
}

/* ── 11. LOADING STATE ENTRANCE ─────────────────────────────────────────── */
.loading-state {
  animation: uxFadeIn .28s ease both;
}

@keyframes uxFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── 12. USER MENU AVATAR HOVER ─────────────────────────────────────────── */
.user-menu:hover .avatar {
  border-color: var(--gold-2);
  transition: border-color .14s ease, background .14s ease;
  background: rgba(248,189,36,.1);
}

/* ── 13. MODAL BACKDROP ENTER ───────────────────────────────────────────── */
.modal-backdrop:not([hidden]) {
  animation: uxFadeIn .16s ease both;
}

.modal-backdrop:not([hidden]) > * {
  animation: uxScreenEnter .22s cubic-bezier(.22,.6,.36,1) both;
}

/* ── 14. TAG / CHIP HOVER ───────────────────────────────────────────────── */
.tag,
.status-pill {
  transition: border-color .12s ease;
}

/* ── 15. EMPTY STATE ENTRANCE ───────────────────────────────────────────── */
.empty-state,
.empty-inline {
  animation: uxFadeIn .3s ease both;
}

/* ── 16. ROW BUTTON REVEAL ──────────────────────────────────────────────── */
/* Reveal row action button on row hover for cleaner tables */
.reference-table tbody tr .row-button {
  opacity: .55;
  transition: opacity .12s ease;
}

.reference-table tbody tr:hover .row-button {
  opacity: 1;
}

/* ── 17. COLLAPSE SIDEBAR SMOOTH ────────────────────────────────────────── */
.side-nav {
  transition: width .22s ease;
}

/* ── 18. ACTIVITY PANEL SLIDE ───────────────────────────────────────────── */
.activity-panel {
  transition: opacity .18s ease;
}

body:not(.activity-open) .activity-panel {
  opacity: 0;
  pointer-events: none;
}

body.activity-open .activity-panel {
  opacity: 1;
}

/* ── FEATURE PREVIEW MODAL ───────────────────────────────────────────────── */
.feature-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: 24px;
  animation: fmBackdropIn .18s ease both;
}
@keyframes fmBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.feature-modal {
  width: min(600px, 100%);
  display: grid;
  gap: 0;
  border: 1px solid rgba(248,189,36,.42);
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 95% 5%, rgba(248,189,36,.18), transparent 35%),
    linear-gradient(180deg, rgba(20,18,12,.99), rgba(6,5,3,1));
  box-shadow: 0 40px 100px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06);
  animation: fmIn .22s cubic-bezier(.22,.6,.36,1) both;
}
@keyframes fmIn {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.feature-modal-hero {
  padding: 32px 32px 24px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: start;
}
.feature-modal-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(248,189,36,.38);
  background: rgba(248,189,36,.12);
  color: var(--gold);
  font-size: 28px;
  box-shadow: 0 0 24px rgba(248,189,36,.15);
}
.feature-modal-header h3 {
  margin: 0 0 8px;
  color: #fff8e5;
  font: 900 24px/1.1 Georgia, serif;
  letter-spacing: -.02em;
}
.feature-modal-header p {
  margin: 0;
  color: #9a9289;
  font-size: 14px;
  line-height: 1.6;
}
.feature-modal-body {
  padding: 24px 32px;
}
.feature-modal-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.feature-modal-bullets li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  background: rgba(255,255,255,.02);
  color: #c0b8b0;
  font-size: 14px;
  line-height: 1.5;
}
.feature-modal-bullets li::before {
  content: '✓';
  color: var(--green, #2ddc82);
  font-weight: 900;
  font-size: 13px;
  margin-top: 1px;
  flex-shrink: 0;
}
.feature-modal-footer {
  display: flex;
  gap: 10px;
  padding: 20px 32px;
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.3);
}

.row-delay-0 { animation-delay: 0ms; }
.row-delay-1 { animation-delay: 24ms; }
.row-delay-2 { animation-delay: 48ms; }
.row-delay-3 { animation-delay: 72ms; }
.row-delay-4 { animation-delay: 96ms; }
.row-delay-5 { animation-delay: 120ms; }
.row-delay-6 { animation-delay: 144ms; }
.row-delay-7 { animation-delay: 168ms; }
.row-delay-8 { animation-delay: 192ms; }
.row-delay-9 { animation-delay: 216ms; }
.row-delay-10 { animation-delay: 240ms; }