@charset "utf-8";

/* ── Keyframes ── */
@keyframes slideUpMain {
  0%   { transform: translateY(0%); }
  100% { transform: translateY(-100%); }
}
@keyframes slideUpRight {
  0%   { transform: translateY(0%); }
  100% { transform: translateY(-100%); }
}
@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUpProduct {
  0%   { opacity: 0; transform: translate(-50%, calc(-50% + 20px)); }
  100% { opacity: 1; transform: translate(-50%, -50%); }
}

/* ── Intro Overlay ── */
.intro-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-primary-600);
  z-index: 1000;
  animation: slideUpRight 0.95s cubic-bezier(0.25, 1, 0.4, 1) 0.1s forwards;
}

/* ── Hero ── */
.hero {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* ── Hero Left ── */
.hero-left {
  flex: 1;
  background: var(--color-neutral-100);
  padding: 3.3rem 5.6rem 5.6rem clamp(2.5rem, 4vw, 5.6rem);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: background 0.7s var(--ease-slide);
}

/* ── 메인 페이지 헤더 로고 ── */
.header-logo {
  width: clamp(42rem, 55vw, 84.8rem);
  height: clamp(10.2rem, 13.4vw, 20.6rem);
  background: url(../images/common/logo-lg.svg) no-repeat left center / contain;
}
.header-logo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url(../images/common/logo-lg_white.svg) no-repeat left center / contain;
  opacity: 0;
  transition: opacity 0.7s var(--ease-slide);
  z-index: 100;
}
body:has(.hero.slide-1) .header-logo::after {
  opacity: 1;
}
.page-home .header {
  align-items: flex-start;
  justify-content: flex-end;
}
.page-home .header-logo {
  opacity: 0;
  animation: fadeUp 0.8s ease 0.5s forwards;
}

/* Hero 섹션 텍스트 로고 */
.hero-logo {
  display: block;
  position: relative;
  z-index: 5;
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 300;
  letter-spacing: -2px;
  color: var(--color-primary-800);
  margin-top: clamp(10.2rem, 13.4vw, 21rem);
  opacity: 0;
  animation: fadeUp 0.7s ease 1.5s forwards;
  transition: color 0.7s var(--ease-slide);
}
.hero.slide-1 .hero-logo {
  color: var(--color-neutral-100);
}

/* Crossfade content */
.hero-content {
  position: absolute;
  bottom: 13.3rem;
  left: clamp(2.5rem, 4vw, 5.6rem);
  opacity: 0;
  transition: opacity 0.7s var(--ease-slide);
  pointer-events: none;
}
.hero-content.active {
  opacity: 1;
  pointer-events: auto;
}
.hero-content[data-index="0"].active {
  animation: fadeUp 0.7s ease 0.7s both;
}
.hero.slides-ready .hero-content.active {
  animation: none;
}

.hero-title {
  margin-bottom: 1.6rem;
  font-family: Outfit;
  font-size: clamp(2.6rem, 2vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.25px;
  line-height: 1.3; 
  color: var(--color-primary-800);
  transition: color 0.7s var(--ease-slide);
}
.hero-desc {
  margin-bottom: 4rem;
  font-family: Outfit;
  font-size: clamp(1.4rem, 1.2vw, 2rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-primary-600);
  letter-spacing: -0.25px;
  transition: color 0.7s var(--ease-slide);
}
.hero-left .btn {
    padding: 0.95rem 6.4rem;
    color: var(--color-neutral-100);
    text-align: center;
    font-family: Pretendard;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.25px;
    text-transform: uppercase;
    border: 0;
}
.hero-content.slide2 .hero-title {
  bottom: 13.3rem;
  left: 5.6rem;
  font-family: Pretendard;
  font-size: clamp(18px, 2vw, 4rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.25px;
  color: var(--color-neutral-100);
}
.hero-content.slide2 .hero-desc {
    font-family: Pretendard;
}
.hero-content.slide2 .btn {
    color: var(--color-primary-800);
}


/* ── Hero Right ── */
.hero-right {
  width: 50%;
  position: relative;
  overflow: hidden;
}
.hero-right-track {
  display: flex;
  width: 200%;
  height: 100%;
  transition: transform 0.7s var(--ease-slide);
}
.hero-right-track.slide-1 {
  transform: translateX(-50%);
}

.hero-right-item {
  width: 50%;
  height: 100%;
  position: relative;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-product {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;        
  max-width: 50rem;     
  height: auto;       
  aspect-ratio: 500 / 667; 
  z-index: 2;
  transform: translate(-50%, calc(-50% + 20px));
  opacity: 0;
  animation: fadeUpProduct 0.7s ease 0.8s forwards;
}

/* ── Pagination ── */
.hero-pagination {
  position: absolute;
  bottom: 5.6rem;
  left: clamp(2.5rem, 4vw, 5.6rem);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  z-index: 50;
  opacity: 0;
  animation: fadeUp 0.7s ease 0.7s forwards;
}

.hero-pag-item {
  width: 2rem;
  font-size: 1.4rem;
  font-weight: 600;
  font-family: Outfit;
  line-height: 1.5;
  letter-spacing: -0.25px;
  color: var(--color-primary-200);
  transition: color 0.3s ease;
}
.hero-pag-item.active {
  color: var(--color-primary-800);
  transition: color 0.7s var(--ease-slide);
}

.hero-progress {
  width: 16rem;
  height: 2px;
  margin-left: 1.6rem;
  background: var(--color-primary-50);
  position: relative;
}
.hero-progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--color-primary-800);
}

/* ── Right Overlay ── */
.right-overlay {
  position: absolute;
  inset: 0;
  background: var(--color-primary-400);
  z-index: 5;
  animation: slideUpRight 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}
.right-overlay::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-primary-200);
}

/* ── Slide 1: Dark Panel ── */
.hero.slide-1 .hero-left {
  background: var(--color-primary-600);
}
.hero.slide-1 .hero-logo {
  color: var(--color-neutral-100);
}
.hero.slide-1 .hero-title {
  color: var(--color-neutral-100);
}
.hero.slide-1 .hero-desc {
  color: var(--color-primary-100);
}
.hero.slide-1 .btn--dark {
  border-color: var(--color-neutral-100);
  color: var(--color-neutral-100);
}
.hero.slide-1 .btn--dark:hover {
  background: var(--color-neutral-100);
  color: var(--color-primary-800);
}
.hero.slide-1 .hero-pag-item {
  color: var(--color-primary-400);
}
.hero.slide-1 .hero-pag-item.active {
  color: var(--color-neutral-100);
}
.hero.slide-1 .hero-progress {
  background: var(--color-primary-600);
}
.hero.slide-1 .hero-progress-bar {
  background: var(--color-neutral-100);
}

/* =====================================================
   RESPONSIVE
   ===================================================== */


/* ── hover ── */
@media (min-width: 768px) {
    .hero-left .btn:hover {
        color: var(--color-neutral-100);
        background: var(--color-primary-600);
    }
    .hero-content.slide2 .btn:hover {
        color: var(--color-primary-800);
        background: var(--color-primary-200);
    }                                         
}
/* ── 1919px이하 ── */
@media (max-width: 1919px) {
  .header-logo {
    width: clamp(12rem, 40vw, 84.8rem);
    height: clamp(2.9rem, 9.7vw, 20.6rem);
  }
}
/* ── 1920px이하 ── */
/* ── 1200px이하 ── */
@media (max-width: 1200px) {
    .hero-product {
        padding: 2rem;
    }
}
/* ── 1024px이하 ── */
@media (max-width: 1024px) {
    .hero-product {
        padding: 2rem;
    }
}

/* ── 768px이하 ── */
@media (max-width: 768px) {
  .header-logo {
    position: relative;
    top: 0;
    left: 0;
    width: clamp(8rem, 38vw, 18rem);
    height: clamp(2rem, 9vw, 4.5rem);
    transition: width 0.6s ease-in-out, height 0.6s ease-in-out;
  }

  /* 스크롤 후 로고 축소 */
  .page-home .header--scrolled .header-logo {
    width: clamp(7rem, 22vw, 10rem);
    height: clamp(1.97rem, 5.4vw, 2.5rem);
  }

  /* page-home 헤더 — 배경 고정 */
  .page-home .header {
    align-items: center;
    background: rgba(240, 238, 233, 0.85);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    transition: background 0.7s var(--ease-slide);
  }
  /* slide 2 활성 시 header 배경 → primary-600 */
  body.page-home:has(.hero.slide-1) .header {
    background: rgba(94, 90, 57, 0.85);
  }

  /* Hero 세로 전환 */
  .hero {
    overflow: visible;
    flex-direction: column;
    height: auto;
  }

   .hero-content {
        left: 16px;
        bottom: 12rem;
    }

  .hero-left {
    position: relative;
    flex: none;
    padding: 3.3rem 16px 4rem 16px;
    width: 100%;
    height: 55vh;
  }

  .hero-pagination {
    width: 92%;
    bottom: 4rem;
  }

  .hero-right {
    flex: none;
    width: 100%;
    aspect-ratio: 390 / 390; 
  }

  .hero-right-item {
    height: 100%;
  }
/* 
  .hero-content {
    bottom: 10rem;
  } */
  .hero-title {
    font-size: 3rem;
  }
  .hero-content.slide2 .hero-title {
    font-size: 3rem;
  }

  .hero-desc {
    font-size: 1.9rem;
    margin-bottom: 3.2rem;
  }

  .hero-progress {
    width: 100%;
    margin-left: 0.8rem;
  }

  /* 프로덕트 이미지 */
  .hero-title {
    margin-bottom: 0.8rem;
  }
  
  .hero-video,
  .hero-product {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ── 500px이하 ── */
@media (max-width: 500px) {
}

/* ── 420px이하 ── */
@media (max-width: 420px) {
    .hero-pagination {
        width: 89%;
    }
}


/* ── 375px이하 ── */
@media (max-width: 375px) {

  /* 콘텐츠 많을 때 hero-left 살짝 더 확보 */
  .hero-left {
    flex: 0 0 56vh;
  }

  .hero-content.slide2 .hero-title {
    font-size: 2.4rem;
  }
}

/* ── 메인 세로 반응형 높이이 750px이하 ── */
@media (max-height: 750px) {
    .hero-content {
        bottom: 10rem;
    }
    .hero-product {
        max-width: 50%;
    }
}