/* ===========================
   AID Project Detail (Full Ver.)
   - 오른쪽 패널(default): 선이 왼쪽 → 오른쪽
   - 왼쪽 패널(.aid-left): 선이 오른쪽 → 왼쪽
=========================== */

/* Vars */
:root {
  --label-w: 8.5em; /* 라벨 고정폭 */
  --gap-x: 2.2em; /* 라벨-값 간격 */
  --hero-min: 680px; /* 히어로 최소 높이 */
}

/* ===== HERO ===== */
.detail-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: var(--hero-min);
  overflow: hidden;
  background: #000;
  isolation: isolate;
}
.detail-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
}
.detail-hero.play > img {
  animation: heroIn 0.9s ease forwards;
}
@keyframes heroIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===== 텍스트 오버레이 ===== */
.detail-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: end; /* 기본: 오른쪽 정렬 */
  padding: clamp(20px, 6vw, 56px);
}
.detail-panel {
  max-width: min(640px, 92vw);
  margin-right: clamp(40px, 8vw, 160px);
  color: #fff;
  text-align: left;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.detail-title {
  margin: 0 0 clamp(14px, 1.8vw, 18px);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(28px, 5.2vw, 72px);
}

/* ===== 라인: 오른쪽 패널 (왼쪽 → 오른쪽) ===== */
.detail-line {
  position: relative;
  display: block;
  width: 300%;
  left: -200%; /* 왼쪽 바깥에서 시작 */
  height: 2px;
  border: 0;
  background: rgba(255, 255, 255, 0.95);
  transform-origin: left; /* 왼쪽 기준 */
  transform: scaleX(0);
  opacity: 0.95;
  margin: 0 0 clamp(14px, 1.8vw, 18px);
}
.detail-line.draw {
  animation: lineDrawRight 0.9s cubic-bezier(0.2, 0.65, 0.2, 1) forwards;
}
@keyframes lineDrawRight {
  to {
    transform: scaleX(1);
  }
}

/* ===== 라인: 왼쪽 패널 (오른쪽 → 왼쪽) ===== */
.detail-overlay.aid-left {
  justify-items: start; /* 텍스트 왼쪽 정렬 */
}
.detail-overlay.aid-left .detail-panel {
  margin-left: clamp(40px, 8vw, 160px);
  margin-right: 0;
}
.detail-overlay.aid-left .detail-line {
  position: relative;
  display: block;
  width: 300%;
  right: -0%; /* 오른쪽 바깥에서 시작 */
  left: auto;
  height: 2px;
  border: 0;
  background: rgba(255, 255, 255, 0.95);
  transform-origin: right; /* 오른쪽 기준 */
  transform: scaleX(0);
  opacity: 0.95;
  margin: 0 0 clamp(14px, 1.8vw, 18px);
}
.detail-overlay.aid-left .detail-line.draw {
  animation: lineDrawLeft 0.9s cubic-bezier(0.2, 0.65, 0.2, 1) forwards;
}
@keyframes lineDrawLeft {
  to {
    transform: scaleX(1);
  }
}

/* ===== 스펙 리스트 ===== */
.detail-info {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(10px, 1.4vw, 16px);
}
.detail-info li {
  display: grid;
  grid-template-columns: var(--label-w) 1fr;
  column-gap: var(--gap-x);
  align-items: baseline;
  font-weight: 800;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.7;
}
.detail-info .label {
  justify-self: start;
  text-align: left;
  letter-spacing: 0.28em;
  opacity: 0.95;
}
.detail-info .value {
  justify-self: start;
}

/* ===== 순차 등장 ===== */
.reveal-start {
  opacity: 0;
  transform: translateY(18px);
}
.reveal-in {
  animation: revealUp 0.7s cubic-bezier(0.2, 0.65, 0.2, 1) forwards;
}
@keyframes revealUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== 반응형 ===== */
@media (max-width: 991.98px) {
  .detail-overlay {
    justify-items: start;
  }
  .detail-panel {
    margin-right: clamp(20px, 5vw, 60px);
    margin-left: clamp(20px, 5vw, 60px);
  }
  .detail-info .label {
    letter-spacing: 0.18em;
  }
}

/* ===== 모션 최소화 ===== */
@media (prefers-reduced-motion: reduce) {
  .detail-hero > img,
  .detail-line,
  .reveal-start {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ----- 텍스트 애니메이션: 라인 완료 후 트리거 ----- */

/* 초기 상태 */
.title-pre {
  opacity: 0;
  transform: translateY(24px);
} /* 제목: 아래서 위로 */
.item-pre {
  opacity: 0;
  transform: translateY(-18px);
} /* 항목: 위에서 아래로 */

/* 인 애니메이션 */
.title-in {
  animation: titleRise 0.6s cubic-bezier(0.2, 0.65, 0.2, 1) forwards;
}
@keyframes titleRise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.item-in {
  animation: itemDrop 0.6s cubic-bezier(0.2, 0.65, 0.2, 1) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes itemDrop {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 선(라인)은 기존 lineDrawRight / lineDrawLeft 그대로 사용 */
/* .detail-line.draw 가 이미 라인 애니메이션을 시작함 */

/* =========================
   텍스트 애니메이션 (라인 → 제목 ↑ → 항목 ↓)
   ─ 다른 스타일 건드리지 않음
========================= */

/* 1) 제목: 아래에서 위로 (라인 그려진 뒤 시작) */
.detail-title {
  opacity: 0;
  transform: translateY(24px);
  animation: aidTitleRise 0.6s cubic-bezier(0.2, 0.65, 0.2, 1) forwards;
  animation-delay: 0.9s; /* 라인 0.9s 끝난 후 */
}
@keyframes aidTitleRise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2) 리스트 항목: 위에서 아래로, 순차 등장 */
.detail-info li {
  opacity: 0;
  transform: translateY(-18px);
  animation: aidItemDrop 0.6s cubic-bezier(0.2, 0.65, 0.2, 1) forwards;
}

/* 항목당 지연 (필요 개수만큼 추가하세요) */
.detail-info li:nth-child(1) {
  animation-delay: 1.1s;
}
.detail-info li:nth-child(2) {
  animation-delay: 1.25s;
}
.detail-info li:nth-child(3) {
  animation-delay: 1.4s;
}
.detail-info li:nth-child(4) {
  animation-delay: 1.55s;
}
.detail-info li:nth-child(5) {
  animation-delay: 1.7s;
}
.detail-info li:nth-child(6) {
  animation-delay: 1.85s;
}

@keyframes aidItemDrop {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 접근성: 모션 최소화 설정 시 애니메이션 비활성화 */
@media (prefers-reduced-motion: reduce) {
  .detail-title,
  .detail-info li {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}