/* entry3d.css — 진입 3D 스크롤 모핑 히어로 v3 시퀀스판 (e3- 접두어, docs/05).
   7비트 시퀀스: B0 중앙 순수 텍스트+점광 → B1 "사람과 AI를 잇습니다" → 흡입·별밭 전개
   → B2 별 초점 → 별 소등+B3 대형 타이포 → 풀백+B4 NEXA 입자 글자 → B5 수평 은하 메인(v1 모션)
   → 산개+B6 피날레(중앙 텍스트+NEXA LABS 워드마크+위 화살표) + 오토플레이
   (body.e3-autoplay — 주행 중 힌트 숨김, 우상단 재생/일시정지 원형 버튼 .e3-play).
   프로그레시브 인핸스먼트: .e3는 기본 display:none — entry3d/main.js가 3D 성공 시에만
   body.e3-active를 붙여 정적 폴백 히어로(.hm-hero)를 숨기고 스테이지를 켠다.
   no-JS·prefers-reduced-motion·WebGL 실패·저사양 하드 폴백 = 정적 히어로 그대로(docs/05 §7).
   팔레트: 딥 네이비 스테이지 + 화이트~라이트 네이비 단색 램프(docs/04 §2-4).
   CSS 그라데이션 금지 — 글래스는 반투명 네이비 단색 면 + blur(docs/04 §2-3·docs/09 §3-2).
   수정 시 참조 ?v= +1 필수(1시간 캐시 함정). */

/* ══ 1. 활성/비활성 스위치 ══ */
.e3 {
    display: none;
    background: var(--stage-bg);
    color: var(--stage-text);
}
body.e3-active .e3 { display: block; }
body.e3-active .hm-hero { display: none; }

/* 다크 스테이지 위 흰 포커스 링 (docs/04 §7) */
.e3 :focus-visible { outline-color: #ffffff; }

/* ══ 2. 트랙(750vh — 7비트) + sticky 스테이지 — 트랙 종료 = 핀 해제, 본문으로 자연 연결 ══ */
.e3-track {
    position: relative;
    height: 750vh;
}
.e3-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}
.e3-canvas-wrap { position: absolute; inset: 0; }
.e3-canvas-wrap canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* ══ 3. 오버레이 4세트 — hero(B0)·connect(B2)·market(B4)·finale(B6), 동시 표시 1개뿐 ══ */
.e3-overlays {
    position: absolute;
    inset: 0;
    pointer-events: none; /* 캔버스 위 레이어 — 링크·버튼만 인터랙션 */
}
.e3-panel {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-6);
}
.e3-panel a,
.e3-panel button { pointer-events: auto; }

/* B0 — 카드(글래스) 없는 중앙 정렬 순수 텍스트(아웃 전환은 스크럽 b0→b1 소유) */
.e3-hero-pure {
    max-width: 860px;
    text-align: center;
    will-change: opacity, filter, transform;
}
.e3-hero-pure .e3-title { font-size: calc(var(--fs-display) * 1.12); }
.e3-hero-pure .e3-sub { margin-left: auto; margin-right: auto; }
.e3-hero-pure .e3-actions { justify-content: center; }

/* B1·B3 — 배경 박스 없는 순수 텍스트(가독은 텍스트 섀도만 — 그라데이션 아님) */
.e3-panel-center { text-align: center; }
.e3-pure-title {
    max-width: 900px;
    font-size: var(--fs-display);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--stage-text);
    text-shadow: 0 2px 20px rgba(2, 4, 28, 0.9), 0 0 3px rgba(2, 4, 28, 0.8);
}
.e3-mega-title {
    max-width: 1080px;
    font-size: clamp(2.4rem, 6.5vw, 5.2rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--stage-text);
    text-shadow: 0 2px 24px rgba(2, 4, 28, 0.9), 0 0 3px rgba(2, 4, 28, 0.8);
}
/* B3 타이포는 "No.1" 단독(2026-08-05 3차) — DOM "AI Market" 교체 연출은 삭제,
   서비스명은 별 입자 글자(B4)가 그린다. span 구조·그리드 스택도 함께 제거. */
.e3-mega-title { text-align: center; }

/* B0 타이포 — 검정 램프 기본값을 스테이지 색으로 덮음(카드 없음 — 가독은 텍스트 섀도).
   배지는 2026-08-04 지시로 제거 — 타이틀이 첫 요소 */
.e3-title {
    font-size: var(--fs-display);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: var(--stage-text);
    text-shadow: 0 2px 20px rgba(2, 4, 28, 0.9), 0 0 3px rgba(2, 4, 28, 0.8);
}
.e3-sub {
    margin-top: var(--sp-6);
    max-width: 620px;
    font-size: var(--fs-body-lg);
    line-height: 1.7;
    color: var(--stage-text-sub);
    text-shadow: 0 1px 14px rgba(2, 4, 28, 0.9);
}
.e3-actions {
    margin-top: var(--sp-8);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

/* ══ 4. B5~B6 피날레 — 은하 위 중앙 텍스트(비전+NEXA LABS)가 먼저, 배경 산개 후
   CTA(버튼 2 + 위 화살표) 등장. CTA 등장 타이밍은 타임라인 소유(autoAlpha —
   visibility 숨김이라 등장 전에도 레이아웃 자리는 유지 = 텍스트 밀림 없음) ══ */
.e3-panel-finale {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-6);
    text-align: center;
}
.e3-finale-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-6);
}
.e3-brand {
    font-size: var(--fs-body-lg);
    font-weight: 600;
    letter-spacing: 0.34em;
    text-indent: 0.34em; /* 자간 보정 — 마지막 글자 뒤 여백 상쇄로 시각 중앙 유지 */
    color: var(--stage-text-sub);
    text-shadow: 0 1px 14px rgba(2, 4, 28, 0.9);
}
.e3-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    transition: background-color 200ms ease;
}
.e3-top:hover { background: rgba(255, 255, 255, 0.16); }
/* 오토플레이 종료(B6 도달) 후 절제된 펄스 — main.js가 클래스 토글 */
.e3-top-pulse { animation: e3-top-pulse 2s ease-in-out infinite; }
@keyframes e3-top-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3); }
    70% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* ══ 4-1. 우상단 자동 재생 상태 원형 버튼 — 재생 중 ⏸ / 종료·중단 시 ▶ (main.js가 e3-playing 토글).
   상단에서 5px 추가 이격 + 우측 배치(2026-08-04 사용자 지시) ══ */
.e3-play {
    position: absolute;
    top: calc(var(--gnb-h, 64px) + var(--sp-4) + 5px);
    right: var(--sp-6);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    transition: background-color 200ms ease;
}
.e3-play:hover { background: rgba(255, 255, 255, 0.16); }
.e3-play .e3-ic-pause { display: none; }
.e3-play.e3-playing .e3-ic-pause { display: block; }
.e3-play.e3-playing .e3-ic-play { display: none; }

/* ══ 5. 스크롤 힌트 — 오토플레이 주행 중 숨김(수동 전환 시 스크럽 상태로 복귀) ══ */
.e3-hint {
    position: absolute;
    left: 50%;
    /* 초기 뷰(스크롤 0)에서 스테이지가 sticky GNB 높이만큼 뷰포트 아래로 내려가 있어
       GNB 높이를 보정해야 1440×900·모바일에서 힌트가 잘리지 않는다(QA 실측) */
    bottom: calc(var(--gnb-h, 64px) + var(--sp-6));
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-1);
    /* 13px → 18px 승격(2026-08-04 지시 — 첫 화면에서 너무 작아 안 읽혔다).
       화살표도 같은 비율로 키운다(20→28px, 아래 svg 규칙). */
    font-size: var(--fs-body-lg);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--stage-text-sub);
    text-shadow: 0 1px 14px rgba(2, 4, 28, 0.9);
    pointer-events: none;
}
.e3-hint svg {
    width: 28px;
    height: 28px;
    animation: e3-hint-bob 1.8s ease-in-out infinite;
}
@keyframes e3-hint-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}
body.e3-autoplay .e3-hint {
    opacity: 0 !important;      /* gsap 인라인 autoAlpha보다 우선 — 주행 중 강제 숨김 */
    visibility: hidden !important;
}

/* ══ 6. 모바일 ══ */
@media (max-width: 768px) {
    .e3-hero-pure .e3-title { font-size: var(--fs-display); }
    .e3-panel { padding: var(--sp-4); }
    .e3-play {
        top: calc(var(--gnb-h, 64px) + var(--sp-3) + 5px);
        right: var(--sp-4);
        width: 44px;
        height: 44px;
    }
}

/* ══ 7. reduced-motion — 3D 관련 전부 display:none, 정적 폴백 히어로 복귀 (하드 안전망).
   main.js도 진입 자체를 차단하지만 세션 중 설정 변경까지 CSS가 커버한다. ══ */
@media (prefers-reduced-motion: reduce) {
    .e3, body.e3-active .e3 { display: none !important; }
    body.e3-active .hm-hero { display: block !important; }
    .e3-hint svg { animation: none; }
    .e3-top-pulse { animation: none; }
}