/* ============================================================
   9Grid Portal — Global Motion Layer
   One shared animation system, loaded on every page (app + guest
   layouts) so entrances, hovers and micro-interactions feel the
   same everywhere. Keys off classes that already exist in
   theme.css / dashboard.css / invoice.css / auth.css etc, so no
   markup changes are required on most pages.
   ============================================================ */

:root{
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-pop: cubic-bezier(.34,1.56,.64,1);
}

/* Safety net: hover/entrance transforms (translateX/Y, scale) should never
   introduce a page-wide horizontal scrollbar. */
html, body{
  overflow-x: hidden;
}

/* ---------- Page-load entrances ---------- */

@keyframes navDropIn{
  from{ opacity:0; transform:translateY(-10px); }
  to  { opacity:1; transform:translateY(0); }
}
.app-navbar{
  animation: navDropIn .8s var(--ease-out) both;
}

@keyframes titleRise{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:translateY(0); }
}
.page-title{
  animation: titleRise .8s var(--ease-out) both;
  animation-delay:.1s;
}

/* Generic entrance stagger — applied via animations.js to cards,
   table/invoice rows, kpi tiles etc. Delay is set per-element with
   the --stagger-delay custom property. */
@keyframes staggerIn{
  from{ opacity:0; transform:translateY(16px) scale(.98); filter:blur(3px); }
  to  { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
.anim-stagger{
  animation: staggerIn .9s var(--ease-out) both;
  animation-delay: var(--stagger-delay, 0s);
}

/* ---------- Cards: any *-card element gets a soft hover lift ---------- */
.kpi-card, .status-card, .chart-card, .table-card, .summary-card,
.settings-card, .form-card, .user-card, .admin-user-card, .detail-card,
.surface-card{
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s var(--ease-out);
}
.kpi-card:hover, .status-card:hover, .chart-card:hover, .table-card:hover,
.summary-card:hover, .settings-card:hover, .form-card:hover, .user-card:hover,
.admin-user-card:hover, .detail-card:hover, .surface-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 28px -12px rgba(30,20,70,.18);
}

/* Invoice-history rows: lift + left accent instead of full card lift
   (they're list rows, not tiles) */
.inv-row{
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .35s ease;
  border-left: 3px solid transparent;
}
.inv-row:hover{
  transform: translateX(3px);
  border-left-color: var(--brand-purple, #6c3de0);
  box-shadow: 0 8px 20px -14px rgba(30,20,70,.25);
}

/* Plain bootstrap tables (main-dashboard etc.) — row highlight sweep */
table tbody tr{
  transition: background-color .35s ease, transform .35s var(--ease-out);
}
table tbody tr:hover{
  background-color: rgba(108,61,224,.045);
}

/* ---------- Buttons: lift + directional shine sweep ---------- */
.btn-purple, .btn-green, .btn-grey, .btn-outline-dark, .btn-purple-block,
.filter-btn, .btn-clone{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), background-color .35s ease;
}
.btn-purple::after, .btn-green::after, .btn-purple-block::after{
  content:'';
  position:absolute; inset:0; z-index:-1;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-120%);
  transition: transform .8s var(--ease-out);
}
.btn-purple:hover::after, .btn-green:hover::after, .btn-purple-block:hover::after{
  transform: translateX(120%);
}
.btn-purple:hover, .btn-green:hover, .btn-purple-block:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(108,61,224,.45);
}
.btn-grey:hover, .btn-outline-dark:hover, .btn-clone:hover{
  transform: translateY(-2px);
}
.btn-purple:active, .btn-green:active, .btn-purple-block:active,
.btn-grey:active, .btn-outline-dark:active{
  transform: translateY(0) scale(.98);
}

/* ---------- Nav links ---------- */
.app-nav-link{
  position: relative;
}
.app-nav-link::after{
  content:'';
  position:absolute; left:12px; right:12px; bottom:2px; height:2px;
  background: var(--brand-purple, #6c3de0);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.app-nav-link:hover::after, .app-nav-link.active::after{
  transform: scaleX(1);
}

/* ---------- Form controls ---------- */
.form-control, .form-select, .search-input{
  transition: box-shadow .4s var(--ease-out), transform .4s var(--ease-out), border-color .35s ease;
}
.form-control:focus, .form-select:focus, .search-input:focus{
  transform: translateY(-1px);
}

/* ---------- Badges: gentle pop when they first render + hover scale ---------- */
@keyframes badgePop{
  0%  { transform: scale(.6); opacity:0; }
  70% { transform: scale(1.06); opacity:1; }
  100%{ transform: scale(1); }
}
.badge-pending, .badge-pend, .badge-completed, .badge-comp, .badge-failed{
  display: inline-block;
  animation: badgePop .6s var(--ease-pop) both;
  transition: transform .35s var(--ease-out);
}
.badge-pending:hover, .badge-pend:hover, .badge-completed:hover,
.badge-comp:hover, .badge-failed:hover{
  transform: scale(1.08);
}

/* ---------- Bootstrap dropdown menu: fade + scale instead of snap ---------- */
.dropdown-menu.show{
  opacity: 0;
  transform: translateY(-6px) scale(.97);
  transform-origin: top right;
  animation: dropdownIn .3s var(--ease-out) forwards;
}
@keyframes dropdownIn{
  from{ opacity:0; transform: translateY(-6px) scale(.97); }
  to  { opacity:1; transform: translateY(0) scale(1); }
}

/* ---------- Toasts: slide in from the right ---------- */
@keyframes toastSlideIn{
  from{ opacity:0; transform: translateX(24px); }
  to  { opacity:1; transform: translateX(0); }
}
.toast.showing, .toast.show{
  animation: toastSlideIn .55s var(--ease-out) both;
}

/* ---------- Auth card (login / register / brand-select) ---------- */
@keyframes authCardIn{
  from{ opacity:0; transform: translateY(18px) scale(.97); filter:blur(4px); }
  to  { opacity:1; transform: translateY(0) scale(1); filter:blur(0); }
}
.auth-card{
  animation: authCardIn .9s var(--ease-out) both;
  animation-delay: .1s;
}
.logo-top, .secure-note{
  opacity: 0;
  animation: titleRise .8s var(--ease-out) forwards;
}
.logo-top{ animation-delay: .05s; }
.secure-note{ animation-delay: .5s; }

/* ---------- Reduced motion: hard override, everywhere ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .dropdown-menu{ opacity:1; transform:none; pointer-events:auto; }
}