/* 회사소개 페이지 히어로 섹션 스타일 */

/* 히어로 섹션 - 메인 페이지와 완전히 동일한 높이 */
.hero-about {
    min-height: 70vh;  /* 메인 페이지 #home과 동일 */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* 히어로 컨텐츠 - Flexbox로 하단 정렬 */
.hero-about .hero-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    min-height: 70vh;
    position: relative;
    z-index: 10;
}

/* HADA Entertainment 타이틀 애니메이션 */
@keyframes fade-in-title {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-about .animate-fade-in {
    animation: fade-in-title 1.2s ease-out forwards;
}

/* 하단 텍스트 줌인 애니메이션 */
@keyframes zoom-in-text {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.hero-about .animate-zoom-in {
    animation: zoom-in-text 1.5s ease-out 0.5s forwards;
    opacity: 0;
}

/* 영상 배경 기본 설정 (PC용) */
.hero-about video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; /* PC는 기본 중앙 */
    z-index: 0;
}

/* 반응형 - 모바일 (768px 이하) */
@media (max-width: 768px) {
    .hero-about {
        min-height: 56.25vw !important; /* 16:9 비율 (9/16 = 0.5625) */
        max-height: 400px !important; /* 최대 높이 제한 */
        padding-top: 6rem !important; /* 모바일 헤더 높이만큼 상단 여백 (96px) */
    }
    
    .hero-about .hero-content {
        min-height: 56.25vw !important;
        max-height: 400px !important;
        justify-content: flex-end !important; /* 텍스트 하단 배치 */
    }
    
    /* 모바일에서 영상을 아래로 이동 (HADA Entertainment가 중앙에 오도록) */
    .hero-about video {
        object-position: center 60% !important; /* 영상을 아래로 */
    }
    
    .hero-about h1 {
        font-size: 2.5rem !important;
    }
    
    /* 텍스트 크기 모바일 최적화 */
    .hero-about p {
        font-size: 1rem !important;
    }
    
    /* 하단 여백 확보 */
    .hero-about .animate-zoom-in {
        padding-bottom: 1.5rem !important;
    }
}

/* 반응형 - 태블릿 (769px ~ 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-about {
        min-height: 70vh;
    }
    
    .hero-about .hero-content {
        min-height: 70vh;
    }
    
    /* 태블릿은 약간만 위로 */
    .hero-about video {
        object-position: center 40%;
    }
}

/* 반응형 - 데스크톱 (1025px 이상) */
@media (min-width: 1025px) {
    /* 데스크톱은 기본 중앙 유지 */
    .hero-about video {
        object-position: center center; /* 또는 center 50% */
    }
}

/* 오버레이 레이어 */
.hero-about .bg-black {
    pointer-events: none;
}

/* 텍스트 가독성 향상 */
.hero-about h1 {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hero-about p {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}