@charset "UTF-8";
/* =============================================================================
   performance — 2_Performance (mobile 6350:4783 / PC 6350:5151)
   검정 → 미쉐린 다크블루 세로 그라디언트 위에 티저 영상.
   ============================================================================= */

.performance {
  background-image: linear-gradient(180deg, var(--c-black) 0%, var(--c-michelin-dark-blue) 100%);
  background-color: var(--c-black);
  color: var(--c-text-inverse);
}

.performance__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-32);
  padding-block: 60px 56px;
  text-align: center;
}

/* -----------------------------------------------------------------------------
   티저 영상
   -------------------------------------------------------------------------- */
.performance__video {
  position: relative;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  /* Figma 의 #111 패널 — lazy iframe 이 뜨기 전 배경 */
  background-color: color-mix(in srgb, var(--c-white) 7%, var(--c-black));
}

/* 플레이어는 Cloudflare Stream <iframe> 입니다. 포스터·재생 버튼은 플레이어가
   자체적으로 그리므로 우리 쪽 오버레이가 없습니다. */
.performance__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* -----------------------------------------------------------------------------
   PC
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .performance__inner {
    gap: var(--s-48);
    padding-block: 80px 72px;
  }

        .performance__video {
    aspect-ratio: 54 / 29;
  }

}