/*
 * SmallJia Toolbox balanced performance layer.
 * Keep the richer hover motion from the earlier Toolbox 2.0 design, while
 * preventing wheel/touch scrolling from continuously retriggering expensive
 * hover/layout work as cards move underneath a stationary pointer.
 */

/* The old sticky glass bar was one of the largest repaint areas on this page.
 * Keep the same card appearance, but let it participate in normal document flow.
 */
.sj-toolbox-filter-wrap {
  position: relative !important;
  top: auto !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--anzhiyu-card-bg) !important;
}

/* Do not use content-visibility on this long card page. Fast wheel scrolling can
 * outrun deferred painting and expose an empty/white area before the section is
 * rasterized. Keep sections paintable and isolate their layout calculations.
 */
.sj-toolbox-section {
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
  contain: layout style;
}

/* Avoid permanently promoting every card/chip to a compositor layer. */
.sj-toolbox-chip,
.sj-toolbox-card {
  transform: none;
}

.sj-toolbox-card {
  isolation: auto !important;
  will-change: auto;
  transition:
    transform .30s cubic-bezier(.2,.8,.2,1),
    background .24s ease,
    border-color .24s ease,
    box-shadow .30s ease !important;
}

/* The original radial pseudo layer looked good but multiplied paint cost across
 * the whole list. Use a direct blue surface while preserving the stronger lift
 * and icon/body movement users saw in the earlier page.
 */
.sj-toolbox-card::before {
  display: none !important;
}

.sj-toolbox-card:hover {
  will-change: transform;
  transform: translate3d(0, -4px, 0) scale(1.012) !important;
  background: linear-gradient(135deg, var(--anzhiyu-main), #5d66f4 72%, #7178ff) !important;
  border-color: transparent !important;
  box-shadow: 0 13px 28px rgba(66, 90, 239, .20) !important;
}

/* Restore the more obvious icon-collapse motion from the earlier version. It is
 * allowed while the page is stationary, but suspended during active scrolling
 * by the sjtb-page-scrolling state below.
 */
.sj-toolbox-card-icon {
  transition:
    width .30s ease,
    min-width .30s ease,
    height .30s ease,
    margin .30s ease,
    opacity .24s ease,
    transform .38s cubic-bezier(.2,.8,.2,1),
    border-color .24s ease !important;
}

.sj-toolbox-card:hover .sj-toolbox-card-icon {
  width: 10px !important;
  min-width: 10px !important;
  height: 46px !important;
  margin-right: -2px !important;
  border-color: transparent !important;
  opacity: .16 !important;
  transform: translate3d(-5px, 0, 0) rotate(-7deg) scale(.80) !important;
}

.sj-toolbox-card-icon img {
  transition: opacity .20s ease, transform .36s cubic-bezier(.2,.8,.2,1), filter .24s ease !important;
}

.sj-toolbox-card:hover .sj-toolbox-card-icon img {
  transform: scale(1.16) rotate(3deg) !important;
  filter: saturate(1.08) !important;
}

.sj-toolbox-card-body {
  margin-left: 13px !important;
  transition: margin-left .30s ease, transform .30s cubic-bezier(.2,.8,.2,1) !important;
}

.sj-toolbox-card:hover .sj-toolbox-card-body {
  margin-left: 3px !important;
  transform: translate3d(1px, 0, 0) !important;
}

.sj-toolbox-card-title,
.sj-toolbox-card-desc,
.sj-toolbox-card-arrow,
.sj-toolbox-card-meta {
  transition: color .22s ease, background .22s ease, opacity .22s ease !important;
}

.sj-toolbox-card:hover .sj-toolbox-card-title,
.sj-toolbox-card:hover .sj-toolbox-card-desc,
.sj-toolbox-card:hover .sj-toolbox-card-arrow {
  color: #fff !important;
}

.sj-toolbox-card:hover .sj-toolbox-card-desc {
  opacity: .88 !important;
}

.sj-toolbox-card:hover .sj-toolbox-card-meta {
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
}

.sj-toolbox-card:hover .sj-toolbox-favorite {
  background: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.90) !important;
  opacity: 1 !important;
}

.sj-toolbox-card:hover .sj-toolbox-favorite.active {
  background: rgba(255,255,255,.92) !important;
  color: #f4ad2f !important;
}

.sj-toolbox-mini:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(66,90,239,.22) !important;
  background: rgba(66,90,239,.045) !important;
  box-shadow: 0 8px 18px rgba(50,63,105,.07) !important;
}

/* Critical scroll optimization: wheel/touch scroll first enters this state, so
 * cards under the pointer stop changing layout while the viewport is moving.
 * As soon as scrolling settles, the rich hover effect returns immediately.
 */
html.sjtb-page-scrolling .sj-toolbox-card,
html.sjtb-page-scrolling .sj-toolbox-mini {
  pointer-events: none !important;
}

html.sjtb-page-scrolling .sj-toolbox-card,
html.sjtb-page-scrolling .sj-toolbox-card-icon,
html.sjtb-page-scrolling .sj-toolbox-card-icon img,
html.sjtb-page-scrolling .sj-toolbox-card-body,
html.sjtb-page-scrolling .sj-toolbox-mini {
  transition: none !important;
}

/* Defensive reset in case a card was already hovered when scrolling started. */
html.sjtb-page-scrolling .sj-toolbox-card:hover {
  transform: none !important;
  background: var(--anzhiyu-card-bg) !important;
  border: var(--style-border) !important;
  box-shadow: var(--anzhiyu-shadow-border) !important;
}

html.sjtb-page-scrolling .sj-toolbox-card:hover .sj-toolbox-card-icon {
  width: 54px !important;
  min-width: 54px !important;
  height: 54px !important;
  margin-right: 0 !important;
  opacity: 1 !important;
  transform: none !important;
}

html.sjtb-page-scrolling .sj-toolbox-card:hover .sj-toolbox-card-body {
  margin-left: 13px !important;
  transform: none !important;
}

html.sjtb-page-scrolling .sj-toolbox-card:hover .sj-toolbox-card-title {
  color: var(--anzhiyu-fontcolor) !important;
}

html.sjtb-page-scrolling .sj-toolbox-card:hover .sj-toolbox-card-desc {
  color: var(--anzhiyu-secondtext) !important;
  opacity: 1 !important;
}

html.sjtb-page-scrolling .sj-toolbox-card:hover .sj-toolbox-card-meta {
  background: rgba(66,90,239,.07) !important;
  color: var(--anzhiyu-main) !important;
}

@media (hover: none) {
  .sj-toolbox-card:hover {
    transform: none !important;
    background: var(--anzhiyu-card-bg) !important;
    border: var(--style-border) !important;
    box-shadow: var(--anzhiyu-shadow-border) !important;
  }

  .sj-toolbox-card:hover .sj-toolbox-card-icon {
    width: 54px !important;
    min-width: 54px !important;
    height: 54px !important;
    margin-right: 0 !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .sj-toolbox-card:hover .sj-toolbox-card-body {
    margin-left: 13px !important;
    transform: none !important;
  }

  .sj-toolbox-card:hover .sj-toolbox-card-title {
    color: var(--anzhiyu-fontcolor) !important;
  }

  .sj-toolbox-card:hover .sj-toolbox-card-desc {
    color: var(--anzhiyu-secondtext) !important;
    opacity: 1 !important;
  }

  .sj-toolbox-card:hover .sj-toolbox-card-meta {
    background: rgba(66,90,239,.07) !important;
    color: var(--anzhiyu-main) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sj-toolbox-card,
  .sj-toolbox-card-icon,
  .sj-toolbox-card-icon img,
  .sj-toolbox-card-body,
  .sj-toolbox-mini {
    transition-duration: .01ms !important;
  }
}