/* css/intro.css - 인트로 화면 / Play 버튼 / 부팅 상태 UI */

/* -----------------------------------------------------------
   [기본 페이드 인 애니메이션]
   ----------------------------------------------------------- */

/*
   [CSS - 인트로 레이어 - 01번 - 상태표시]
   인트로 문구, Play 버튼, 하단 로고가 부드럽게 나타나는 기본 애니메이션입니다.
*/
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* -----------------------------------------------------------
   [인트로 전체 화면]
   ----------------------------------------------------------- */

/*
   [CSS - 인트로 레이어 - 02번 - 배치]
   Play 버튼을 누르기 전 처음 보이는 인트로 화면 전체 영역입니다.

   역할:
   - 인트로 문구와 Play 버튼을 화면 중앙에 배치합니다.
   - 하단 로고가 절대 위치로 들어갈 수 있게 기준점이 됩니다.
*/
#intro-css {
    width: 100%;
    height: 100vh;
    min-height: 640px;

    position: relative;

    background-color: #ffffff;

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

    padding: 20px;
    box-sizing: border-box;

    text-align: center;
}


/* -----------------------------------------------------------
   [인트로 문구]
   ----------------------------------------------------------- */

/*
   [CSS - 인트로 레이어 - 03번 - 배치]
   인트로 영문/한글 문구를 감싸는 영역입니다.

   역할:
   - Play 버튼과의 간격을 만듭니다.
   - 화면 진입 시 페이드 인으로 나타납니다.
*/
.intro-message-container {
    margin-bottom: 80px;
    opacity: 0;
    animation: fadeIn 2s ease forwards;
}

/*
   [CSS - 인트로 레이어 - 04번 - 모양]
   인트로 영문 문구 스타일입니다.
*/
.en-luxury-text {
    font-size: 43px;
    line-height: 1.15;
    margin: 0 0 15px 0;
    color: #000;
}

/*
   [CSS - 인트로 레이어 - 05번 - 모양]
   인트로 한글 문구 스타일입니다.
*/
.ko-luxury-text {
    font-size: 20px;
    line-height: 1.5;
    margin: 0;
    color: #555;
}


/* -----------------------------------------------------------
   [Play 버튼]
   ----------------------------------------------------------- */

/*
   [CSS - 인트로 레이어 - 06번 - 배치]
   인트로 Play 버튼의 기본 구조입니다.

   역할:
   - 영문 Play와 한글 시작 문구를 세로로 배치합니다.
   - 버튼 충전 애니메이션의 기준 박스가 됩니다.
*/
#start-btn {
    position: relative;
    z-index: 1;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;

    padding: 18px 90px;
    background-color: #ffffff;
    color: #000000;
    border: 2px solid #ffffff;

    cursor: pointer;
    transition: color 0.3s, background-color 0.2s ease, border-color 0.2s ease;

    opacity: 0;
    animation: fadeIn 1.5s ease forwards;
    animation-delay: 1.3s;
}

/*
   [CSS - 인트로 레이어 - 07번 - 모양]
   Play 버튼의 영문 문구 스타일입니다.
*/
.btn-en {
    font-size: 24px;
    letter-spacing: 0.18em;
    opacity: 0.76;
}

/*
   [CSS - 인트로 레이어 - 08번 - 모양]
   Play 버튼의 한글 문구 스타일입니다.
*/
.btn-ko {
    font-size: 15px;
    opacity: 0.76;
}

/*
   [CSS - 인트로 레이어 - 09번 - 상태표시]
   Play 버튼 충전 애니메이션용 검정 배경입니다.

   JS에서 charging 클래스가 붙으면 width가 100%로 늘어납니다.
*/
#start-btn::after {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 0%;
    height: 100%;

    background-color: #000000;

    z-index: -1;

    transition: none;
}

/*
   [CSS - 인트로 레이어 - 10번 - 상태표시]
   Play 버튼이 충전 중일 때 검정 배경을 채웁니다.
*/
#start-btn.charging::after {
    width: 100%;
    transition: width 3s linear;
}

/*
   [CSS - 인트로 레이어 - 11번 - 상태표시]
   Play 버튼 충전 중 텍스트를 흰색으로 바꿉니다.
*/
#start-btn.charging {
    color: #ffffff;
}

/*
   [CSS - 인트로 레이어 - 12번 - 상태표시]
   Play 버튼을 누른 뒤 부팅 중인 상태입니다.

   역할:
   - 버튼을 검정색으로 바꿉니다.
   - 중복 클릭을 막습니다.
*/
#start-btn.is-loading {
    background-color: #000000;
    border-color: #000000;
    color: #ffffff;

    cursor: wait;
    pointer-events: none;
}

/*
   [CSS - 인트로 레이어 - 13번 - 상태표시]
   부팅 중에는 기존 충전 배경 애니메이션을 멈춥니다.
*/
#start-btn.is-loading::after {
    width: 0%;
    transition: none;
}

/*
   [CSS - 인트로 레이어 - 14번 - 상태표시]
   부팅 실패 후 Retry 버튼 상태입니다.
*/
#start-btn.is-retry {
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #000000;

    cursor: pointer;
}

/*
   [CSS - 인트로 레이어 - 15번 - 상태표시]
   Retry 상태에서는 충전 배경 애니메이션을 사용하지 않습니다.
*/
#start-btn.is-retry::after {
    width: 0%;
    transition: none;
}


/* -----------------------------------------------------------
   [Play 이후 부팅 상태 표시판]
   ----------------------------------------------------------- */

/*
   [CSS - 인트로 레이어 - 16번 - 숨김표시]
   HTML hidden 속성이 붙어 있는 부팅 패널은 확실히 숨깁니다.

   이유:
   aria-hidden은 접근성 표시일 뿐 화면 숨김 기능이 아니므로,
   hidden 속성과 CSS 방어를 함께 사용합니다.
*/
#intro-loading-panel[hidden] {
    display: none;
}

/*
   [CSS - 인트로 레이어 - 17번 - 배치]
   Play 이후 표시되는 부팅 상태 패널의 기본 닫힌 상태입니다.

   역할:
   - 처음에는 높이 0, 투명 상태로 숨겨져 있습니다.
   - JS가 is-visible 클래스를 붙이면 펼쳐집니다.
*/
.intro-loading-panel {
    width: min(360px, 82vw);
    max-height: 0;

    margin-top: 0;

    opacity: 0;
    overflow: hidden;
    pointer-events: none;

    transform: translateY(8px);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        max-height 0.35s ease,
        margin-top 0.35s ease;
}

/*
   [CSS - 인트로 레이어 - 18번 - 상태표시]
   부팅 상태 패널이 열린 상태입니다.
*/
.intro-loading-panel.is-visible {
    max-height: 130px;
    margin-top: 28px;

    opacity: 1;
    transform: translateY(0);
}

/*
   [CSS - 인트로 레이어 - 19번 - 모양]
   SYSTEM BOOTING 같은 부팅 상태 상단 문구입니다.
*/
.intro-loading-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;

    color: #111111;
    opacity: 0.72;

    margin-bottom: 14px;
}

/*
   [CSS - 인트로 레이어 - 20번 - 배치]
   부팅 진행 라인 트랙입니다.
*/
.intro-loading-track {
    position: relative;

    width: 100%;
    height: 2px;

    background: #e9e9e9;

    overflow: hidden;

    margin-bottom: 16px;
}

/*
   [CSS - 인트로 레이어 - 21번 - 상태표시]
   부팅 진행 라인 안에서 움직이는 검정 바입니다.
*/
.intro-loading-track span {
    position: absolute;
    top: 0;
    left: -35%;

    width: 35%;
    height: 100%;

    background: #000000;

    animation: doomchitBootLine 1.25s ease-in-out infinite;
}

/*
   [CSS - 인트로 레이어 - 22번 - 상태표시]
   부팅 진행 라인 애니메이션입니다.
*/
@keyframes doomchitBootLine {
    0% { left: -35%; }
    100% { left: 100%; }
}

/*
   [CSS - 인트로 레이어 - 23번 - 모양]
   부팅 상태 메인 문구입니다.

   예:
   Loading sample index...
   Preparing audio engine...
*/
.intro-loading-text {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: #111111;

    margin: 0 0 6px 0;
}

/*
   [CSS - 인트로 레이어 - 24번 - 모양]
   부팅 상태 보조 설명 문구입니다.
*/
.intro-loading-subtext {
    font-size: 12px;
    font-weight: 300;

    color: #777777;

    margin: 0;
}

/*
   [CSS - 인트로 레이어 - 25번 - 상태표시]
   부팅 실패 상태에서 상단 문구 색상을 붉은 계열로 바꿉니다.
*/
.intro-loading-panel.is-error .intro-loading-kicker {
    color: #9b1c1c;
}

/*
   [CSS - 인트로 레이어 - 26번 - 상태표시]
   부팅 실패 상태에서 진행 라인을 붉은색 고정 바처럼 표시합니다.
*/
.intro-loading-panel.is-error .intro-loading-track span {
    animation: none;
    left: 0;
    width: 100%;

    background: #9b1c1c;
}

/*
   [CSS - 인트로 레이어 - 27번 - 상태표시]
   부팅 실패 상태에서 메인 문구 색상을 붉은 계열로 바꿉니다.
*/
.intro-loading-panel.is-error .intro-loading-text {
    color: #9b1c1c;
}


/* -----------------------------------------------------------
   [하단 로고]
   ----------------------------------------------------------- */

/*
   [CSS - 인트로 레이어 - 28번 - 배치]
   인트로 화면 하단 로고 위치입니다.
*/
.bottom-logo {
    position: absolute;
    bottom: 40px;

    opacity: 0;

    animation: fadeIn 2s ease forwards;
    animation-delay: 4s;
}

/*
   [CSS - 인트로 레이어 - 29번 - 크기]
   인트로 하단 로고 크기입니다.
*/
.bottom-logo img {
    width: 60px;
    height: auto;
}


/* -----------------------------------------------------------
   [모바일 보정]
   ----------------------------------------------------------- */

/*
   [CSS - 인트로 레이어 - 30번 - 반응형]
   모바일 화면에서 인트로 전체 높이와 여백을 조정합니다.
*/
@media (max-width: 768px) {
    #intro-css {
        min-height: 560px;
        padding: 18px;
    }

    /*
       [CSS - 인트로 레이어 - 31번 - 크기]
       모바일에서 인트로 문구와 Play 버튼 사이 간격을 줄입니다.
    */
    .intro-message-container {
        margin-bottom: 58px;
    }

    /*
       [CSS - 인트로 레이어 - 32번 - 크기]
       모바일에서 영문 인트로 문구 크기를 줄입니다.
    */
    .en-luxury-text {
        font-size: 28px;
        line-height: 1.25;
    }

    /*
       [CSS - 인트로 레이어 - 33번 - 크기]
       모바일에서 한글 인트로 문구 크기를 줄입니다.
    */
    .ko-luxury-text {
        font-size: 15px;
    }

    /*
       [CSS - 인트로 레이어 - 34번 - 크기]
       모바일에서 Play 버튼 크기를 줄입니다.
    */
    #start-btn {
        padding: 14px 62px;
    }

    /*
       [CSS - 인트로 레이어 - 35번 - 크기]
       모바일에서 Play 영문 문구 크기를 줄입니다.
    */
    .btn-en {
        font-size: 20px;
    }

    /*
       [CSS - 인트로 레이어 - 36번 - 크기]
       모바일에서 Play 한글 문구 크기를 줄입니다.
    */
    .btn-ko {
        font-size: 13px;
    }

    /*
       [CSS - 인트로 레이어 - 37번 - 크기]
       모바일에서 부팅 패널 너비를 조정합니다.
    */
    .intro-loading-panel {
        width: min(320px, 86vw);
    }

    /*
       [CSS - 인트로 레이어 - 38번 - 크기]
       모바일에서 부팅 패널이 열렸을 때 위쪽 간격을 줄입니다.
    */
    .intro-loading-panel.is-visible {
        margin-top: 22px;
    }

    /*
       [CSS - 인트로 레이어 - 39번 - 크기]
       모바일에서 부팅 상태 메인 문구 크기를 줄입니다.
    */
    .intro-loading-text {
        font-size: 12px;
    }

    /*
       [CSS - 인트로 레이어 - 40번 - 크기]
       모바일에서 부팅 상태 보조 문구 크기를 줄입니다.
    */
    .intro-loading-subtext {
        font-size: 11px;
    }

    /*
       [CSS - 인트로 레이어 - 41번 - 배치]
       모바일에서 하단 로고 위치를 조금 올립니다.
    */
    .bottom-logo {
        bottom: 28px;
    }
}


/* -----------------------------------------------------------
   [움직임 줄이기 접근성 옵션]
   ----------------------------------------------------------- */

/*
   [CSS - 인트로 레이어 - 42번 - 보정]
   사용자의 시스템 설정이 “움직임 줄이기”일 때 애니메이션을 줄입니다.
*/
@media (prefers-reduced-motion: reduce) {
    .intro-message-container,
    #start-btn,
    .bottom-logo {
        animation: none;
        opacity: 1;
    }

    /*
       [CSS - 인트로 레이어 - 43번 - 보정]
       움직임 줄이기 환경에서는 부팅 진행 라인도 움직이지 않게 합니다.
    */
    .intro-loading-track span {
        animation: none;
        left: 0;
        width: 100%;
    }

    /*
       [CSS - 인트로 레이어 - 44번 - 보정]
       움직임 줄이기 환경에서는 부팅 패널 전환 애니메이션을 제거합니다.
    */
    .intro-loading-panel {
        transition: none;
    }
}