/* KJA homepage performance patch. No visual redesign. */

.kja-latest-rail {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}

.kja-latest-rail[data-dragging="true"] {
  cursor: grabbing;
}

.kja-shelf-progress > span {
  width: 100% !important;
  transform: scaleX(0);
  transform-origin: left center;
  transition: none !important;
}

.kja-shelf-nav {
  display: flex !important;
}

.kja-shelf-count {
  display: block !important;
}

.kja-feat-viewport {
  overflow: hidden;
}

.kja-feat-rail[data-kja-performance-ready="true"] {
  touch-action: pan-y;
  user-select: none;
}

.kja-feat-rail[data-viewport-running="false"] {
  will-change: auto !important;
}

/* CSS animations promote themselves; a permanent hint is unnecessary. */
.kja-home .kja-blob {
  will-change: auto !important;
}

.kja-intro[data-kja-motion-paused="true"] .kja-blob,
.kja-intro[data-kja-motion-paused="true"] .kja-blob::after,
.kja-marquee[data-kja-motion-paused="true"] .kja-marquee__track {
  animation-play-state: paused !important;
  will-change: auto !important;
}

/* Keep the decorative BOUSAI network visible without paint-heavy dash animation. */
#bousai-home .bousai-network path {
  stroke-dasharray: 1 !important;
  stroke-dashoffset: 0 !important;
  animation: none !important;
  transition: none !important;
}

@media (max-width: 767px) {
  .kja-shelf-nav {
    display: none !important;
  }

  .kja-shelf-count {
    display: block !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kja-feat-viewport {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .kja-feat-rail,
  .kja-latest-rail,
  .kja-latest-card__media img,
  .kja-feat-card__media img {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    scroll-behavior: auto !important;
  }
}

/* QA equivalent of prefers-reduced-motion: reduce via ?reduce-motion=1. */
.kja-reduced-motion .kja-feat-viewport {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.kja-reduced-motion .kja-feat-rail,
.kja-reduced-motion .kja-latest-rail,
.kja-reduced-motion .kja-latest-card__media img,
.kja-reduced-motion .kja-feat-card__media img {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  scroll-behavior: auto !important;
}