/* Reyvi Analytics motion layer
   Purposeful micro-interactions without dependencies or layout shifts.
   Remove this stylesheet to disable the new animation layer. */
:root {
  --motion-ease-out: cubic-bezier(.2, .8, .2, 1);
  --motion-ease-soft: cubic-bezier(.22, 1, .36, 1);
  --motion-fast: 180ms;
  --motion-medium: 330ms;
}

/* Safe reveal: content is NEVER hidden while waiting for IntersectionObserver.
   The old opacity:0 rule could permanently hide a long orders/customers table:
   a tall element cannot reach the observer's visibility-ratio threshold.
   Animate only upon intersection, from a fully readable state. */
html.motion-enabled [data-motion="reveal"].motion-visible {
  animation: reyvi-reveal-enter 520ms var(--motion-ease-soft) both;
  animation-delay: var(--motion-delay, 0ms);
}
@keyframes reyvi-reveal-enter {
  from { opacity: .90; transform: translate3d(0, 9px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Side navigation: a soft entrance plus crisp, responsive hover feedback. */
.app-body .nav-section {
  animation: reyvi-menu-arrive 530ms var(--motion-ease-soft) both;
}
.app-body .nav-section:nth-child(2) { animation-delay: 70ms; }
.app-body .nav-section:nth-child(3) { animation-delay: 135ms; }
.app-body .nav-section:nth-child(4) { animation-delay: 190ms; }
.nav-link { transition: background-color 200ms ease, color 200ms ease,
                       border-color 200ms ease, transform 210ms var(--motion-ease-out) !important; }
.nav-link .icon { transition: color 220ms ease, transform 220ms var(--motion-ease-out), opacity 220ms ease; }
/* Keep the requested flat selected tab instead of a gradient. */
:root:not([data-theme="light"]) .nav-link.is-active {
  background: #231e2d;
  border-color: transparent;
  box-shadow: none;
  border-radius: 6px;
  color: #b997f8;
}

/* Controls and surfaces lift only where a real pointer can hover. */
.card, .table-wrap, .related-card {
  transition: border-color var(--motion-medium) ease,
              box-shadow var(--motion-medium) ease,
              transform var(--motion-medium) var(--motion-ease-out),
              background-color var(--motion-medium) ease;
}
.btn, .btn-small, .logout-btn, .icon-button, .search-shortcut,
.tab, .command-item, .topbar-avatar {
  transition: background-color var(--motion-fast) ease,
              color var(--motion-fast) ease,
              border-color var(--motion-fast) ease,
              transform 220ms var(--motion-ease-out),
              box-shadow 220ms ease;
}
.btn:active, .btn-small:active, .logout-btn:active, .icon-button:active {
  transform: scale(.975);
}
/* A low-key highlight moves across prominent buttons on hover. */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.18) 49%, transparent 76%);
  transform: translateX(-135%);
  transition: transform 580ms var(--motion-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .nav-link:not(.is-active):hover { transform: translateX(3px); }
  .nav-link:not(.is-active):hover .icon { transform: scale(1.08); }
  .card:hover, .related-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 13px 32px rgba(0,0,0,.12);
  }
  .table-wrap:hover { box-shadow: 0 8px 24px rgba(0,0,0,.055); }
  .btn:hover, .btn-small:hover { box-shadow: 0 6px 18px rgba(126,80,225,.16); }
  .btn-primary:hover::after { transform: translateX(135%); }
  .tab:hover, .icon-button:hover, .topbar-avatar:hover { transform: translateY(-1px); }
  .search-shortcut:hover { transform: translateY(-1px); }
  .command-item:hover { transform: translateX(2px); }
  .table-wrap tbody tr { transition: background-color 160ms ease, color 160ms ease; }
  .table-wrap tbody tr:hover td:first-child { color: var(--accent-bright); }
}
/* Distinct feedback for keyboard users, no motion required to locate focus. */
.nav-link:focus-visible, .btn:focus-visible, .command-item:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}

/* Charts animate only when they enter the viewport. Data/inline heights stay intact. */
html.motion-enabled .chart-bars.motion-chart-visible .chart-column {
  transform-origin: bottom center;
  animation: reyvi-chart-rise 790ms var(--motion-ease-soft) backwards;
  animation-delay: calc(var(--chart-index, 0) * 65ms);
}
html.motion-enabled .day-bars.motion-chart-visible .day-bar-track > div {
  transform-origin: left center;
  animation: reyvi-track-fill 840ms var(--motion-ease-soft) backwards;
  animation-delay: calc(var(--chart-index, 0) * 60ms);
}
html.motion-enabled .heatmap.motion-chart-visible .heat-cell {
  animation: reyvi-cell-arrive 450ms var(--motion-ease-out) backwards;
  animation-delay: calc(var(--chart-index, 0) * 38ms);
}

/* Search overlay appears without blocking the underlying links or form submissions. */
.command-backdrop:not([hidden]) {
  animation: reyvi-backdrop-show 190ms ease-out both;
}
.command-backdrop:not([hidden]) .command-dialog {
  animation: reyvi-dialog-show 280ms var(--motion-ease-soft) both;
}
.command-item.selected { transition: background-color 120ms ease, color 120ms ease, transform 120ms ease; }

/* Theme fades only during user-initiated switches, never on initial paint. */
html.theme-transitioning body,
html.theme-transitioning .sidebar,
html.theme-transitioning .topbar,
html.theme-transitioning .card,
html.theme-transitioning .table-wrap,
html.theme-transitioning .nav-link,
html.theme-transitioning .command-dialog,
html.theme-transitioning .login-layout,
html.theme-transitioning input,
html.theme-transitioning select,
html.theme-transitioning textarea {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 300ms;
  transition-timing-function: ease;
}

/* Login: a single centered form with a lightweight staggered entrance. */
.login-body::before { animation: reyvi-ambient-in 1.1s ease-out both; }
.login-layout { animation: reyvi-login-arrive 670ms var(--motion-ease-soft) both; }
.login-panel > .eyebrow,
.login-panel > h1,
.login-panel > p,
.login-panel > .login-card,
.login-panel > .login-footer {
  animation: reyvi-login-content 620ms var(--motion-ease-soft) both;
}
.login-panel > .eyebrow { animation-delay: 80ms; }
.login-panel > h1 { animation-delay: 130ms; }
.login-panel > p { animation-delay: 185ms; }
.login-panel > .login-card { animation-delay: 230ms; }
.login-panel > .login-footer { animation-delay: 300ms; }
.login-card input {
  transition: border-color 220ms ease, box-shadow 220ms ease,
              background-color 220ms ease;
}

@keyframes reyvi-menu-arrive {
  from { opacity: 0; transform: translate3d(-7px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes reyvi-chart-rise {
  from { opacity: .45; transform: scaleY(.035); }
  to { opacity: .88; transform: scaleY(1); }
}
@keyframes reyvi-track-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes reyvi-cell-arrive {
  from { opacity: .15; transform: translateY(5px) scale(.93); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes reyvi-backdrop-show {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes reyvi-dialog-show {
  from { opacity: 0; transform: translate3d(0, -10px, 0) scale(.975); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes reyvi-ambient-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes reyvi-login-arrive {
  from { opacity: 0; transform: translateY(20px) scale(.982); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes reyvi-login-content {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Keep screenshots, printing, keyboard navigation, and motion sensitivity usable. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  html.motion-enabled [data-motion="reveal"].motion-visible { animation: none !important; }
}
@media print {
  html.motion-enabled [data-motion="reveal"].motion-visible { animation: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}