/* ============================================================
   3. SNEAKERS BECOME CULTURE (진열 이미지 섹션)
   ============================================================
   구조: .culture-heading(좌측 텍스트) + .display-visual(우측 이미지)가
   .section-intro 안에서 겹쳐 배치됨. 이미지가 화면 우측에 크게,
   하단 기준으로 정렬되도록 함 (레퍼런스 이미지 참고).
   ============================================================ */

.section-intro{
  position:relative;   /* .display-visual의 절대배치 기준 */
  z-index:0;            /* 명시적 z-index로 독립된 stacking context 생성 →
                           .display-visual(z-index:-1)이 이 섹션 안에서만
                           뒤로 가고, 상위(hero 등)에 가려지지 않도록 함 */
}

.culture-heading{
  position:relative;
  z-index:2;
  padding:0 64px;
}
.culture-heading h2{
  font-family: var(--font-switzer);
  font-size:clamp(3rem, 10vw, 10rem);
  line-height:.9;
  color:transparent;
  -webkit-text-stroke:3px var(--orange);
}
.culture-heading h2 span{
  display:block;
}

/* 조명 받는 신발 진열 이미지: 화면 우측에 크게, 하단 기준 정렬
   z-index를 음수로 줘서 .wrap 안의 카드 등 일반 흐름 요소보다 뒤로 배치 */
.display-visual{
  position:absolute;
  right:0;
  bottom:0;
  width:58%;
  aspect-ratio: 16 / 10;
  overflow:hidden;
  z-index:-1;

  /* 네 방향 가장자리를 투명하게 페이드아웃 */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, black 12%, black 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent 0%, black 12%, black 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-composite: intersect;
}
.display-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* ---------- 반응형 ---------- */
@media (max-width: 1080px){
  .display-visual{
    position:relative;
    width:100%;
    right:auto;
    bottom:auto;
    margin-top:40px;
  }
}