Corp/backend/static/scss/components/_join-scroller.scss

// =============================================================================
// Join Scroller Component (SCSS)
// =============================================================================
// Горизонтальная прокручиваемая лента новых сотрудников с hover-эффектами

// =============================================================================
// ПЕРЕМЕННЫЕ
// =============================================================================

$join-base-size: 56px;         // базовый размер аватара
$join-multiplier: 4;           // множитель при раскрытии
$join-multiplier-mobile: 3.2;  // множитель на мобильных
$join-gap: 0.9rem;
$join-padding: 0.25rem;
$join-transition-duration: 0.22s;

// =============================================================================
// КОНТЕЙНЕР
// =============================================================================

.join-wrap {
  padding: var(--space-2);
  border: 1px solid color-mix(in srgb, var(--bs-border-color), transparent 10%);
  border-radius: var(--feed-radius);
  background: var(--bs-body-bg);
  box-shadow: var(--feed-shadow);
}

// =============================================================================
// ГОРИЗОНТАЛЬНАЯ ЛЕНТА
// =============================================================================

.join-scroller {
  position: relative;
  overflow-x: auto;
  overflow-y: visible; // для инфо-блока
  scrollbar-width: none; // Firefox
  -ms-overflow-style: none; // IE/Edge

  // Градиентная маска по краям
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 40px,
    black calc(100% - 40px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 40px,
    black calc(100% - 40px),
    transparent 100%
  );

  &::-webkit-scrollbar {
    display: none; // Chrome/Safari
  }
}

.join-rail {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: $join-gap;
  padding: $join-padding;
  min-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .join-scroller {
    scroll-behavior: auto !important;
  }
}

// =============================================================================
// ЭЛЕМЕНТ ЛЕНТЫ
// =============================================================================

.join-item {
  --base: #{$join-base-size};
  --mult: #{$join-multiplier};
  --size: var(--base);
  
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--size);
  flex: 0 0 var(--size);
  transition: width $join-transition-duration ease, flex-basis $join-transition-duration ease;

  &:hover,
  &:focus-within {
    --size: calc(var(--base) * var(--mult));
    z-index: 2;
  }

  // Отключение hover при перетаскивании
  &.no-hover {
    &:hover,
    &:focus-within {
      --size: var(--base);
      z-index: auto;
    }

    .join-info {
      max-height: 0;
      opacity: 0;
      transform: translateY(-4px);
    }
  }
}

// =============================================================================
// АВАТАР
// =============================================================================

.join-ava {
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--bs-border-color), transparent 20%);
  background: var(--bs-tertiary-bg);
  transition: width $join-transition-duration ease, 
              height $join-transition-duration ease, 
              box-shadow $join-transition-duration ease, 
              border-color $join-transition-duration ease;
  will-change: width, height;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: var(--bs-tertiary-bg);
  }

  .bi {
    font-size: 1.2rem;
    opacity: 0.65;
  }

  .join-item:hover &,
  .join-item:focus-within & {
    box-shadow: var(--feed-shadow-hover);
    border-color: color-mix(in srgb, var(--bs-border-color), var(--bs-primary) 30%);
  }
}

// =============================================================================
// ИНФО-БЛОК
// =============================================================================

.join-info {
  width: 100%;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height 0.24s ease, opacity 0.18s ease, transform 0.18s ease;

  .join-item:hover &,
  .join-item:focus-within & {
    max-height: 320px; // с запасом для навыков
    opacity: 1;
    transform: translateY(0);
  }

  .name {
    font-weight: 800;
    line-height: 1.2;
    margin-top: 0.5rem;
    text-align: center;
  }

  .sub {
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
    text-align: center;
  }

  .skills-line {
    font-size: 0.9rem;
    text-align: center;
    margin-top: 0.35rem;
    word-break: break-word;
    white-space: normal;

    b {
      font-weight: 800;
    }
  }

  .link {
    display: inline-block;
    margin-top: 0.35rem;
    font-size: 0.9rem;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

// =============================================================================
// АДАПТИВНОСТЬ
// =============================================================================

@media (max-width: 480px) {
  .join-item {
    --mult: #{$join-multiplier-mobile};
  }
}