/* =============================================
   Tag One Motorsport — Homepage CSS (Slater)
   v2: Explicit transition property, aligned
       breakpoints with JS (992/768/480/479)
   ============================================= */

/* GSAP Slider */
[data-gsap-slider-init] {
  --slider-status: on;
  --slider-spv: 3;
  --slider-gap: 1.5em;
}

@media screen and (max-width: 991px) {
  [data-gsap-slider-init] {
    --slider-spv: 2.25;
    --slider-gap: 1.5em;
  }
}

@media screen and (max-width: 767px) {
  [data-gsap-slider-init] {
    --slider-spv: 1.15;
    --slider-gap: 1em;
  }
}

@media screen and (max-width: 479px) {
  [data-gsap-slider-init] {
    --slider-spv: 1;
    --slider-gap: 0.75em;
  }
}

[data-gsap-slider-item]:last-child {
  margin-right: 0;
}

/* Controls */
[data-gsap-slider-status="not-active"] [data-gsap-slider-controls] {
  display: none;
}

[data-gsap-slider-control-status="not-active"] {
  opacity: 0.2;
  pointer-events: none;
}

.gsap-slider__control {
  transition: opacity 0.3s ease;
}

/* Slide States — use explicit opacity only, not "all" (conflicts with GSAP transforms) */
.demo-card-2 {
  transition: opacity 0.3s ease;
}

[data-gsap-slider-item-status="not-active"] .demo-card-2 {
  opacity: 0.4;
}

[data-gsap-slider-item-status="active"] .demo-card-2 {
  opacity: 1;
}