/* FAZGAME 5.4.2 — motion language inspired by Tavola, independently implemented. */
:root{--fg-motion-ease:cubic-bezier(.22,1,.36,1);--fg-motion-quick:180ms;--fg-motion-route:370ms}
/* Native same-document route snapshots: slide and crossfade. Graceful fallback below. */
.fg-saas-layout #content{view-transition-name:fg-hub-page;contain:layout}
::view-transition-old(fg-hub-page){animation:fg-page-out 220ms cubic-bezier(.4,0,1,1) both}
::view-transition-new(fg-hub-page){animation:fg-page-in 410ms var(--fg-motion-ease) both}
@keyframes fg-page-out{to{opacity:0;transform:translate3d(-16px,0,0) scale(.986);filter:blur(3px)}}
@keyframes fg-page-in{from{opacity:0;transform:translate3d(23px,0,0) scale(.985);filter:blur(3px)}to{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}}
@keyframes fg-card-enter{from{opacity:0;transform:translate3d(0,17px,0) scale(.984)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
/* Cards and tables follow the new page in small waves, not every data refresh. */
.fg-motion-route-enter .fg-saas-dashboard-metrics>.fg-saas-metric,
.fg-motion-route-enter .fg-saas-main-grid>.fg-saas-panel,
.fg-motion-route-enter .fg-saas-recent,
.fg-motion-route-enter .fg-saas-analytics-hero,
.fg-motion-route-enter .grid4>.kpi,
.fg-motion-route-enter .fg-directory-group,
.fg-motion-route-enter .builder-tool,
.fg-motion-route-enter .card.panel-pad,
.fg-motion-route-enter .data-table,
.fg-motion-route-enter .toolbar{
 animation:fg-card-enter 470ms var(--fg-motion-ease) both;
}
.fg-motion-route-enter .fg-saas-dashboard-metrics>:nth-child(2),
.fg-motion-route-enter .fg-saas-main-grid>:nth-child(2),
.fg-motion-route-enter .fg-directory-group:nth-child(2),
.fg-motion-route-enter .grid4>:nth-child(2){animation-delay:60ms}
.fg-motion-route-enter .fg-saas-dashboard-metrics>:nth-child(3),
.fg-motion-route-enter .fg-directory-group:nth-child(3),
.fg-motion-route-enter .grid4>:nth-child(3){animation-delay:110ms}
.fg-motion-route-enter .fg-saas-dashboard-metrics>:nth-child(4),
.fg-motion-route-enter .grid4>:nth-child(4),
.fg-motion-route-enter .fg-directory-group:nth-child(4){animation-delay:150ms}
.fg-motion-route-enter .fg-saas-recent{animation-delay:180ms}
/* Responsive, premium microinteractions with safe visual feedback only. */
.fg-saas-layout .fg-saas-tab,.fg-saas-layout .fg-saas-rail-link,
.fg-saas-layout .fg-saas-rail-toggle,.fg-saas-layout .fg-floating-sub-link,
.fg-saas-layout button.btn,.fg-saas-layout .fg-saas-shortcut,
.fg-saas-layout .fg-saas-recent-row,.fg-saas-layout .fg-module-link,
.fg-saas-layout .fg-saas-text-link{
 position:relative;isolation:isolate;
 transition:transform var(--fg-motion-quick) var(--fg-motion-ease),background-color var(--fg-motion-quick),box-shadow 240ms,color var(--fg-motion-quick),border-color var(--fg-motion-quick);
}
.fg-saas-layout .fg-saas-tab:active,.fg-saas-layout .fg-saas-rail-link:active,
.fg-saas-layout .fg-saas-shortcut:active,.fg-saas-layout .fg-saas-recent-row:active,
.fg-saas-layout button.btn:active{transform:scale(.965)}
.fg-saas-layout .fg-saas-metric,.fg-saas-layout .fg-saas-panel,
.fg-saas-layout .fg-saas-analytics-hero,.fg-saas-layout .card.kpi{
 transition:transform 300ms var(--fg-motion-ease),box-shadow 300ms,border-color 240ms;
}
@media(hover:hover) and (pointer:fine){
 .fg-saas-layout .fg-saas-metric:hover,.fg-saas-layout .fg-saas-panel:hover,
 .fg-saas-layout .fg-saas-analytics-hero:hover{transform:translate3d(0,-3px,0);box-shadow:0 15px 35px #19252113}
 .fg-saas-layout .fg-saas-shortcut:hover,.fg-saas-layout .fg-saas-recent-row:hover{transform:translate3d(2px,-2px,0)}
}
/* Lightweight soft pulse follows tap. Does not block pointer events. */
.fg-motion-ripple{position:absolute!important;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit;animation:fg-tap-sheen 550ms ease-out both;background:radial-gradient(circle 55px at var(--fg-ripple-x,50%) var(--fg-ripple-y,50%),#e8c45c66 0%,#e8c45c22 45%,transparent 100%)}
@keyframes fg-tap-sheen{0%{opacity:.05;transform:scale(.88)}35%{opacity:.75;transform:scale(1)}100%{opacity:0;transform:scale(1.14)}}
/* Slide-out expanded rail actions individually instead of snapping into place. */
@keyframes fg-rail-item{from{opacity:0;transform:translateX(-9px)}to{opacity:1;transform:translateX(0)}}
.fg-saas-rail.is-expanded .fg-floating-group{animation:fg-rail-item 280ms var(--fg-motion-ease) both}
.fg-saas-rail.is-expanded .fg-floating-group:nth-child(2){animation-delay:40ms}
.fg-saas-rail.is-expanded .fg-floating-group:nth-child(3){animation-delay:80ms}
.fg-saas-rail.is-expanded .fg-floating-group:nth-child(4){animation-delay:120ms}
/* Table / list transitions only when navigation switches, not on every API refresh. */
.fg-motion-route-enter .data-table tbody tr{animation:fg-card-enter 330ms var(--fg-motion-ease) both}
.fg-motion-route-enter .data-table tbody tr:nth-child(2){animation-delay:40ms}
.fg-motion-route-enter .data-table tbody tr:nth-child(3){animation-delay:70ms}
.fg-motion-route-enter .data-table tbody tr:nth-child(4){animation-delay:100ms}
.fg-motion-route-enter .data-table tbody tr:nth-child(n+5){animation-delay:120ms}
/* Modal content is visible immediately; subtle opening, avoid reflow/scroll trap. */
.fg-saas-layout .modal-bg>.modal,.fg-saas-layout .record-scrim>.record-dialog{animation:fg-card-enter 275ms var(--fg-motion-ease) both}
@media(max-width:850px){
 ::view-transition-old(fg-hub-page){animation-duration:160ms}
 ::view-transition-new(fg-hub-page){animation-duration:290ms}
 .fg-motion-route-enter .data-table tbody tr:nth-child(n+5){animation-delay:60ms}
}
@media(prefers-reduced-motion:reduce){
 .fg-saas-layout #content{view-transition-name:none}
 ::view-transition-old(fg-hub-page),::view-transition-new(fg-hub-page){animation:none!important}
 .fg-saas-layout .fg-motion-route-enter *,
 .fg-saas-layout .fg-motion-route-enter *::before,.fg-saas-layout .fg-motion-route-enter *::after,
 .fg-saas-layout .fg-floating-group,.fg-saas-layout .fg-motion-ripple{animation:none!important;transition:none!important}
}
@media print{.fg-saas-layout #content{view-transition-name:none!important}.fg-motion-ripple{display:none!important}}

/* Synchronous navigation wrapper: slide page content as a single motion layer. */
.fg-saas-layout .fg-motion-route-enter{animation:fg-page-in 390ms var(--fg-motion-ease) both}
@media(max-width:850px){.fg-saas-layout .fg-motion-route-enter{animation-duration:300ms}}
@media(prefers-reduced-motion:reduce){.fg-saas-layout .fg-motion-route-enter{animation:none!important}}