/* Tokens e utilitários de movimento compartilhados. */
:root {
  --xbz-motion-fast: 150ms;
  --xbz-motion-standard: 190ms;
  --xbz-motion-exit: 90ms;
  --xbz-motion-enter: cubic-bezier(.22, 1, .36, 1);
  --xbz-motion-state: cubic-bezier(.2, .8, .2, 1);
  --xbz-skeleton-base: rgba(0, 56, 101, .075);
  --xbz-skeleton-highlight: rgba(255, 255, 255, .74);
}

body.motion-system-ready :where(button, .btn, [role="button"], .nav-link) {
  transition-timing-function: var(--xbz-motion-state);
}

body.motion-system-ready :where(button, .btn, [role="button"]):not(:disabled):active {
  scale: .975;
}

body.motion-system-ready :where(input, select, textarea, button, a):focus-visible {
  transition: box-shadow var(--xbz-motion-fast) var(--xbz-motion-state),
              outline-color var(--xbz-motion-fast) var(--xbz-motion-state);
}

@keyframes xbzRequiredShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.required-field-shake {
  animation: xbzRequiredShake 480ms cubic-bezier(.36, .07, .19, .97) both;
  border-color: rgba(199, 66, 80, .72) !important;
  box-shadow:
    0 0 0 3px var(--required-field-focus-ring),
    0 5px 14px var(--required-field-focus-shadow) !important;
}

.motion-page-pre-enter {
  opacity: 0;
  transform: translateY(5px);
}

.motion-page-pre-enter.motion-page-enter {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--xbz-motion-standard) var(--xbz-motion-enter),
              transform var(--xbz-motion-standard) var(--xbz-motion-enter);
}

.motion-page-exit {
  opacity: .55;
  transform: translateY(-2px);
  transition: opacity var(--xbz-motion-exit) cubic-bezier(.4, 0, 1, 1),
              transform var(--xbz-motion-exit) cubic-bezier(.4, 0, 1, 1);
}

/* Um transform no ancestral muda o bloco de referência de elementos fixed.
   Nas páginas com rodapé fixo, preserva o fade sem recalcular sua largura. */
body.app-shell #conteudoPrincipal:is(.cart-view, .orders-view).motion-page-pre-enter,
body.app-shell #conteudoPrincipal:is(.cart-view, .orders-view).motion-page-enter,
body.app-shell #conteudoPrincipal:is(.cart-view, .orders-view).motion-page-exit {
  transform: none;
}

.motion-image-loading {
  opacity: .28;
  background: linear-gradient(100deg,
    var(--xbz-skeleton-base) 20%,
    var(--xbz-skeleton-highlight) 42%,
    var(--xbz-skeleton-base) 64%);
  background-size: 220% 100%;
  animation: xbzSkeletonSweep 1.15s linear infinite;
}

.motion-image-ready {
  opacity: 1;
  transition: opacity var(--xbz-motion-standard) var(--xbz-motion-enter),
              filter var(--xbz-motion-standard) var(--xbz-motion-enter);
}

.motion-skeleton-stack {
  display: grid;
  width: min(560px, 88%);
  margin-top: 16px;
  gap: 10px;
  pointer-events: none;
}

.app-initial-loading,
.system-loading-state {
  display: flex;
  width: 100%;
  min-height: min(420px, calc(100svh - var(--app-header-height, 72px) - 48px));
  align-items: center;
  justify-content: center;
  gap: 11px;
  color: #526d7a;
  flex-direction: column;
  text-align: center;
}

.app-initial-loading strong,
.system-loading-state strong {
  color: #284f65;
  font-size: .88rem;
  font-weight: 750;
}

.system-loading-state {
  min-height: 100%;
}

:is(.showcase-loading, .products-loading, .products-direct-loading, .orders-loading-card, .cart-loading, .app-initial-loading, .system-loading-state) .motion-skeleton-stack {
  width: min(520px, 88%);
  margin-top: 4px;
}

.motion-skeleton-line,
.motion-skeleton-card,
.motion-page-skeleton__line,
.motion-page-skeleton__card {
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(100deg,
    var(--xbz-skeleton-base) 20%,
    var(--xbz-skeleton-highlight) 42%,
    var(--xbz-skeleton-base) 64%);
  background-size: 220% 100%;
  animation: xbzSkeletonSweep 1.15s linear infinite;
}

.motion-skeleton-line { height: 12px; }
.motion-skeleton-line:nth-child(2) { width: 76%; }
.motion-skeleton-line:nth-child(3) { width: 48%; }

.motion-page-skeleton {
  display: grid;
  width: 100%;
  min-height: min(620px, calc(100svh - 140px));
  padding: clamp(8px, 1.5vw, 20px);
  align-content: start;
  gap: 18px;
}

.motion-page-skeleton__heading { display: grid; width: min(420px, 72%); gap: 9px; }
.motion-page-skeleton__line { height: 18px; }
.motion-page-skeleton__line:last-child { width: 68%; height: 11px; }
.motion-page-skeleton__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.motion-page-skeleton__card { height: 150px; border-radius: 20px; }
.motion-page-skeleton__stage { height: clamp(220px, 42svh, 430px); border-radius: 20px; }

@keyframes xbzSkeletonSweep {
  to { background-position: -220% 0; }
}

@media (max-width: 767.98px) {
  .motion-skeleton-stack,
  :is(.showcase-loading, .products-loading, .products-direct-loading, .orders-loading-card, .cart-loading, .app-initial-loading, .system-loading-state) .motion-skeleton-stack {
    width: min(360px, 92%);
  }

  .app-initial-loading,
  .system-loading-state {
    min-height: min(360px, calc(100svh - var(--app-header-height, 64px) - 28px));
  }
}

body.app-shell #overlayCarregando {
  top: var(--app-header-height) !important;
  bottom: 0;
  height: auto !important;
}

.motion-value-skeleton {
  display: inline-block;
  min-width: 3.5ch;
  color: transparent !important;
  border-radius: 8px;
  background: linear-gradient(100deg, var(--xbz-skeleton-base) 20%, var(--xbz-skeleton-highlight) 42%, var(--xbz-skeleton-base) 64%);
  background-size: 220% 100%;
  animation: xbzSkeletonSweep 1.15s linear infinite;
}

#dashboardMessageText.motion-value-skeleton { min-width: min(520px, 65vw); }
.dashboard-card-value.motion-value-skeleton {
  width: 2.75ch;
  min-width: 2.75ch;
  align-self: flex-end;
}

.dashboard-card-secondary strong.motion-value-skeleton {
  width: 2.25ch;
  min-width: 2.25ch;
  flex: 0 0 2.25ch;
}

.motion-value-ready { animation: xbzValueReady 180ms var(--xbz-motion-enter) both; }

@keyframes xbzValueReady {
  from { opacity: .72; filter: blur(1px); transform: translateY(1px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .motion-page-exit,
  .motion-page-pre-enter { opacity: 1; transform: none; }
  .motion-image-loading,
  .motion-skeleton-line,
  .motion-skeleton-card,
  .motion-page-skeleton__line,
  .motion-page-skeleton__card,
  .motion-value-skeleton { background-position: 0 0; }
  .required-field-shake { animation: none; }
}