/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ── Member Profile Carousel ─────────────────────────────────── */

/* left = 前のメンバーへ: 新コンテンツは左から入ってくる */
.members--carousel-wrapper[data-slide-direction="left"] .members--carousel-main {
  animation: carouselSlideFromLeft 250ms ease forwards;
}

/* right = 次のメンバーへ: 新コンテンツは右から入ってくる */
.members--carousel-wrapper[data-slide-direction="right"] .members--carousel-main {
  animation: carouselSlideFromRight 250ms ease forwards;
}

@keyframes carouselSlideFromLeft {
  from { transform: translateX(-60px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

@keyframes carouselSlideFromRight {
  from { transform: translateX(60px);  opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}