/* ===== OrbePay Motion System — fluid & premium ===== */
:root {
  /* Easing curves */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-hover: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Durations */
  --dur-fast: 180ms;
  --dur-med: 320ms;
  --dur-slow: 380ms;

  /* Micro-interaction scale */
  --hover-scale: 1.02;
  --press-scale: 0.98;
}

/* GPU layer hint for animated surfaces */
.btn,
.chip,
.side-nav a,
.nav-group-btn,
.kpi-card,
.card,
.tx-stat,
.saldo-card,
.dash-m-card,
.admin-nav a,
.mobile-tabbar .tab,
.modal,
.dropdown-menu,
.auth-card,
.landing-card,
.feature-card,
.pricing-card,
.faq-item,
.site-nav a,
.header-tools button,
.notify,
.mobile-menu-btn,
.modal-close {
  -webkit-tap-highlight-color: transparent;
}

/* ── Buttons ── */
.btn,
.kyc-btn,
.admin-login-card .btn-primary,
.auth-form .btn-primary,
.auth-form .btn-ghost,
.landing .btn-primary,
.landing .btn-ghost,
.landing .btn-soft {
  transition:
    transform var(--dur-fast) var(--ease-hover),
    opacity var(--dur-fast) var(--ease-hover),
    box-shadow var(--dur-fast) var(--ease-hover),
    filter var(--dur-fast) var(--ease-hover),
    background var(--dur-fast) var(--ease-hover),
    border-color var(--dur-fast) var(--ease-hover) !important;
  will-change: transform;
}

.btn:hover,
.kyc-btn:hover {
  transform: translateY(-1px) scale(var(--hover-scale)) !important;
}

.btn:active,
.kyc-btn:active,
.chip:active,
.mobile-tabbar .tab:active {
  transform: scale(var(--press-scale)) !important;
  transition-duration: 120ms !important;
  transition-timing-function: var(--ease-hover) !important;
}

.btn-accent:hover,
.kyc-btn--primary:hover {
  box-shadow: 0 10px 32px rgba(0, 153, 255, 0.42) !important;
  filter: brightness(1.05) !important;
}

.btn-ghost:hover,
.btn.btn-ghost:hover {
  transform: translateY(-1px) scale(1.01) !important;
}

/* ── Cards & KPIs ── */
.kpi-card,
.card,
.tx-stat,
.saldo-card,
.status-card,
.perf-card,
.dash-m-card,
.admin-login-card,
.auth-card,
.kpi,
.admin .card,
.feature-card,
.pricing-card,
.landing-card {
  transition:
    transform var(--dur-med) var(--ease-out),
    opacity var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-hover),
    border-color var(--dur-med) var(--ease-hover) !important;
}

.kpi-card:hover,
.card:hover,
.tx-stat:hover,
.saldo-card:hover,
.dash-m-card:hover,
.feature-card:hover,
.pricing-card:hover {
  transform: translateY(-3px) scale(var(--hover-scale)) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(0, 184, 255, 0.12) !important;
}

/* ── Navigation & chips ── */
.side-nav a,
.admin-nav a,
.admin-nav button,
.nav-sub a,
.site-nav a,
.mobile-tabbar .tab {
  transition:
    transform var(--dur-fast) var(--ease-hover),
    background var(--dur-fast) var(--ease-hover),
    color var(--dur-fast) var(--ease-hover),
    box-shadow var(--dur-fast) var(--ease-hover),
    border-color var(--dur-fast) var(--ease-hover),
    opacity var(--dur-fast) var(--ease-hover) !important;
}

.side-nav a:hover,
.admin-nav a:hover,
.site-nav a:hover {
  transform: translateX(2px) !important;
}

.chip,
.chip-period-mobile,
.chip-tx-period,
.dash-m-period,
.notify,
.mobile-menu-btn,
.mobile-top .notify {
  transition:
    transform var(--dur-fast) var(--ease-hover),
    background var(--dur-fast) var(--ease-hover),
    border-color var(--dur-fast) var(--ease-hover),
    box-shadow var(--dur-fast) var(--ease-hover),
    color var(--dur-fast) var(--ease-hover) !important;
}

.chip:hover,
.dash-m-period:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 0 20px rgba(0, 153, 255, 0.12) !important;
}

.nav-group-btn .nav-chevron {
  transition: transform var(--dur-fast) var(--ease-spring) !important;
}

.nav-group.is-open .nav-chevron {
  transform: rotate(180deg) !important;
}

/* ── Dropdowns → controlados por OrbeMenu (ui-premium.css) ── */
.dropdown-menu.is-opening,
.dropdown-menu.is-open,
.dropdown-menu.is-closing,
.ui-dropdown__menu.is-opening,
.ui-dropdown__menu.is-open,
.ui-dropdown__menu.is-closing {
  animation: none !important;
}

/* ── Modals ── */
.modal-backdrop:not([hidden]):not(.is-hidden) {
  animation: orbeBackdropIn var(--dur-med) var(--ease-out) both;
}

.modal-backdrop:not([hidden]):not(.is-hidden) .modal,
.modal-backdrop.is-open .modal {
  animation: orbeModalIn var(--dur-med) var(--ease-out) both !important;
}

.modal-backdrop.is-closing {
  animation: orbeBackdropOut 220ms var(--ease-hover) both;
}

.modal-backdrop.is-closing .modal {
  animation: orbeModalOut 220ms var(--ease-hover) both !important;
}

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

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

@keyframes orbeModalIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes orbeModalOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}

.modal-close {
  transition:
    transform var(--dur-fast) var(--ease-hover),
    background var(--dur-fast) var(--ease-hover),
    color var(--dur-fast) var(--ease-hover) !important;
}

.modal-close:hover {
  transform: scale(1.08) !important;
}

.modal-close:active {
  transform: scale(0.95) !important;
}

/* ── View / page transitions ── */
.view-enter {
  animation: orbeViewIn var(--dur-slow) var(--ease-out) both !important;
}

@keyframes orbeViewIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dash-m-card.dash-m-pop {
  animation: dashMotionEnter var(--dur-med) var(--ease-out) both !important;
}

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

.dash-m-value.is-tick .dash-m-amt,
.dash-m-value.is-tick .dash-m-cur,
.kpi-card strong.is-tick {
  animation: numTick var(--dur-fast) var(--ease-spring) both !important;
}

@keyframes numTick {
  from {
    opacity: 0.5;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Tables ── */
.tx-table tbody tr,
.data-table tbody tr {
  transition: background var(--dur-fast) var(--ease-hover) !important;
}

.tx-table tbody tr:hover,
.data-table tbody tr:hover {
  transform: none !important;
}

/* ── Landing reveal ── */
.reveal {
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out) !important;
}

.reveal.in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ── Links ── */
.link-accent,
a.link-accent {
  transition: color var(--dur-fast) var(--ease-hover), opacity var(--dur-fast) var(--ease-hover) !important;
}

.link-accent:hover {
  opacity: 0.85;
}

/* ── Mobile tabbar active ── */
.mobile-tabbar .tab.is-active {
  transition: transform var(--dur-fast) var(--ease-spring) !important;
}

/* ── Auth page entrance ── */
.auth-card,
.admin-login-card {
  animation: authEnter var(--dur-slow) var(--ease-out) both;
}

@keyframes authEnter {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.auth-logo img {
  transition: transform var(--dur-med) var(--ease-out), filter var(--dur-med) var(--ease-hover) !important;
}

.auth-logo:hover img {
  transform: scale(1.03) !important;
}

/* ── Input focus (subtle, no layout shift) ── */
input,
select,
textarea {
  transition:
    border-color var(--dur-fast) var(--ease-hover),
    box-shadow var(--dur-fast) var(--ease-hover),
    background var(--dur-fast) var(--ease-hover) !important;
}

/* ===== ACCESSIBILITY: reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .kpi-card:hover,
  .card:hover,
  .tx-stat:hover,
  .dash-m-card:hover,
  .btn:hover,
  .chip:hover,
  .side-nav a:hover {
    transform: none !important;
  }

  .view-enter,
  .dash-m-card.dash-m-pop,
  .auth-card,
  .admin-login-card,
  .reveal,
  .reveal-on-scroll,
  .stagger-children > .stagger-item,
  .skeleton,
  .skeleton-loading > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .skeleton-shimmer,
  .skeleton-loading > *::after {
    display: none !important;
  }

  /* Decorative infinite spins — pause instead of remove */
  .vitrine-amplo__orbit,
  [class*="Spin"],
  [class*="spin"] {
    animation-play-state: paused !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Advanced motion — scroll reveal, stagger, skeleton shimmer
   ═══════════════════════════════════════════════════════════════ */

/* ── Scroll reveal (viewport) ── */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Compatível com landing (.reveal.in) */
.reveal-on-scroll.in,
.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Stagger cascade ── */
.stagger-children > .stagger-item {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
  transition-delay: calc(var(--stagger-index, 0) * var(--stagger-step, 50ms));
  will-change: opacity, transform;
}

.stagger-children.is-stagger-visible > .stagger-item {
  opacity: 1;
  transform: translateY(0);
}

/* Grupo visível no load (dashboard) */
.stagger-children[data-stagger-immediate].is-stagger-visible > .stagger-item {
  transition-delay: calc(var(--stagger-index, 0) * var(--stagger-step, 50ms));
}

/* ── Shimmer skeleton ── */
@keyframes shimmer-slide {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

.skeleton-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 35%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(255, 255, 255, 0.04) 65%,
    transparent 100%
  );
  animation: shimmer-slide 1.35s ease-in-out infinite;
  pointer-events: none;
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  min-height: 1rem;
}

.skeleton--row { height: 52px; border-radius: 10px; margin-bottom: 10px; }
.skeleton--text { height: 14px; width: 72%; margin-bottom: 8px; border-radius: 6px; }
.skeleton--text.short { width: 42%; }
.skeleton--card { height: 120px; border-radius: 16px; }
.skeleton--kpi { height: 96px; border-radius: 16px; }
.skeleton--avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }

/* Overlay shimmer em grids existentes (preserva DOM) */
.skeleton-loading > * {
  position: relative;
  color: transparent !important;
  user-select: none;
  pointer-events: none;
}

.skeleton-loading > * * {
  visibility: hidden;
}

.skeleton-loading > *::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.05);
  z-index: 1;
}

.skeleton-loading > *::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 2;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 35%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(255, 255, 255, 0.04) 65%,
    transparent 100%
  );
  animation: shimmer-slide 1.35s ease-in-out infinite;
}