/***히어로 섹션***/
.hero { position: relative;  width: 100%; height: 90vh; overflow: hidden; background: #fff;}
.hero video, .hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
/* 첫 영상 */ #heroVideo {z-index: 3; opacity: 1; transition: opacity 1.2s ease;}
/* 이미지 공통 */ .hero-image { will-change: opacity, transform; }
/* 첫 번째 이미지 */ .image-1 { z-index: 1; opacity: 0; transform: scale(1.02); transition: opacity 1.2s ease, transform 2.4s cubic-bezier(0.22, 1, 0.36, 1);}
/* 두 번째 이미지 */ .image-2 { z-index: 2; opacity: 0; right: 0; left: auto; width: 100%; transform: scale(1.04); transition: opacity 1.4s ease,transform 2.2s cubic-bezier(0.22, 1, 0.36, 1);}
.hero.is-first-text .hero-title { color: #fff;}
/* 첫 영상 종료 → 첫 이미지 등장 */
.hero.is-video-out #heroVideo {opacity: 0;}
.hero.is-video-out .image-1 {opacity: 1; transform: scale(1);}
/* 두 번째 장면 */
.hero.is-scene-2 .image-1 { opacity: 0; transform: scale(1.01);}
.hero.is-scene-2 .image-2 {opacity: 1; width: 50%; transform: scale(1);}
.hero.is-scene-2 .hero-title { color: #2b2b2b;}
/* 두 번째 장면 텍스트 */
.hero-text { position: absolute; left: 8.5vw; top: 50%; transform: translateY(-50%) translateY(30px); z-index: 5; opacity: 0; max-width: 36vw; 
  transition: opacity 1.2s ease; color: #2b2b2b;}
.hero.is-text-visible .hero-text { opacity: 1; /*transform: translateY(-50%) translateY(0);*/}
.hero.is-text-changing .hero-text {opacity: 0; /* transform: translateY(-50%) translateY(18px);*/}
.hero-title {   color: #fff; font-size: 48px; line-height: 1.35; font-weight: 600; letter-spacing: -0.02em; transition: color 0.8s ease;   word-break: keep-all; overflow-wrap: normal;}
.hero-title .serif { font-family: "Cormorant SC", serif; font-weight: 600;}
/* 마지막 풀스크린 영상 */
.hero-video-final { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 6; opacity: 0; 
  pointer-events: none; transform: none; transition: opacity 1.2s ease;   filter: brightness(50%);}
/* 마지막 영상 활성화 */
.hero.is-final-video .hero-video-final { opacity: 1; transform: none;}
/* 마지막 영상으로 갈 때 기존 요소 정리 */
.hero.is-final-video .image-2 { opacity: 0; width: 50%; transform: scale(1);}
.hero.is-final-video .hero-text {opacity: 0; transform: translateY(-50%) translateY(20px);}
/* 마지막 영상 위 딤 레이어용 실제 div 사용 시 */
.hero-final-overlay { position: absolute; inset: 0; z-index: 7; background: rgba(0, 0, 0, 0.32); opacity: 0; transition: opacity 1.2s ease; pointer-events: none;}
/* pseudo overlay */
.hero::after { content: ""; position: absolute; inset: 0; z-index: 7; background: rgba(0, 0, 0, 0.28); opacity: 0; pointer-events: none;transition: opacity 1.2s ease;}
.hero.is-final-video::after {opacity: 1;}
/* 마지막 엔딩 카피 */.hero-ending { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translateY(20px); z-index: 8; text-align: center;
  color: #fff; opacity: 0; transition: opacity 1.2s ease, transform 1.2s ease; pointer-events: none; }
.hero.is-ending-visible .hero-ending { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
.ending-title { margin: 0; font-size: 100px; line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; font-family: "Cormorant SC", serif;}
.ending-subtitle { margin: 18px 0 0; font-size: 20px; line-height: 1.5; font-weight: 400; letter-spacing: -0.02em;}
.hero.is-final-video .hero-title { color: #fff; }
.hero-arrow { position: absolute; left: 50%;  bottom: 42px; transform: translateX(-50%) translateY(10px); z-index: 9;
  opacity: 0; color: #fff; font-size: 42px; line-height: 1; font-weight: 400; pointer-events: none; transition: opacity 0.8s ease, transform 0.8s ease;}
.mo-break { display: none; }
.hero.is-arrow-visible .hero-arrow { opacity: 1; transform: translateX(-50%) translateY(0);}
.video-desktop { display: block; }
.video-mobile { display: none; }

/***반응형***/
@media (max-width:1440px){
  .hero-title {font-size: 44px;}
  .hero-text { max-width: 44vw; }
  .mo-break { display: inline; }
}

@media(max-width:1280px){
  .hero-text {left: 8vw;}
  .mo-break { display:none; }
}

@media (max-width:1024px){
  .hero-title {font-size:36px;}
  .video-desktop { display: none; }
  .video-mobile { display: block; }
  .hero-title {font-size: 40px;}
  .hero-text { left: 50%; top: 50%;  transform: translate(-50%, -50%);  text-align: center;  max-width: 80vw; color:#FFF; }
  .hero.is-scene-2 .image-2 {
    width: 300%;
    height: 300%;
    top: 0;
    left:0;
    right:auto;
    transform: none; /* 기존 scale 제거 */
  }
  #heroImage2{filter:brightness(80%);}
  .hero.is-scene-2 .hero-title { color: #FFF;}

}

@media (max-width: 768px) {
  .hero {height:70vh;}
  
  
}