/* ================================================================
   landing.css — SF 랜딩 오버레이 (refined / asset-inspired)
   index.html: <link rel="stylesheet" href="landing.css">  (style.css 다음)
================================================================ */

/* ━━ 기반 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#landing-overlay {
    position:fixed; inset:0; z-index:2000;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; cursor:pointer;
    background:var(--bg);
}
#landing-overlay::before {       /* 그리드 */
    content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    background-image:
        linear-gradient(rgba(30,127,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30,127,255,.03) 1px, transparent 1px);
    background-size:46px 46px;
}
#landing-overlay::after {        /* 비네트 */
    content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:radial-gradient(ellipse 64% 64% at 50% 50%, transparent 18%, rgba(4,6,11,.74) 100%);
}
.ld-canvas { position:absolute; inset:0; z-index:0; pointer-events:none; }

/* ━━ 회전 링 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ld-rings { position:absolute; top:50%; left:50%; pointer-events:none; z-index:3; }
.ld-ring  { position:absolute; border-radius:50%; border-style:solid; border-color:transparent; transform:translate(-50%,-50%); }
.ld-ring-1 { width:min(680px,90vmin); height:min(680px,90vmin); border-width:1px; border-top-color:rgba(30,127,255,.42); border-right-color:rgba(0,212,255,.18); animation:ldSpin 26s linear infinite; }
.ld-ring-1::before { content:''; position:absolute; top:-3px; left:calc(50% - 3px); width:5px; height:5px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px 2px rgba(30,127,255,.8); }
.ld-ring-2 { width:min(470px,64vmin); height:min(470px,64vmin); border-width:1px; border-bottom-color:rgba(30,127,255,.4); border-left-color:rgba(0,212,255,.15); animation:ldSpin 17s linear infinite reverse; }
.ld-ring-2::before { content:''; position:absolute; bottom:-3px; left:calc(50% - 2px); width:4px; height:4px; border-radius:50%; background:var(--accent2); box-shadow:0 0 8px 2px rgba(0,212,255,.7); }
.ld-ring-3 { width:min(300px,42vmin); height:min(300px,42vmin); border-width:1px; border-top-color:rgba(0,212,255,.32); border-right-color:rgba(30,127,255,.12); animation:ldSpin 11s linear infinite; }
@keyframes ldSpin { from{transform:translate(-50%,-50%) rotate(0)} to{transform:translate(-50%,-50%) rotate(360deg)} }

/* ━━ 중앙 펄스 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ld-pulse-center {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:220px; height:220px; border-radius:50%; pointer-events:none; z-index:3;
    background:radial-gradient(circle, rgba(30,127,255,.08) 0%, rgba(0,212,255,.035) 40%, transparent 70%);
    animation:ldPulseCenter 4.5s ease-in-out infinite;
}
@keyframes ldPulseCenter { 0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.55} 50%{transform:translate(-50%,-50%) scale(1.6);opacity:.95} }

/* ━━ 그레인 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ld-grain {
    position:absolute; inset:0; pointer-events:none; z-index:4; opacity:.04; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation:grainShift .4s steps(3) infinite;
}

/* 전체 화면 CRT 스캔라인 (이미지 1·3 풀프레임 텍스처) */
.ld-crt {
    position:absolute; inset:0; pointer-events:none; z-index:4;
    background:repeating-linear-gradient(0deg,
        rgba(0,0,0,0) 0 2px,
        rgba(0,0,0,.16) 2px 3px);
    mix-blend-mode:multiply; opacity:.5;
}
[data-theme="light"] .ld-crt { opacity:.2; }

/* ━━ 스캔라인 — 반투명 / 은은하게 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ld-scanloop {
    position:absolute; left:0; right:0; height:1px; pointer-events:none; z-index:5;
    background:linear-gradient(90deg, transparent 0%, rgba(30,127,255,.22) 25%, rgba(0,212,255,.32) 50%, rgba(30,127,255,.22) 75%, transparent 100%);
    box-shadow:0 0 6px rgba(30,127,255,.18);
    animation:ldScanLoop 7s linear 2s infinite;
}
@keyframes ldScanLoop { 0%{top:-2px;opacity:0} 6%{opacity:.32} 90%{opacity:.18} 100%{top:100vh;opacity:0} }

/* ━━ System Cobra 스타일 HUD 콜아웃 ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ld-co {
    position:absolute; z-index:6; display:flex; align-items:center; gap:9px;
    font-family:var(--font-mono); opacity:0; animation:ldFade .5s ease-out .55s both;
}
.ld-co-r { flex-direction:row-reverse; }            /* 우측: 라벨—선—노드 */
.ld-co-dot {
    width:7px; height:7px; border:1px solid var(--accent); border-radius:50%;
    position:relative; flex-shrink:0;
}
.ld-co-dot::after { content:''; position:absolute; inset:1.5px; border-radius:50%; background:var(--accent); box-shadow:0 0 5px var(--accent); }
.ld-co-line { width:54px; height:1px; background:linear-gradient(90deg, var(--accent), transparent); flex-shrink:0; }
.ld-co-r .ld-co-line { background:linear-gradient(90deg, transparent, var(--accent)); }
.ld-co-label { font-size:.56rem; letter-spacing:.13em; color:var(--accent); opacity:.5; line-height:1.7; white-space:nowrap; }
.ld-co-r .ld-co-label { text-align:right; }
.ld-co-label b { color:var(--accent2); font-weight:400; }
.ld-co-label i { color:var(--text-dim); font-style:normal; }

.ld-co-tl { top:78px;    left:46px; }
.ld-co-tr { top:78px;    right:46px; }
.ld-co-bl { bottom:78px; left:46px; }
.ld-co-br { bottom:78px; right:46px; }

/* ━━ 크로스헤어 레티클 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ld-reticle {
    position:absolute; z-index:6; width:38px; height:38px; color:var(--accent);
    opacity:0; animation:ldFade .5s ease-out .7s both, ldSpinSlow 32s linear infinite;
}
.ld-reticle-1 { top:20%;  left:13%; }
.ld-reticle-2 { bottom:22%; right:14%; width:30px; height:30px; animation-delay:.8s, 0s; }
@keyframes ldSpinSlow { from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* ━━ 스캐터 마크 (스파클 / X) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ld-mark { position:absolute; z-index:6; color:var(--accent); opacity:0; animation:ldMark 4s ease-in-out infinite; }
.ld-mark svg { display:block; width:100%; height:100%; }
.ld-mark-1 { top:26%; right:20%; width:16px; height:16px; animation-delay:.4s; }
.ld-mark-2 { bottom:30%; left:18%; width:12px; height:12px; animation-delay:1.6s; color:var(--accent2); }
.ld-mark-3 { top:64%; left:9%;  width:10px; height:10px; animation-delay:2.6s; }
.ld-mark-4 { top:16%; left:42%; width:11px; height:11px; animation-delay:3.4s; color:var(--accent2); }
@keyframes ldMark { 0%,100%{opacity:.15;transform:scale(.85)} 50%{opacity:.6;transform:scale(1)} }

/* ━━ 바코드 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ld-barcode {
    position:absolute; z-index:6; color:var(--accent); opacity:0;
    animation:ldFade .5s ease-out .9s both;
}
.ld-barcode svg { display:block; }
.ld-barcode-top { top:30px; left:50%; transform:translateX(-50%); width:120px; height:16px; opacity:.32; }
@media (max-width:600px){ .ld-co,.ld-reticle,.ld-mark,.ld-barcode-top{ display:none; } }

/* ━━ 내부 콘텐츠 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#ld-inner {
    position:relative; z-index:7; display:flex; flex-direction:column; align-items:center;
    padding:60px 84px; text-align:center; max-width:min(900px,92vw); width:calc(100% - 40px);
}
/* 크롭마크 코너 (브라켓 + 틱 + 도트) */
.ld-corner { position:absolute; width:24px; height:24px; opacity:0; animation:ldFade .35s ease-out .15s both; }
.ld-corner::after { content:''; position:absolute; width:3px; height:3px; border-radius:50%; background:var(--accent); box-shadow:0 0 5px var(--accent); }
.ld-tl { top:0; left:0;   border-top:1px solid var(--accent);    border-left:1px solid var(--accent); }
.ld-tr { top:0; right:0;  border-top:1px solid var(--accent);    border-right:1px solid var(--accent); }
.ld-bl { bottom:0; left:0;  border-bottom:1px solid var(--accent); border-left:1px solid var(--accent); }
.ld-br { bottom:0; right:0; border-bottom:1px solid var(--accent); border-right:1px solid var(--accent); }
.ld-tl::after { top:5px;    left:5px; }
.ld-tr::after { top:5px;    right:5px; }
.ld-bl::after { bottom:5px; left:5px; }
.ld-br::after { bottom:5px; right:5px; }

/* 레이블 + 셰브론 */
.ld-eyebrow { display:flex; align-items:center; gap:14px; margin-bottom:24px; opacity:0; animation:ldFadeUp .4s ease-out .3s both; }
.ld-chev { font-family:var(--font-head); font-size:.9rem; letter-spacing:-.05em; color:var(--accent); opacity:.55; }
.ld-label { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.24em; color:var(--accent); white-space:nowrap; }

/* ════════════════════════════════════════════════════════════
   타이틀 글리치 — 레퍼런스 기반 재설계
   적/청 채널 분리(anaglyph) + 가로 슬라이스 datamosh + CRT 글로우
════════════════════════════════════════════════════════════ */
.ld-title {
    position:relative; display:inline-block; white-space:nowrap;
    font-family:var(--font-head); font-size:clamp(3.4rem,13vw,9rem);
    letter-spacing:.16em; line-height:1; margin:0 0 22px;
    color:var(--text); opacity:0;
    animation:ldTitleFade .12s ease-out .12s both, ldHoloFlicker 5s linear 1.4s infinite;
}
@keyframes ldTitleFade { from{opacity:0} to{opacity:1} }
@keyframes ldHoloFlicker {
    0%,86%,100%{opacity:1} 87%{opacity:.72} 88%{opacity:1} 91%{opacity:.86} 92%{opacity:1} 95%{opacity:.93} 96%{opacity:1}
}

/* 본체 — 흰 글자 + 블루 CRT 블룸 */
.ld-title-inner { position:relative; display:inline-block; }
.ld-clean {
    position:relative; display:inline-block; color:#eaf4ff;
    transition:opacity .04s linear;
    text-shadow:
        0 0 14px rgba(0,200,255,.7),
        0 0 30px rgba(40,140,255,.5),
        0 0 64px rgba(40,140,255,.28),
        0 0 110px rgba(40,140,255,.16);
}

/* 적/청 채널 — 평상시 미세 색수차 (정적, screen 합성) */
.ld-title-inner::before, .ld-title-inner::after {
    content:attr(data-text); position:absolute; left:0; top:0; width:100%;
    pointer-events:none; text-shadow:none; mix-blend-mode:screen; opacity:.42;
    transition:transform .05s linear, opacity .05s linear;
}
.ld-title-inner::before { color:#ff0033; transform:translateX(-2px); }
.ld-title-inner::after  { color:#00f0ff; transform:translateX(2px); }
/* 글리치 중 색수차 증폭 */
.ld-title-inner.ld-glitching::before { opacity:.85; transform:translateX(-7px); }
.ld-title-inner.ld-glitching::after  { opacity:.85; transform:translateX(7px); }

/* ── 가로 슬라이스 datamosh 레이어 (JS가 밴드 생성·구동) ── */
.ld-glitch { position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; pointer-events:none; }
.ld-title-inner.ld-glitching .ld-glitch { opacity:1; }
.ld-title-inner.ld-glitching .ld-clean { opacity:.18; }
.ld-slice {
    position:absolute; left:0; top:0; width:100%; white-space:nowrap; color:#eaf4ff;
    will-change:transform; backface-visibility:hidden;
    text-shadow:
        2px 0 rgba(255,0,60,.65),
       -2px 0 rgba(0,224,255,.65),
        0 0 16px rgba(0,200,255,.5);
}

/* ── 캐릭터 디코드 — 스크램블 / 확정 ── */
.ld-ch { display:inline-block; will-change:transform; }
.ld-ch.scrambling {
    color:var(--accent2); opacity:.85;
    text-shadow:0 0 14px rgba(0,200,255,.72);
}
.ld-ch.lock { animation:ldChLock .22s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ldChLock {
    0%   { color:#fff; opacity:.35; transform:translateY(-5px) scaleY(1.3); filter:brightness(2.4); text-shadow:0 0 24px var(--accent2); }
    55%  { color:var(--text); text-shadow:0 0 28px rgba(0,200,255,.7); }
    100% { color:var(--text); opacity:1; transform:none; filter:brightness(1); }
}

/* ── CRT 스캔라인 + 롤링 스캔바 (이미지 3·4) ── */
.ld-title-scan { position:absolute; inset:-14% -4%; pointer-events:none; overflow:hidden; z-index:2; }
.ld-title-scan::before {     /* 촘촘한 스캔라인 */
    content:''; position:absolute; inset:0;
    background:repeating-linear-gradient(0deg,
        rgba(0,0,0,0) 0 1px,
        rgba(4,8,16,.55) 1px 2px);
    mix-blend-mode:multiply; opacity:.7;
    animation:ldScanRoll 6s linear infinite;
}
@keyframes ldScanRoll { from{transform:translateY(0)} to{transform:translateY(6px)} }
.ld-title-scan::after {      /* 밝은 롤링 스캔바 */
    content:''; position:absolute; left:0; right:0; height:30%;
    background:linear-gradient(180deg, transparent, rgba(120,220,255,.16) 50%, transparent);
    mix-blend-mode:screen;
    animation:ldScanBar 3.4s linear 1.4s infinite;
}
@keyframes ldScanBar {
    0%{top:-32%;opacity:0} 8%{opacity:1} 92%{opacity:.7} 100%{top:104%;opacity:0}
}

.ld-tagline { font-family:var(--font-cond); font-size:.95rem; letter-spacing:.07em; color:var(--text-sub); margin:0 0 28px; opacity:0; animation:ldFadeUp .4s ease-out .6s both; }

/* 구분선 — 양끝 노드 포함 */
.ld-divider { position:relative; height:1px; background:var(--line-hi); margin-bottom:32px; align-self:stretch; transform-origin:center; opacity:0; animation:ldDivider .5s ease-out .8s both; }
.ld-divider::before, .ld-divider::after { content:''; position:absolute; top:50%; transform:translateY(-50%); width:4px; height:4px; border-radius:50%; background:var(--accent); box-shadow:0 0 5px var(--accent); }
.ld-divider::before { left:-1px; } .ld-divider::after { right:-1px; }
@keyframes ldDivider { from{opacity:0;transform:scaleX(0)} to{opacity:1;transform:scaleX(1)} }


.ld-hint { margin-top:20px; font-family:var(--font-mono); font-size:.58rem; letter-spacing:.14em; color:var(--text-sub); opacity:0; animation:ldFadeUp .4s ease-out .95s both, ldHintPulse 2.6s ease-in-out 1.6s infinite; }
@keyframes ldHintPulse { 0%,100%{color:var(--text-dim)} 50%{color:var(--accent)} }

/* ━━ 공통 / 퇴장 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes ldFade   { from{opacity:0} to{opacity:1} }
@keyframes ldFadeUp { from{opacity:0;transform:translateY(9px)} to{opacity:1;transform:none} }
#landing-overlay.ld-exit { animation:ldOut .52s cubic-bezier(.4,0,.2,1) both; pointer-events:none; }
@keyframes ldOut { 0%{opacity:1;transform:scale(1);filter:blur(0)} 100%{opacity:0;transform:scale(1.05);filter:blur(3px)} }


@media (max-width:480px) {
    #ld-inner   { padding:44px 28px; }
    .ld-title   { margin-bottom:16px; }
    .ld-tagline { margin-bottom:22px; }
    .ld-divider { margin-bottom:26px; }
    .ld-corner  { width:18px; height:18px; }
}

/* ━━ 라이트 모드 보정 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   다크: 네온 홀로그램 / 라이트: 차분한 블루프린트 톤 (효과 유지하되 약하게)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-theme="light"] #landing-overlay::before {
    background-image:
        linear-gradient(rgba(0,85,229,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,85,229,.05) 1px, transparent 1px);
}
[data-theme="light"] #landing-overlay::after {
    background:radial-gradient(ellipse 64% 64% at 50% 50%, transparent 18%, rgba(206,216,232,.62) 100%);
}
[data-theme="light"] .ld-grain { mix-blend-mode:multiply; opacity:.02; }

/* 타이틀 — 라이트에선 진한 글자 + 절제된 블루 글로우 */
[data-theme="light"] .ld-clean {
    color:var(--text);
    text-shadow:
        0 0 10px rgba(0,85,229,.3),
        0 0 26px rgba(0,85,229,.16);
}
[data-theme="light"] .ld-slice {
    color:var(--text);
    text-shadow:
        1.5px 0 rgba(224,0,42,.55),
       -1.5px 0 rgba(0,144,184,.6),
        0 0 12px rgba(0,85,229,.25);
}
/* 라이트: screen은 흰 배경에서 안 보이므로 multiply + 진한 채널색 */
[data-theme="light"] .ld-title-inner::before { color:#e0002a; mix-blend-mode:multiply; }
[data-theme="light"] .ld-title-inner::after  { color:#0090b8; mix-blend-mode:multiply; }
[data-theme="light"] .ld-title-scan::before { opacity:.32; }
[data-theme="light"] .ld-title-scan::after  { display:none; }
/* 스캔라인 banding 약하게 */
[data-theme="light"] .ld-title-scan::before { opacity:.16; }
/* 레이저 스윕 — 흰 배경에선 블루 톤 multiply로 보이게 */
[data-theme="light"] .ld-title-scan::after {
    background:linear-gradient(105deg, transparent, rgba(0,90,230,.22), transparent);
    mix-blend-mode:multiply; filter:blur(2px);
}