/* ==========================================================================
   Home — Client Logo Marquee (Webflow IX2 대체)

   IX2 인터랙션이 끊기는 문제로 제거하고 CSS 애니메이션으로 재구현했습니다.
   모션은 100% CSS입니다. js/marquee-loop.js 는 DOM 복제만 담당합니다
   (CSS로는 요소를 복제할 수 없어 무한 루프에 필요한 2번째 카피를 만들 수 없습니다).

   방향
     1행 .wrap-marquee-logos:nth-of-type(1)  우 → 좌
     2행 .wrap-marquee-logos:nth-of-type(2)  좌 → 우
     3행 .wrap-marquee-logos:nth-of-type(3)  우 → 좌

   이음매 없는 루프의 원리
     트랙 자식을 정확히 1회 복제해 2카피로 만들고 -50% 이동시킵니다.
     이때 트랙의 column-gap 이 살아 있으면 카피 경계에서 gap 절반(8px)만큼
     어긋나므로, 트랙 gap 을 0 으로 내리고 그 간격을 자식의 margin-right 로
     옮겼습니다. 그래야 -50% = 정확히 1카피 폭이 됩니다.

   토큰 매핑 (raw px 없음 — CLAUDE.md §1.2)
     16px -> --spacers--spacer-xsm
     12px -> --spacers--spacer-2xs

   1카피 폭 (데스크톱: 타일 312 + 간격 16 = 328/타일)
     1행 24타일 = 7872px  ·  2행 24타일 = 7872px  ·  3행 20타일 = 6560px
   위 폭 / duration 이 실제 속도입니다. 기본값은 약 70px/s 입니다.
   ========================================================================== */

.section.logo-section {
  /* 행별 속도. 폭이 다른 3행이 비슷한 체감속도를 갖도록 맞췄습니다. */
  --dium-marquee-duration-1: 105s; /* 7872px / 105s ≈ 75px/s */
  --dium-marquee-duration-2: 115s; /* 7872px / 115s ≈ 68px/s — 1행과 어긋나게 */
  --dium-marquee-duration-3: 88s;  /* 6560px / 88s  ≈ 75px/s */

  /* 그룹 사이 간격 — 원래 트랙의 column-gap 을 그대로 옮긴 값입니다. */
  --dium-marquee-gap: var(--spacers--spacer-xsm); /* 16px */
}

/* --------------------------------------------------------------------------
   트랙
   -------------------------------------------------------------------------- */

.section.logo-section .wrap-marquee-logos {
  /* -50% 이동이 정확히 1카피가 되도록 트랙 gap 을 제거합니다. */
  grid-column-gap: 0;
  column-gap: 0;

  flex-wrap: nowrap;
  width: max-content;
  /* 자식 개수가 2배가 되어도 줄어들지 않게 */
  will-change: transform;
}

/* 트랙에서 뺀 간격을 그룹 우측 여백으로 이전 */
.section.logo-section .single-logo-marquee {
  margin-right: var(--dium-marquee-gap); /* 16px */
}

/* --------------------------------------------------------------------------
   애니메이션 — 복제가 끝난 트랙에만 적용합니다.
   복제 전에 돌리면 카피가 1개뿐이라 한 바퀴 끝에서 화면이 비어 버립니다.
   -------------------------------------------------------------------------- */

.section.logo-section .wrap-marquee-logos[data-dium-marquee="ready"] {
  animation: dium-marquee-left var(--dium-marquee-duration-1) linear infinite;
}

/* 2행 — 좌에서 우로 (시작 지점을 -50% 로 두고 0 으로 되돌립니다) */
.section.logo-section .wrap-marquee-logos[data-dium-marquee="ready"]:nth-of-type(2) {
  animation-name: dium-marquee-right;
  animation-duration: var(--dium-marquee-duration-2);
}

/* 3행 — 우에서 좌로 */
.section.logo-section .wrap-marquee-logos[data-dium-marquee="ready"]:nth-of-type(3) {
  animation-name: dium-marquee-left;
  animation-duration: var(--dium-marquee-duration-3);
}

@keyframes dium-marquee-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes dium-marquee-right {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* --------------------------------------------------------------------------
   인터랙션 / 접근성
   -------------------------------------------------------------------------- */

/* 마우스를 올린 행만 멈춥니다 — 로고를 확인할 수 있게. */
.section.logo-section .wrap-marquee-logos[data-dium-marquee="ready"]:hover {
  animation-play-state: paused;
}

/* 복제본은 스크린리더에서 중복해 읽히지 않도록 aria-hidden 처리됩니다(JS). */

@media (prefers-reduced-motion: reduce) {
  .section.logo-section .wrap-marquee-logos[data-dium-marquee="ready"] {
    animation: none;
    /* 정지 상태에서도 첫 카피가 정상으로 보이게 */
    transform: translate3d(0, 0, 0);
  }
}

/* --------------------------------------------------------------------------
   반응형 — 브레이크포인트는 기존 값만 사용합니다 (CLAUDE.md §6.5)
   타일이 작아지면 트랙도 짧아지므로 duration 을 그대로 두면
   체감속도가 자연스럽게 느려집니다. 별도 조정하지 않습니다.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
  .section.logo-section {
    /* 기존 CSS가 이 구간에서 간격을 12px 로 줄입니다. 맞춰 줍니다. */
    --dium-marquee-gap: var(--spacers--spacer-2xs); /* 12px */
  }
}