/**
 * 入场动画与 stagger（仅 animation / animation-delay）
 *
 * 禁止在本文件写：layout（flex/grid/padding/min-height/overflow 等）、
 * transition、hover 变换。壳层布局 → page-shells.css；微交互 → components.css
 *
 * @author Telegram @okgeceo
 */

@keyframes ok-row-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.ok-page-shell {
  animation: ok-slide-in-from-bottom var(--duration-normal) var(--ease-snappy) both;
}

.ok-page-shell--flat,
.ok-page-shell--flat > .ok-shop,
.ok-page-shell--auth,
.ok-page-shell--status,
.ok-page-shell[data-ok-motion="none"] {
  animation: none;
}

.ok-page-shell--flat .ok-user-content > *,
.ok-page-shell--flat .ok-user-sidebar .ok-sidebar-nav,
.ok-page-shell--flat .ok-page-header,
.ok-page-shell--flat .ok-table tbody tr,
.ok-page-shell--flat .ok-section-stack > *,
.ok-page-shell--flat .ok-grid > .ok-card,
.ok-page-shell--flat .ok-grid > .ok-stat-card,
.ok-page-shell--flat .ok-tutorial__grid > .ok-card,
.ok-page-shell--flat .ok-buy-grid > .ok-card,
.ok-page-shell--flat .ok-buy-grid > .ok-buy-shop,
.ok-page-shell--flat .ok-balance-recharge-grid > *,
.ok-page-shell--flat .ok-balance-pay-grid > *,
.ok-page-shell--flat > .ok-card,
.ok-page-shell--flat > .ok-grid,
.ok-page-shell--flat > .ok-alert,
.ok-page-shell--flat .ok-step {
  animation: none;
}

.ok-page-shell--auth .ok-auth-shell {
  animation: none;
}

.ok-page-enter {
  animation: ok-slide-in-from-bottom var(--duration-normal) var(--ease-snappy) both;
}

.ok-page-shell .ok-page-header {
  animation: ok-slide-in-from-bottom var(--duration-slow) var(--ease-snappy) both;
  animation-delay: calc(var(--stagger-step) * 1);
}

.ok-page-shell .ok-user-sidebar .ok-sidebar-nav {
  animation: ok-slide-in-from-bottom var(--duration-slow) var(--ease-snappy) both;
  animation-delay: calc(var(--stagger-step) * 1);
}

.ok-page-shell .ok-user-content > * {
  animation: ok-slide-in-from-bottom var(--duration-normal) var(--ease-snappy) both;
}

.ok-page-shell .ok-user-content > *:nth-child(1) { animation-delay: calc(var(--stagger-step) * 1); }
.ok-page-shell .ok-user-content > *:nth-child(2) { animation-delay: calc(var(--stagger-step) * 2); }
.ok-page-shell .ok-user-content > *:nth-child(3) { animation-delay: calc(var(--stagger-step) * 3); }
.ok-page-shell .ok-user-content > *:nth-child(4) { animation-delay: calc(var(--stagger-step) * 4); }
.ok-page-shell .ok-user-content > *:nth-child(5) { animation-delay: calc(var(--stagger-step) * 5); }
.ok-page-shell .ok-user-content > *:nth-child(n+6) { animation-delay: calc(var(--stagger-step) * 5); }

.ok-page-shell .ok-section-stack > *,
.ok-page-shell > .ok-balance-section,
.ok-page-shell > .ok-grid,
.ok-page-shell > .ok-alert,
.ok-page-shell > .ok-card,
.ok-page-shell .ok-buy-grid > .ok-card,
.ok-page-shell .ok-buy-grid > .ok-buy-shop,
.ok-page-shell .ok-balance-recharge-grid > *,
.ok-page-shell .ok-balance-pay-grid > *,
.ok-page-shell .ok-grid > .ok-card,
.ok-page-shell .ok-grid > .ok-stat-card,
.ok-page-shell .ok-tutorial__grid > .ok-card,
.ok-page-shell .ok-step {
  animation: ok-slide-in-from-bottom var(--duration-normal) var(--ease-snappy) both;
}

.ok-page-shell .ok-section-stack > *:nth-child(1),
.ok-page-shell .ok-balance-recharge-grid > *:nth-child(1),
.ok-page-shell .ok-balance-pay-grid > *:nth-child(1),
.ok-page-shell .ok-buy-grid > .ok-buy-detail { animation-delay: calc(var(--stagger-step) * 2); }

.ok-page-shell .ok-section-stack > *:nth-child(2),
.ok-page-shell .ok-balance-recharge-grid > *:nth-child(2),
.ok-page-shell .ok-balance-pay-grid > *:nth-child(2),
.ok-page-shell .ok-buy-grid > .ok-buy-shop { animation-delay: calc(var(--stagger-step) * 3); }

.ok-page-shell .ok-auth-shell {
  animation: ok-slide-in-from-bottom var(--duration-fast) var(--ease-snappy) both;
  animation-delay: 0;
}

.ok-page-shell .ok-section-stack > *:nth-child(4) { animation-delay: calc(var(--stagger-step) * 5); }

.ok-page-shell .ok-section-stack > *:nth-child(n+5) { animation-delay: calc(var(--stagger-step) * 6); }

.ok-page-shell .ok-grid > .ok-card:nth-child(1),
.ok-page-shell .ok-grid > .ok-stat-card:nth-child(1),
.ok-page-shell .ok-tutorial__grid > .ok-card:nth-child(1) { animation-delay: calc(var(--stagger-step) * 2); }

.ok-page-shell .ok-grid > .ok-card:nth-child(2),
.ok-page-shell .ok-grid > .ok-stat-card:nth-child(2),
.ok-page-shell .ok-tutorial__grid > .ok-card:nth-child(2) { animation-delay: calc(var(--stagger-step) * 3); }

.ok-page-shell .ok-grid > .ok-card:nth-child(3),
.ok-page-shell .ok-grid > .ok-stat-card:nth-child(3),
.ok-page-shell .ok-tutorial__grid > .ok-card:nth-child(3) { animation-delay: calc(var(--stagger-step) * 4); }

.ok-page-shell .ok-grid > .ok-card:nth-child(4),
.ok-page-shell .ok-grid > .ok-stat-card:nth-child(4),
.ok-page-shell .ok-tutorial__grid > .ok-card:nth-child(4) { animation-delay: calc(var(--stagger-step) * 4); }

.ok-page-shell .ok-grid > .ok-card:nth-child(n+5),
.ok-page-shell .ok-grid > .ok-stat-card:nth-child(n+5),
.ok-page-shell .ok-tutorial__grid > .ok-card:nth-child(n+5) { animation-delay: calc(var(--stagger-step) * 4); }

.ok-page-shell .ok-table tbody tr {
  animation: ok-row-in var(--duration-normal) var(--ease-snappy) both;
}

.ok-page-shell .ok-table tbody tr:nth-child(1) { animation-delay: 0ms; }
.ok-page-shell .ok-table tbody tr:nth-child(2) { animation-delay: 32ms; }
.ok-page-shell .ok-table tbody tr:nth-child(3) { animation-delay: 64ms; }
.ok-page-shell .ok-table tbody tr:nth-child(4) { animation-delay: 96ms; }
.ok-page-shell .ok-table tbody tr:nth-child(5) { animation-delay: 128ms; }
.ok-page-shell .ok-table tbody tr:nth-child(n+6) { animation-delay: 128ms; }

.ok-page-shell .ok-alert,
.ok-page-shell .ok-empty,
.ok-page-shell .ok-site-notice {
  animation: ok-fade-in var(--duration-slow) var(--ease-out) both;
  animation-delay: calc(var(--stagger-step) * 2);
}

.ok-modal-backdrop.is-open .ok-modal,
.ok-modal-float:not([hidden]) .ok-modal {
  animation: ok-scale-in var(--duration-normal) var(--ease-snappy) both;
}

.ok-qr-panel .ok-card {
  animation: ok-scale-in var(--duration-normal) var(--ease-snappy) both;
}

@media (prefers-reduced-motion: reduce) {
  .ok-page-shell,
  .ok-page-shell *,
  .ok-page-enter,
  .ok-modal-backdrop.is-open .ok-modal,
  .ok-modal-float:not([hidden]) .ok-modal,
  .ok-qr-panel .ok-card {
    animation: none !important;
  }
}