@charset "UTF-8";
/**
 * Owl Screen Effect Engine - Stylesheet
 * Version: 2.0.0 (Phase 87: GPU Diet & FOUC Shield Edition)
 * * SSoT 아키텍처 규약 기반 오로라 스크린 이펙트 하드웨어 가속 스타일시트입니다.
 */

/* 최상단 래퍼 (글로벌 오버레이 격리 및 클릭 방해 차단) */
#owl-global-screen-effect {
    position: fixed;
    top: 0;
    left: 0;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* 모바일 하단 바 대응 */
    z-index: 9999999; /* 🚨 엘리멘터 팝업(999999)도 덮어버리도록 격상 */
    pointer-events: auto; /* 이펙트 진행 중 클릭 이벤트는 이 쉴드가 전부 흡수 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* 🚨 0.6초 페이드아웃 후 visibility: hidden 으로 완전히 시야에서 소각 (GPU 해방) */
    transition: opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0.6s ease-in-out;
    background-color: var(--aurora-color-1, #051A33);
}

/* 🚨 페이드아웃(소멸) 상태 클래스 및 하위 요소 동기화 락(Sync Lock) */
#owl-global-screen-effect.owl-fade-out {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important; 
}

/* 부모가 사라질 때, 내부 요소들이 가진 딜레이를 무력화하고 투명도를 0으로 강제하여 동일 시점에 완전히 소각시킵니다. */
#owl-global-screen-effect.owl-fade-out #owl-logo-container,
#owl-global-screen-effect.owl-fade-out .owl-effect-slogan,
#owl-global-screen-effect.owl-fade-out .owl-logo-glow-layer {
    transition-delay: 0s !important;
    transition-duration: 0.6s !important; 
    opacity: 0 !important;
}

/* 1. 하이엔드 오로라 애니메이션 엔진 (GPU 하드웨어 가속) */
.owl-aurora-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg, 
        var(--aurora-color-1) 0%, 
        var(--aurora-color-2) 40%, 
        var(--aurora-color-3) 70%, 
        var(--aurora-color-1) 100%
    );
    background-size: 400% 400%;
    animation: owlAuroraMovement var(--aurora-speed) ease-in-out infinite;
    z-index: 1;
    transform: translateZ(0);
    will-change: background-position;
}

/* 시네마틱 오버레이 (비네팅 효과) */
.owl-aurora-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.4) 100%);
    z-index: 2;
}

@keyframes owlAuroraMovement {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 2. 메인 콘텐츠 구역 */
.owl-effect-content-wrapper {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 2rem;
    box-sizing: border-box;
}

/* 3. 로고 컨테이너 (등장 애니메이션) */
#owl-logo-container {
    position: relative; 
    opacity: 0;
    transform: scale(0.9) translateY(30px) translateZ(0);
    filter: blur(10px);
    transition: all 1.5s cubic-bezier(0.16, 1, 0.3, 1);
    
    /* 🚨 무의미한 will-change: all 멸균 및 최적화 */
    will-change: transform, opacity, filter;
}

#owl-logo-container.active {
    opacity: 1;
    transform: scale(1) translateY(0) translateZ(0);
    filter: blur(0);
}

/* 🚨 로고 원본 절대 보존 (무균실 아키텍처) */
.owl-effect-logo {
    position: relative;
    z-index: 2; 
    max-width: 450px;
    width: 100%;
    height: auto;
    transform: translateZ(0); 
}

/* 🚨 독립된 가상 광원 레이어 (Glow Layer) */
.owl-logo-glow-layer {
    position: absolute;
    inset: 0;
    z-index: 1; 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: owlLogoPulse 4s ease-in-out infinite;
    transform: translateZ(0);
    will-change: filter, opacity; /* 🚨 VRAM 다이어트 */
}

@keyframes owlLogoPulse {
    0%, 100% { 
        filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.4)) brightness(1); 
        opacity: 0.8;
    }
    50% { 
        filter: drop-shadow(0 0 30px rgba(212, 175, 55, 1)) brightness(1.2); 
        opacity: 1;
    }
}

/* 4. 슬로건 텍스트 (타이포그래피 및 애니메이션) */
.owl-effect-slogan {
    font-family: var(--slogan-font, 'Noto Sans KR', sans-serif);
    color: var(--slogan-color, #ffffff);
    
    /* 🎯 SSoT 폰트 변수 확장 바인딩 */
    font-size: var(--slogan-font-size, 1.25rem); 
    font-weight: var(--slogan-font-weight, 300);
    line-height: var(--slogan-line-height, 1.5);
    
    margin-top: 1.5rem;
    opacity: 0;
    
    /* 🎯 자간(Letter Spacing) 커스텀 변수 적용 */
    letter-spacing: var(--slogan-letter-spacing, 0.6rem);
    text-shadow: 0 2px 15px rgba(0,0,0,0.5);
    transition: opacity 1s 0.8s ease-out, letter-spacing 1s 0.8s ease-out;
    transform: translateZ(0); 
    will-change: letter-spacing, opacity; 
}

.owl-effect-slogan.active {
    opacity: 1;
    letter-spacing: calc(var(--slogan-letter-spacing, 0.6rem) + 0.2rem);
}

/* 5. 모바일 반응형 최적화 (Media Queries) */
@media screen and (max-width: 768px) {
    .owl-effect-logo {
        max-width: 75vw;
    }
    
    .owl-effect-slogan {
        font-size: calc(var(--slogan-font-size, 1.25rem) * 0.8);
        letter-spacing: calc(var(--slogan-letter-spacing, 0.6rem) * 0.5);
        margin-top: 1.2rem;
        text-shadow: 0 1px 10px rgba(0,0,0,0.6);
    }

    .owl-effect-slogan.active {
        letter-spacing: calc(var(--slogan-letter-spacing, 0.6rem) * 0.5 + 0.1rem);
    }
}