/* ================================
   SLIDER SECTION STYLES
================================ */

/* Directional fade mask on edges */
.slider-container {
  --edge: 128px;
  --mask-left: var(--edge);
  --mask-right: var(--edge);

  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--mask-left),
    #000 calc(100% - var(--mask-right)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--mask-left),
    #000 calc(100% - var(--mask-right)),
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  touch-action: pan-y;
  overscroll-behavior-inline: contain;
  will-change: scroll-position;
}

/* Slider inner track */
.slider {
  display: flex;
  will-change: transform;
  padding-inline: 80px;
}

/* Card spacing */
.slider .card:first-child {
  margin-left: 5px;
}
.slider .card:last-child {
  margin-right: 5px;
}

/* Infinite scroll motion */
@keyframes infinite-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-40%); }
}

/* Stop animation for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .slider {
    animation: none !important;
  }
}

/* Disable selection/dragging */
.slider-container,
.slider-container * {
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: auto;
}

/* Drag-active cursor */
.slider-container.active {
  cursor: grabbing;
}

/* Pause animation on hover if wrapped in a .group */
.group:hover .slider {
  animation-play-state: paused;
}

/* Hover Play Button */
.play-button {
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s ease;
}

.game-card:hover .play-button {
  opacity: 1;
  transform: scale(1);
}

/* Tab fade transitions */
.tab-content {
  transition: opacity 0.3s ease;
}

.tab-content.hidden {
  display: none;
  opacity: 0;
}

.tab-content:not(.hidden) {
  display: block;
  opacity: 1;
}

/* Active tab underline */
.active-tab {
  border-color: #f4b331 !important;
}

/* Screen-reader utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}