/* ==========================================================================
   page/index.css — 랜딩페이지 전용 (히어로, 신곡 목록, 사용 방법)
   공통 재질·모션은 glass.css, 표는 song-table.css 참조.
   히어로·신곡 패널·사용법 타일은 모두 콘텐츠 패널(.content-panel)이다 (D14).
   ========================================================================== */

/* fixed 상단바 자리를 hero-zone 이 스스로 확보하므로 공통 상단 padding 해제 */
#container {
    padding-top: 0;
}

/* 배경 사진(.photo-bg)은 검색 페이지와 공용이 되어 glass.css 배경 연출
   절로 이동 (19턴) */

/* ---------- 히어로 ---------- */
.hero-zone {
    position: relative;
    z-index: 1;
    min-height: 92vh;
    display: grid;
    place-items: center;
    padding: 110px 0 40px;
}

.hero {
    overflow: hidden;
    width: min(620px, 100%);
    padding: clamp(2rem, 5vw, 3.2rem);
    text-align: center;
}

/* 헤드라인 세 줄: 덩어리는 패널 가운데, 줄은 왼쪽 시작선에 맞춘다 */
.hero .headerText {
    width: fit-content;
    margin-inline: auto;
    text-align: left;
    font-size: var(--fs-hero); /* 글자 사다리(glass.css) — 26 / ≥768 32 / ≥1200 34 */
    font-weight: var(--fw-mid); /* 헤드라인 전체가 한 굵기 */
    color: var(--ink);
    line-height: 1.32;
    letter-spacing: -.02em;
    margin-bottom: 0;
}

/* 헤드라인 줄 첫머리 단어: 옅은 잉크(--ink-3) */
.hero .hero-keyword {
    color: var(--ink-3);
}

.hero .hero-description {
    margin: .9rem 0 0;
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--ink-2);
    word-break: keep-all;
    text-wrap: balance;
}

.hero form {
    margin-top: 1.8rem;
}

/* 히어로 안쪽 등장: 패널이 떠오르기 시작하고 .3s 뒤 제목 → 설명 → 폼 → 바로가기 순서로 100ms 간격 */
.hero.veil .hero-stagger {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(4px);
    transition: opacity .4s ease-out, transform .4s ease-out, filter .4s ease-out;
    transition-delay: calc(var(--vd, 0s) + .3s + var(--stagger-index, 0) * .1s);
}

.hero.veil.on .hero-stagger {
    opacity: 1;
    transform: none;
    filter: none;
}

@media (prefers-reduced-motion: reduce) {
    .hero.veil .hero-stagger {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}

/* 인증코드 행: 구독 요청 성공 시 Bootstrap collapse 로 열린다 */
#verifyEmailCollapse .field-row {
    margin-top: .55rem;
}

#verifyEmailCollapseButton {
    display: none; /* JS 가 대신 눌러주는 트리거 */
}

#verifyDeleteCollapseButton {
    display: none;
}

/* 이메일 수집 동의 줄 */
.agree {
    display: inline-flex;
    align-items: flex-start;
    gap: .5rem;
    margin-top: 1rem;
    font-size: var(--fs-sm);
    color: var(--ink-2);
    letter-spacing: .01em;
    line-height: 1.5;
    text-align: left;
}

.agree input {
    margin-top: .15rem;
    width: 15px;
    height: 15px;
    flex: none;
}

/* [ 자세히 보기 ]: 버튼이지만 밑줄 글자로 보이게 */
.agreement-btn {
    font: inherit;
    font-weight: var(--fw-strong);
    color: var(--ink-2);
    background: none;
    border: 0;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* 사용 방법 바로가기 */
.hero .usage-link {
    margin-top: 1.6rem;
    font-size: var(--fs-md);
}

/* ---------- 신곡 목록 ---------- */
.new-song-section {
    position: relative; /* 보케(.bokeh)의 기준점 + sky 위로 올라오는 z 컨텍스트 */
    z-index: 1;
    padding-top: 1rem;
}

.songs-intro {
    text-align: center;
    font-size: var(--fs-md);
    line-height: 1.7;
    color: var(--ink-2);
    letter-spacing: .01em;
}

/* .songs-grid / .song-panel 배치는 song-table.css (공용) 참조 */

/* ---------- 사용 방법 ---------- */
.showcase {
    position: relative;
    z-index: 1;
    padding: 2rem 0 3rem;
}

.showcase #showCaseHeaderText {
    text-align: center;
    padding: 1rem 2rem;
    margin-bottom: 0;
}

.usage-row {
    position: relative;
    margin-top: 3rem;
    display: grid;
    gap: 1.8rem;
    align-items: center;
}

@media (min-width: 992px) {
    .usage-row {
        grid-template-columns: .9fr 1.1fr;
        gap: 3rem;
    }
}

/* 물방울 동심원: 리빌 시작 시 퍼지고, 내용은 0.3s 뒤에 떠오른다 */
.drops {
    position: absolute;
    left: var(--dx, 18%);
    top: var(--dy, 30%);
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 0;
}

.drops i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--s);
    height: var(--s);
    margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
    border: 2px solid rgb(120 150 180 / .4);
    border-radius: 50%;
    transform: scale(0);
    opacity: 0;
}

.usage-row.is-lit .drops i {
    animation: drop 1.5s ease-out both;
    animation-delay: var(--dd);
}

@keyframes drop {
    0% { transform: scale(0); opacity: 0; }
    25% { opacity: .9; }
    100% { transform: scale(1); opacity: 0; }
}

/* 행 자체는 리빌 효과 없이(기준 컨테이너 역할만), 내용이 동심원보다
   0.3s 늦게 떠오른다 — glass.css 의 [data-lift] 기본 효과를 행에서 해제 */
.usage-row[data-lift] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
}

.usage-row .u-video,
.usage-row .u-text {
    opacity: .1;
    transform: translateY(30px) scale(.985);
    filter: blur(12px);
    transition: opacity 1.1s var(--ease-float) .3s, transform 1.1s var(--ease-float) .3s, filter 1.1s var(--ease-float) .3s;
    will-change: transform, opacity, filter;
}

.usage-row.is-lit .u-video,
.usage-row.is-lit .u-text {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

/* 글 타일은 영상보다 반 박자 늦게 */
.usage-row.is-lit .u-text {
    transition-delay: .42s;
}

/* 영상: 기기 프레임 없이 패널 위에 녹아 떠 있는 느낌.
   패널 반경은 동심(P20): 안쪽 영상 20px + 패딩 7px = 27px */
.u-video {
    z-index: 1;
    justify-self: center;
    width: min(270px, 100%);
    padding: 7px;
    --r-parent: 27px;
    border-radius: var(--r-parent);
}

.u-video video {
    display: block;
    width: 100%;
    aspect-ratio: 640 / 1036;
    border-radius: calc(var(--r-parent) - 7px);
    object-fit: cover;
    background: #10151a;
}

/* 문의사항 항목의 정지 이미지도 같은 프레임으로 */
.u-video img {
    display: block;
    width: 100%;
    border-radius: calc(var(--r-parent) - 7px);
    object-fit: cover;
}

/* dark 에서 영상·정지 이미지 위를 어둡게 덮는 막 (4기 5턴 복구 — 옛 index.css
   .video-shadow 의 rgba(0,0,0,.3) 그대로). 패널 패딩 안쪽(7px)에 영상 반경(20px)으로
   얹는다. 보이고 숨김은 common.css .dark-mode-element */
.u-video .video-shadow {
    position: absolute;
    inset: 7px;
    border-radius: calc(var(--r-parent) - 7px);
    background-color: rgb(0 0 0 / .3);
    pointer-events: none;
}

.u-text {
    z-index: 1;
    padding: clamp(1.4rem, 3vw, 2rem);
    text-align: left;
}

.u-text h3 {
    font-size: var(--fs-lg);
    margin-bottom: 0;
}

.u-text p {
    margin-top: .8rem;
    margin-bottom: 0;
    max-width: 30rem;
    line-height: 1.75;
    color: var(--ink-2);
    letter-spacing: .01em;
}

.u-text a {
    color: var(--ky-ink);
    font-weight: var(--fw-strong);
}

/* ---------- 접근성·모바일 ---------- */
@media (prefers-reduced-motion: reduce) {
    .usage-row .u-video,
    .usage-row .u-text {
        opacity: 1;
        transform: none;
        filter: none;
        transition: opacity .2s ease;
    }

    .usage-row.is-lit .drops i {
        animation: none;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 1.8rem 1.2rem 2rem;
    }
}