/* ============================================
   StressAId — Logo Marquee / Carousel
   Infinite scroll track, grayscale hover color,
   responsive sizing, pause on hover, seamless loop
   ============================================ */

/* -----------------------------------------------
   Marquee Container
   ----------------------------------------------- */
.sai-marquee {
  position: relative;
  overflow: hidden;
  padding: var(--sai-space-xl) 0;
  user-select: none;
}

/* Fade edges for seamless blending */
.sai-marquee::before,
.sai-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.sai-marquee::before {
  left: 0;
  background: linear-gradient(
    90deg,
    var(--sai-bg-darkest) 0%,
    transparent 100%
  );
}

.sai-marquee::after {
  right: 0;
  background: linear-gradient(
    270deg,
    var(--sai-bg-darkest) 0%,
    transparent 100%
  );
}

/* Optional: use custom bg variable for sections with different backgrounds */
.sai-marquee--card-bg::before {
  background: linear-gradient(
    90deg,
    var(--sai-bg-card) 0%,
    transparent 100%
  );
}

.sai-marquee--card-bg::after {
  background: linear-gradient(
    270deg,
    var(--sai-bg-card) 0%,
    transparent 100%
  );
}

/* -----------------------------------------------
   Scroll Track — Infinite Animation
   ----------------------------------------------- */
.sai-marquee__track {
  display: flex;
  align-items: center;
  gap: var(--sai-space-2xl);
  width: fit-content;
  animation: sai-marquee-scroll 30s linear infinite;
}

/* Pause on hover */
.sai-marquee:hover .sai-marquee__track {
  animation-play-state: paused;
}

/* Reverse direction variant */
.sai-marquee--reverse .sai-marquee__track {
  animation-direction: reverse;
}

/* Speed variants */
.sai-marquee--slow .sai-marquee__track {
  animation-duration: 50s;
}

.sai-marquee--fast .sai-marquee__track {
  animation-duration: 18s;
}

@keyframes sai-marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* -----------------------------------------------
   Logo Items — Grayscale + Hover Color
   ----------------------------------------------- */
.sai-marquee__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: var(--sai-space-sm) var(--sai-space-md);
  transition: all var(--sai-ease-normal);
}

.sai-marquee__logo {
  height: 32px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  filter: grayscale(100%) brightness(0.6);
  opacity: 0.5;
  transition: all var(--sai-ease-normal);
}

.sai-marquee__item:hover .sai-marquee__logo {
  filter: grayscale(0%) brightness(1);
  opacity: 1;
}

/* Text-based logo items */
.sai-marquee__text-logo {
  font-family: var(--sai-font-display);
  font-size: var(--sai-text-lg);
  font-weight: 700;
  color: var(--sai-text-disabled);
  white-space: nowrap;
  transition: color var(--sai-ease-normal);
}

.sai-marquee__item:hover .sai-marquee__text-logo {
  color: var(--sai-text-primary);
}

/* -----------------------------------------------
   Marquee with Section Title
   ----------------------------------------------- */
.sai-marquee-section {
  padding: var(--sai-space-2xl) 0;
}

.sai-marquee-section__title {
  text-align: center;
  font-size: var(--sai-text-xs);
  font-weight: 600;
  color: var(--sai-text-disabled);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--sai-space-lg);
}

/* -----------------------------------------------
   Vertical Marquee Variant
   ----------------------------------------------- */
.sai-marquee--vertical {
  max-height: 300px;
  padding: 0 var(--sai-space-xl);
}

.sai-marquee--vertical::before,
.sai-marquee--vertical::after {
  left: 0;
  right: 0;
  width: auto;
  height: 60px;
}

.sai-marquee--vertical::before {
  top: 0;
  bottom: auto;
  background: linear-gradient(
    180deg,
    var(--sai-bg-darkest) 0%,
    transparent 100%
  );
}

.sai-marquee--vertical::after {
  top: auto;
  bottom: 0;
  background: linear-gradient(
    0deg,
    var(--sai-bg-darkest) 0%,
    transparent 100%
  );
}

.sai-marquee--vertical .sai-marquee__track {
  flex-direction: column;
  animation: sai-marquee-scroll-vertical 25s linear infinite;
}

@keyframes sai-marquee-scroll-vertical {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

/* -----------------------------------------------
   Responsive — Tablet (min-width: 768px)
   ----------------------------------------------- */
@media (min-width: 768px) {
  .sai-marquee::before,
  .sai-marquee::after {
    width: 120px;
  }

  .sai-marquee__logo {
    height: 36px;
    max-width: 140px;
  }

  .sai-marquee__track {
    gap: var(--sai-space-3xl);
  }
}

/* -----------------------------------------------
   Responsive — Laptop (min-width: 1024px)
   ----------------------------------------------- */
@media (min-width: 1024px) {
  .sai-marquee::before,
  .sai-marquee::after {
    width: 160px;
  }

  .sai-marquee__logo {
    height: 40px;
    max-width: 160px;
  }

  .sai-marquee__text-logo {
    font-size: var(--sai-text-xl);
  }
}

/* -----------------------------------------------
   Responsive — Desktop (min-width: 1440px)
   ----------------------------------------------- */
@media (min-width: 1440px) {
  .sai-marquee::before,
  .sai-marquee::after {
    width: 200px;
  }

  .sai-marquee__logo {
    height: 44px;
    max-width: 180px;
  }
}

/* -----------------------------------------------
   Reduced Motion — Respect User Preference
   ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sai-marquee__track,
  .sai-carousel__track {
    animation: none !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sai-space-lg);
  }

  .sai-marquee--vertical .sai-marquee__track {
    animation: none !important;
  }

  .sai-marquee__logo,
  .sai-carousel__item img {
    filter: grayscale(0%) brightness(1);
    opacity: 0.7;
  }
}

/* -----------------------------------------------
   .sai-carousel Aliases
   Alternative BEM naming as per spec.
   Use .sai-carousel OR .sai-marquee — both work.
   ----------------------------------------------- */

/* Carousel keyframe */
@keyframes sai-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Container — overflow hidden */
.sai-carousel {
  position: relative;
  overflow: hidden;
  padding: var(--sai-space-xl) 0;
  user-select: none;
}

.sai-carousel::before,
.sai-carousel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.sai-carousel::before {
  left: 0;
  background: linear-gradient(90deg, var(--sai-bg-darkest) 0%, transparent 100%);
}

.sai-carousel::after {
  right: 0;
  background: linear-gradient(270deg, var(--sai-bg-darkest) 0%, transparent 100%);
}

/* Track — animated translateX(0 to -50%) */
.sai-carousel__track {
  display: flex;
  align-items: center;
  gap: var(--sai-space-2xl);
  width: fit-content;
  animation: sai-marquee 30s linear infinite;
}

/* Pause on hover */
.sai-carousel:hover .sai-carousel__track {
  animation-play-state: paused;
}

/* Items — grayscale by default, color on hover */
.sai-carousel__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: var(--sai-space-sm) var(--sai-space-md);
  transition: all var(--sai-ease-normal);
}

.sai-carousel__item img {
  height: 32px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.5;
  transition: all var(--sai-ease-normal);
}

.sai-carousel__item:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* Placeholder items — text-only, no image */
.sai-carousel__item--placeholder {
  font-family: var(--sai-font-display);
  font-size: var(--sai-text-lg);
  font-weight: 700;
  color: var(--sai-text-disabled);
  white-space: nowrap;
  transition: color var(--sai-ease-normal);
}

.sai-carousel__item--placeholder:hover {
  color: var(--sai-text-primary);
}

/* Responsive carousel logo sizing */
@media (min-width: 768px) {
  .sai-carousel::before,
  .sai-carousel::after {
    width: 120px;
  }

  .sai-carousel__item img {
    height: 36px;
    max-width: 140px;
  }

  .sai-carousel__track {
    gap: var(--sai-space-3xl);
  }
}

@media (min-width: 1024px) {
  .sai-carousel::before,
  .sai-carousel::after {
    width: 160px;
  }

  .sai-carousel__item img {
    height: 40px;
    max-width: 160px;
  }

  .sai-carousel__item--placeholder {
    font-size: var(--sai-text-xl);
  }
}

@media (min-width: 1440px) {
  .sai-carousel::before,
  .sai-carousel::after {
    width: 200px;
  }

  .sai-carousel__item img {
    height: 44px;
    max-width: 180px;
  }
}