/*
 * OUR SERVICE — 브라우저 목업 안에서 흐르는 제작 사이트
 *
 * 원본 page-index.css 는 그대로 두고 이 파일이 나중에 덮어씁니다.
 * 메인 페이지에서만 부릅니다.
 *
 * 움직임은 transform: translateY 로만 만듭니다.
 * top 이나 margin 을 건드리면 브라우저가 매 프레임 배치를 다시 계산해서
 * 스크롤이 버벅입니다. transform 은 그 계산 없이 그려지기만 합니다.
 */

/* 목업 화면 밖으로 넘치는 부분을 잘라냅니다. */
.device-browser__screen {
  overflow: hidden;
}

.showcase {
  position: absolute;
  inset: 0;
  overflow: hidden;

  /*
   * 흐르는 속도 — 세 장을 모두 지나 처음으로 돌아오기까지 걸리는 시간.
   * 빠르게 하려면 숫자를 줄이고, 느리게 하려면 늘립니다.
   * 여기 한 곳만 고치면 됩니다.
   */
  --showcase-duration: 30s;
}

.showcase__track {
  display: block;
  will-change: transform;
  animation: showcaseScroll var(--showcase-duration) linear infinite;
}

/*
 * 원본의 .device-browser__screen img 는 한 장을 화면에 꽉 채우는 규칙입니다.
 * (position: absolute · height: 100% · object-fit: cover)
 * 여기서는 여러 장이 실제 비율대로 세로로 쌓여야 하므로 되돌립니다.
 */
.device-browser__screen .showcase__track img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  object-fit: fill;
}

@keyframes showcaseScroll {
  from { transform: translateY(0); }
  /* 한 벌 높이만큼 (= 전체의 절반) 밀어 올린 뒤 처음으로 돌아갑니다 */
  to { transform: translateY(-50%); }
}

/* 마우스를 올리면 멈춥니다. 천천히 보고 싶을 때를 위해. */
.showcase:hover .showcase__track,
.showcase:focus-within .showcase__track {
  animation-play-state: paused;
}

/* 화면 밖으로 나가면 멈춥니다. (스크립트가 표시를 붙입니다) */
.showcase[data-paused="1"] .showcase__track {
  animation-play-state: paused;
}

/* ── 아래쪽 문구 띠 ─────────────────────────────────────── */

.showcase__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  display: grid;
  padding: 10px 16px;
  background: rgba(15, 15, 14, 0.72);
  color: #FFFFFF;
  font-size: 14px;
  line-height: 1.4;
}

/*
 * 문구들을 같은 자리에 겹쳐 둡니다.
 * 이렇게 해야 문구 길이가 달라도 띠 높이가 흔들리지 않습니다.
 */
.showcase__caption {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 400ms linear;
}

.showcase__caption.is-active {
  opacity: 1;
}

/* ── 움직임을 줄여 달라고 한 경우 ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
  /* 멈춰 세웁니다. 첫 이미지와 첫 문구만 보입니다. */
  .showcase__track {
    animation: none;
    transform: none;
  }

  .showcase__caption {
    transition: none;
  }
}