/**
 * MOE 前台动效层（加强版）
 * 原则：只用 transform/opacity/filter，可被 prefers-reduced-motion 一键关掉
 */
:root {
  --moe-ease: cubic-bezier(.22, 1, .36, 1);
  --moe-spring: cubic-bezier(.34, 1.45, .64, 1);
  --moe-dur: .55s;
  --moe-dur-fast: .24s;
  --moe-dur-slow: .8s;
}

/* ===== Keyframes ===== */
@keyframes moe-page-in {
  0% { opacity: 0; transform: translateY(28px) scale(.96); filter: blur(6px); }
  60% { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes moe-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes moe-fade-down {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes moe-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes moe-scale-in {
  from { opacity: 0; transform: scale(.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes moe-slide-left {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes moe-slide-right {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes moe-pop {
  0% { transform: scale(.86); opacity: 0; }
  55% { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes moe-bounce-in {
  0% { transform: translateY(40px) scale(.95); opacity: 0; }
  60% { transform: translateY(-6px) scale(1.02); opacity: 1; }
  100% { transform: translateY(0) scale(1); }
}
@keyframes moe-pulse-soft {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .65; transform: scale(.98); }
}
@keyframes moe-pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(49, 110, 234, .35); }
  100% { box-shadow: 0 0 0 14px rgba(49, 110, 234, 0); }
}
@keyframes moe-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes moe-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes moe-float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}
@keyframes moe-cart-bump {
  0% { transform: scale(1); }
  30% { transform: scale(1.4); }
  55% { transform: scale(.92); }
  100% { transform: scale(1); }
}
@keyframes moe-nav-ink {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}
@keyframes moe-drawer-in {
  from { transform: translateX(-105%); opacity: .6; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes moe-mask-in {
  from { opacity: 0; backdrop-filter: blur(0); }
  to { opacity: 1; backdrop-filter: blur(2px); }
}
@keyframes moe-spin {
  to { transform: rotate(360deg); }
}
@keyframes moe-shake-x {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-8px); }
  30% { transform: translateX(8px); }
  45% { transform: translateX(-5px); }
  60% { transform: translateX(5px); }
  75% { transform: translateX(-2px); }
}
@keyframes moe-wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}
@keyframes moe-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(49,110,234,0)); }
  50% { filter: drop-shadow(0 0 10px rgba(49,110,234,.35)); }
}
@keyframes moe-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes moe-route-bar {
  0% { transform: translateX(-100%); opacity: 1; }
  50% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}
@keyframes moe-blob {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(8px,-10px) scale(1.05); }
  66% { transform: translate(-6px,6px) scale(.97); }
}
@keyframes moe-type-caret {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes moe-reveal-up {
  from { opacity: 0; transform: translateY(36px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes moe-reveal-left {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes moe-reveal-right {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes moe-zoom-soft {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: scale(1); }
}

/* ===== 顶栏路由进度条 ===== */
.app-root::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 200;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--primary, #316eea), #5b8def, transparent);
  transform: translateX(-100%);
  opacity: 0;
}
.app-root.moe-routing::before {
  animation: moe-route-bar .7s var(--moe-ease) both;
  opacity: 1;
}

/* ===== 顶栏入场 ===== */
.topbar {
  animation: moe-fade-down .45s var(--moe-ease) both;
  transition: box-shadow .35s ease, background .35s ease, backdrop-filter .35s ease;
}
html.moe-scrolled .topbar,
body.moe-scrolled .topbar {
  box-shadow: 0 8px 28px rgba(15, 40, 80, .08);
  backdrop-filter: blur(10px);
}

/* ===== 页面切换（更明显） ===== */
.shell-body > section,
.shell-body > .panel,
.console-main > section,
.console-main > .panel,
.console-main > .gf-card,
.console-main > .gf-account,
.cart-page,
.mk,
.gb-page,
.coupon-page,
.wheel-page,
.cloud-shop,
.about-page,
.zdsju-home,
.violation-page,
.agent-center-page,
.shell-body[data-anim] > section,
.shell-body[data-anim] > .panel {
  animation: moe-page-in var(--moe-dur) var(--moe-ease) both;
  will-change: transform, opacity;
}

/* ===== 滚动揭示（由 JS 加 .moe-in） ===== */
.moe-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .7s var(--moe-ease), transform .7s var(--moe-ease), filter .7s ease;
  filter: blur(4px);
}
.moe-reveal.moe-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.moe-reveal.from-left { transform: translateX(-32px); }
.moe-reveal.from-left.moe-in { transform: translateX(0); }
.moe-reveal.from-right { transform: translateX(32px); }
.moe-reveal.from-right.moe-in { transform: translateX(0); }
.moe-reveal.from-zoom { transform: scale(.92); }
.moe-reveal.from-zoom.moe-in { transform: scale(1); }
.moe-reveal.d1 { transition-delay: .06s; }
.moe-reveal.d2 { transition-delay: .12s; }
.moe-reveal.d3 { transition-delay: .18s; }
.moe-reveal.d4 { transition-delay: .24s; }
.moe-reveal.d5 { transition-delay: .3s; }
.moe-reveal.d6 { transition-delay: .36s; }

/* ===== 列表错落入场（更多项） ===== */
.goods-card, .card, .host-card, .tz-hot-card, .tz-why-card,
.tz-market-cards .mc, .mk-card, .coupon-grid > *,
.gb-list > *, .table tbody tr, .gf-card .stat, .agent-pkg,
.inv-row, .order-row, .tz-entry-item, .tz-strip .cell,
.tz-logos .logo-box, .tz-sol-card, .feat2 .f, .svc,
.ticket-item, .aff-card, .wheel-prize, .cart-item,
.pay-gw, .code-row, .field {
  animation: moe-fade-up .55s var(--moe-ease) both;
}
.goods-card:nth-child(1), .card:nth-child(1), .host-card:nth-child(1), .tz-hot-card:nth-child(1),
.mk-card:nth-child(1), .coupon-grid > *:nth-child(1), .tz-entry-item:nth-child(1),
.tz-strip .cell:nth-child(1), .cart-item:nth-child(1), .pay-gw:nth-child(1) { animation-delay: .03s; }
.goods-card:nth-child(2), .card:nth-child(2), .host-card:nth-child(2), .tz-hot-card:nth-child(2),
.mk-card:nth-child(2), .coupon-grid > *:nth-child(2), .tz-entry-item:nth-child(2),
.tz-strip .cell:nth-child(2), .cart-item:nth-child(2), .pay-gw:nth-child(2) { animation-delay: .08s; }
.goods-card:nth-child(3), .card:nth-child(3), .host-card:nth-child(3), .tz-hot-card:nth-child(3),
.mk-card:nth-child(3), .coupon-grid > *:nth-child(3), .tz-entry-item:nth-child(3),
.tz-strip .cell:nth-child(3), .cart-item:nth-child(3), .pay-gw:nth-child(3) { animation-delay: .13s; }
.goods-card:nth-child(4), .card:nth-child(4), .host-card:nth-child(4), .tz-hot-card:nth-child(4),
.mk-card:nth-child(4), .coupon-grid > *:nth-child(4), .tz-entry-item:nth-child(4),
.tz-strip .cell:nth-child(4), .cart-item:nth-child(4), .pay-gw:nth-child(4) { animation-delay: .18s; }
.goods-card:nth-child(5), .card:nth-child(5), .host-card:nth-child(5), .tz-hot-card:nth-child(5),
.mk-card:nth-child(5), .coupon-grid > *:nth-child(5), .tz-entry-item:nth-child(5),
.tz-strip .cell:nth-child(5), .cart-item:nth-child(5) { animation-delay: .23s; }
.goods-card:nth-child(6), .card:nth-child(6), .host-card:nth-child(6), .tz-hot-card:nth-child(6),
.mk-card:nth-child(6), .coupon-grid > *:nth-child(6), .tz-entry-item:nth-child(6) { animation-delay: .28s; }
.goods-card:nth-child(7), .card:nth-child(7), .host-card:nth-child(7), .mk-card:nth-child(7) { animation-delay: .33s; }
.goods-card:nth-child(8), .card:nth-child(8), .host-card:nth-child(8), .mk-card:nth-child(8) { animation-delay: .38s; }
.goods-card:nth-child(n+9), .card:nth-child(n+9), .host-card:nth-child(n+9), .mk-card:nth-child(n+9) { animation-delay: .42s; }

.table tbody tr:nth-child(1) { animation-delay: .04s; }
.table tbody tr:nth-child(2) { animation-delay: .09s; }
.table tbody tr:nth-child(3) { animation-delay: .14s; }
.table tbody tr:nth-child(4) { animation-delay: .19s; }
.table tbody tr:nth-child(5) { animation-delay: .24s; }
.table tbody tr:nth-child(6) { animation-delay: .29s; }
.table tbody tr:nth-child(n+7) { animation-delay: .34s; }

.field:nth-child(1) { animation-delay: .04s; }
.field:nth-child(2) { animation-delay: .1s; }
.field:nth-child(3) { animation-delay: .16s; }
.field:nth-child(4) { animation-delay: .22s; }
.field:nth-child(5) { animation-delay: .28s; }
.field:nth-child(n+6) { animation-delay: .34s; }

/* ===== 顶栏导航 ===== */
.nav button,
.nav .btn {
  position: relative;
  overflow: hidden;
  transition: color var(--moe-dur-fast) ease, background var(--moe-dur-fast) ease,
    transform var(--moe-dur-fast) var(--moe-spring), box-shadow var(--moe-dur-fast) ease;
}
.nav button::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: 3px;
  height: 2.5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary, #316eea), #7aa7ff);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .28s var(--moe-spring);
}
.nav button.active::after,
.nav button:hover::after { transform: scaleX(1); }
.nav button:hover { transform: translateY(-2px); }
.nav button:active { transform: scale(.94); }
.nav button.active { animation: moe-pop .4s var(--moe-spring) both; }

.brand {
  transition: transform .28s var(--moe-spring), opacity .2s ease;
}
.brand:hover { transform: translateY(-2px) scale(1.02); }
.brand:active { transform: scale(.97); }
.site-logo {
  transition: transform .4s var(--moe-spring), filter .35s ease;
}
.brand:hover .site-logo {
  transform: scale(1.08) rotate(-2deg);
  animation: moe-glow 1.6s ease infinite;
}

.cart-count {
  display: inline-block;
  transition: transform .25s var(--moe-spring);
}
.cart-count.bump { animation: moe-cart-bump .55s var(--moe-spring); }

/* ===== 按钮（全局弹跳感） ===== */
.btn, button.code-btn, .btn.buy, .btn.settle, .btn.primary, .btn.ghost,
.tz-cta .btn-main, .tz-cta .btn-sub, .cp-link, .code-btn {
  position: relative;
  overflow: hidden;
  transition: color var(--moe-dur-fast) ease, background var(--moe-dur-fast) ease,
    border-color var(--moe-dur-fast) ease, transform .28s var(--moe-spring),
    box-shadow .28s ease, opacity .2s ease, filter .25s ease;
}
.btn::before, .btn.primary::before, .btn.buy::before, .btn.settle::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%), rgba(255,255,255,.35), transparent 55%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.btn:hover::before, .btn.primary:hover::before { opacity: 1; }
.btn:hover:not(:disabled),
.btn.primary:hover:not(:disabled),
.btn.buy:hover:not(:disabled),
.btn.settle:hover:not(:disabled),
.tz-cta .btn-main:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 28px rgba(49, 110, 234, .28);
}
.btn.primary:hover:not(:disabled),
.btn.buy:hover:not(:disabled),
.btn.settle:hover:not(:disabled) {
  filter: brightness(1.06) saturate(1.05);
  animation: moe-pulse-ring 1.2s ease infinite;
}
.btn:active:not(:disabled),
.btn.primary:active:not(:disabled) {
  transform: translateY(0) scale(.96);
  box-shadow: 0 2px 8px rgba(49, 110, 234, .18);
}
.btn.is-loading { pointer-events: none; opacity: .75; }
.btn.is-loading::after {
  content: "";
  width: 14px; height: 14px;
  margin-left: 8px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  display: inline-block;
  vertical-align: -2px;
  animation: moe-spin .65s linear infinite;
}
.btn.ghost.is-loading::after,
.btn:not(.primary):not(.buy):not(.settle).is-loading::after {
  border-color: rgba(49,110,234,.25);
  border-top-color: var(--primary, #316eea);
}

/* ===== 卡片悬浮 ===== */
.card, .goods-card, .host-card, .tz-hot-card, .tz-why-card, .mk-card,
.tz-market-cards .mc, .coupon-grid > article, .gf-card, .aff-card,
.tz-logos .logo-box, .tz-sol-card, .svc, .ticket-item, .pay-gw {
  transition: transform .35s var(--moe-spring), box-shadow .35s ease,
    border-color .3s ease, filter .3s ease;
}
.card:hover, .goods-card:hover, .host-card:hover, .tz-hot-card:hover,
.tz-why-card:hover, .mk-card:hover, .tz-market-cards .mc:hover,
.coupon-grid > article:hover, .aff-card:hover, .tz-logos .logo-box:hover,
.tz-sol-card:hover, .svc:hover, .ticket-item:hover, .pay-gw:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 20px 40px rgba(15, 40, 80, .14);
}
.goods-card img, .tz-hot-card img, .mk-card img, .host-card img {
  transition: transform .55s var(--moe-ease);
}
.goods-card:hover img, .tz-hot-card:hover img, .mk-card:hover img {
  transform: scale(1.08);
}

/* ===== 表单 ===== */
.field input, .field select, .field textarea,
input:not([type=checkbox]):not([type=radio]), select, textarea {
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease,
    transform .2s var(--moe-spring);
}
.field input:hover, .field select:hover, .field textarea:hover {
  border-color: #c5d0e6;
}
.field input:focus, .field select:focus, .field textarea:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--primary, #316eea) !important;
  box-shadow: 0 0 0 4px rgba(49, 110, 234, .16);
  transform: translateY(-1px);
}
.panel {
  animation: moe-bounce-in .55s var(--moe-ease) both;
}
.captcha-gate {
  animation: moe-scale-in .4s var(--moe-ease) both;
  transition: border-color .25s ease, background .25s ease, color .25s ease,
    transform .25s var(--moe-spring), box-shadow .25s ease;
}
.captcha-gate:hover:not(.ok) {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 10px 24px rgba(49, 110, 234, .14);
}
.captcha-gate.ok { animation: moe-pop .45s var(--moe-spring) both; }
.captcha-gate.busy { animation: moe-pulse-soft 1s ease infinite; }
.err { animation: moe-shake-x .5s var(--moe-ease); }
.ok, .ok-msg { animation: moe-pop .4s var(--moe-spring) both; }

/* ===== 控制台 ===== */
.console-side {
  transition: transform .38s var(--moe-ease), box-shadow .38s ease;
}
.console-side.open { animation: moe-drawer-in .4s var(--moe-ease) both; }
.console-side-mask { animation: moe-mask-in .3s ease both; }
.console-nav .nav-item {
  transition: background .22s ease, color .22s ease, transform .28s var(--moe-spring),
    padding-left .28s ease, box-shadow .22s ease;
}
.console-nav .nav-item:hover {
  transform: translateX(6px);
  box-shadow: inset 3px 0 0 var(--primary, #316eea);
}
.console-nav .nav-item.on {
  animation: moe-slide-right .32s var(--moe-ease) both;
}
.console-nav .nav-item .ni {
  transition: transform .3s var(--moe-spring);
  display: inline-block;
}
.console-nav .nav-item:hover .ni { transform: scale(1.15) rotate(-6deg); }
.console-header { animation: moe-fade-down .35s var(--moe-ease) both; }
.console-brand { transition: transform .3s var(--moe-spring); }
.console-brand:hover { transform: scale(1.03); }

/* ===== 表格 ===== */
.table tbody tr {
  transition: background .2s ease, transform .25s var(--moe-spring), box-shadow .2s ease;
}
.table tbody tr:hover {
  background: rgba(49, 110, 234, .055);
  transform: scale(1.008);
  box-shadow: 0 4px 14px rgba(15, 40, 80, .06);
}
.table tbody tr:active { transform: scale(.995); }

/* ===== 首页装饰漂浮 ===== */
.tz-hero .tz-ribbon i,
.tz-hero .tz-dots i,
.tz-visual .cube {
  animation: moe-float 3.5s ease-in-out infinite;
}
.tz-hero .tz-ribbon i:nth-child(2),
.tz-visual .cube.c2 { animation-delay: .6s; animation-name: moe-float-slow; }
.tz-hero .tz-ribbon i:nth-child(3),
.tz-visual .cube.c3 { animation-delay: 1.2s; }
.tz-hero .inner > * {
  animation: moe-fade-up .65s var(--moe-ease) both;
}
.tz-hero .inner > *:nth-child(1) { animation-delay: .05s; }
.tz-hero .inner > *:nth-child(2) { animation-delay: .14s; }
.tz-hero .inner > *:nth-child(3) { animation-delay: .23s; }
.tz-hero .hl {
  display: inline-block;
  animation: moe-glow 2.4s ease-in-out infinite;
}
.tz-cta .btn-main { transition: transform .28s var(--moe-spring), box-shadow .28s ease; }
.tz-cta .btn-main:hover { transform: translateY(-3px) scale(1.05); }
.tz-tag {
  animation: moe-wiggle 2.8s ease-in-out infinite;
  transform-origin: left center;
}
.tz-stats strong {
  display: inline-block;
  animation: moe-pop .6s var(--moe-spring) both;
}

/* 首页分区标题下划线生长 */
.tz-hot h2, .tz-why h2, .tz-sol h2, .tz-infra h2, .tz-partner h2,
.section-title, .main-card-title, .about-page h2, .mk h2, .gb-page h1,
.cart-page .page-hd h1, .coupon-page .cp-hero h1 {
  position: relative;
}
.tz-hot h2::after, .tz-why h2::after, .section-title::after,
.cart-page .page-hd h1::after {
  content: "";
  display: block;
  width: 48px; height: 3px;
  margin-top: 8px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary, #316eea), transparent);
  transform-origin: left;
  animation: moe-progress .7s var(--moe-ease) both;
}

/* ===== Loading ===== */
.loading-block, .skeleton, .is-loading:not(.btn) {
  background: linear-gradient(90deg, #eef2f8 20%, #dde5f3 40%, #eef2f8 60%);
  background-size: 400% 100%;
  animation: moe-shimmer 1.15s ease infinite;
}
.muted.tip { animation: moe-fade-in .4s ease both; }
.flash-err { animation: moe-shake-x .5s var(--moe-ease), moe-fade-in .25s ease; }

/* ===== 汉堡菜单 ===== */
.nav-toggle span,
.console-menu-btn span {
  transition: transform .32s var(--moe-spring), opacity .2s ease, background .2s ease, width .2s ease;
}
.nav-toggle.open span:nth-child(1),
.console-menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2),
.console-menu-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3),
.console-menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== 链接 / 角标 ===== */
a {
  transition: color .2s ease, opacity .2s ease, transform .2s ease;
}
a:hover { opacity: .88; }
.badge-n, .cart-count, .hot {
  transition: transform .3s var(--moe-spring);
}
.hot { animation: moe-pulse-soft 1.8s ease-in-out infinite; }

/* ===== 购物车 / 支付 ===== */
.cart-item {
  transition: transform .3s var(--moe-spring), box-shadow .3s ease, border-color .25s ease;
}
.cart-item:hover { transform: translateX(4px); box-shadow: 0 8px 20px rgba(15,40,80,.08); }
.pay-gw.on, .pay-gw.selected, .pay-gw.active {
  animation: moe-pop .4s var(--moe-spring) both;
}
.btn.settle {
  animation: moe-fade-up .5s var(--moe-ease) both;
}

/* ===== 转盘 / 团购轻微呼吸 ===== */
.wheel-page .wheel-disk,
.wheel-page canvas,
.gb-page .gb-hero {
  animation: moe-float-slow 5s ease-in-out infinite;
}

/* ===== Footer ===== */
.site-icp-foot, .theme-icp-foot, footer, .about-actions {
  animation: moe-fade-up .6s var(--moe-ease) both;
}

/* ===== 页面切换时强制重播 ===== */
.shell-body[data-anim] > section,
.shell-body[data-anim] > .panel {
  animation-name: moe-page-in;
  animation-duration: var(--moe-dur);
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .moe-reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}