/* ========================================
   Intro / Loader Control
======================================== */

/* 첫 접속에서는 기존 페이지 로더 숨김 */
html.needs-brand-intro .page-loader {
    display: none !important;
}

/* 인트로를 본 상태에서는 브랜드 인트로 숨김 */
html.has-played-brand-intro .brand-intro {
    display: none !important;
}

/* 인트로 실행 중 스크롤 방지 */
body.is-intro-playing {
    overflow: hidden;
}


/* ========================================
   Brand Intro
======================================== */

.brand-intro {
    position: fixed;
    inset: 0;
    z-index: 100000;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;
    overflow: hidden;
}

.brand-intro__message {
    position: relative;

    width: min(600px, calc(100% - 40px));
    height: 190px;
}


/* ========================================
   Center Line
======================================== */

.brand-intro__line {
    position: absolute;
    top: 50%;
    left: 0;

    width: 100%;
    height: 1px;

    background: var(--blue);

    transform: translateY(-50%) scaleX(0);
    transform-origin: left center;
}


/* ========================================
   Intro Text
======================================== */

.brand-intro__text {
    position: absolute;
    left: 50%;

    width: 100%;

    overflow: hidden;
    text-align: center;

    transform: translateX(-50%);
}

.brand-intro__text--top {
    bottom: calc(50% + 14px);
}

.brand-intro__text--bottom {
    top: calc(50% + 14px);
}

.brand-intro__text-inner {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: clamp(48px, 7.5vw, 90px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.07em;

    opacity: 0;
}

/* 윗줄은 중앙선에서 위쪽으로 등장 */


.brand-intro__text-inner span {
    display: inline-block;
}

.brand-intro__text-inner span + span {
    margin-left: 0.06em;
}


/* 솔리드 글자 */
.brand-intro .text-solid {
    color: var(--blue);
    -webkit-text-fill-color: var(--blue);
    -webkit-text-stroke: 0;
}

/* 아웃라인 글자 */
.brand-intro .text-outline {
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.5px var(--blue);
}


/* ========================================
   Final Logo
======================================== */

.brand-intro__logo {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    visibility: hidden;
}

.brand-intro__logo img {
    display: block;

    width: clamp(170px, 24vw, 290px);
    height: auto;

    transform: scale(0.94);
}


/* ========================================
   Existing Page Loader
======================================== */

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
}


/* ========================================
   Mobile
======================================== */

@media (max-width: 767px) {
    .brand-intro__message {
        width: calc(100% - 48px);
        height: 150px;
    }

    .brand-intro__text-inner {
        font-size: clamp(28px, 9vw, 42px);
    }

    .brand-intro__text--top {
        bottom: calc(50% + 11px);
    }

    .brand-intro__text--bottom {
        top: calc(50% + 11px);
    }

    .brand-intro .text-outline {
        -webkit-text-stroke-width: 0.8px;
    }
}


/* 모션 최소화 설정 */
@media (prefers-reduced-motion: reduce) {
    .brand-intro__line,
    .brand-intro__text-inner,
    .brand-intro__logo,
    .brand-intro__logo img {
        transition: none;
    }
}