/* 첫 방문 오프닝 「한 줄로 잇다」의 영상 무대·문구·건너뛰기 버튼과 `오프닝 보기` 버튼을 담당한다. */

/* ── 재생 대기·재생 중: 본문을 가린다. inert 잠금은 intro.js가 따로 소유한다. ── */
html[data-intro] body>:not(.intro-overlay){visibility:hidden}
/* intro.js와 영상이 도착하기 전의 첫 프레임. 영상 첫 장면(포스터)과 같은 그림이라 인계가 보이지 않는다. */
html[data-intro='pending'] body::before{
  content:'';position:fixed;inset:0;z-index:1000;
  background:#e9ecef url('../video/intro-collab-v3-start.jpg') center / cover no-repeat;
}

/* ── 오버레이와 영상 ── */
.intro-overlay{position:fixed;inset:0;z-index:1000;overflow:hidden;background:#e9ecef;color:var(--ink);contain:layout paint}
.intro-overlay.is-leaving,.intro-overlay.is-revealing{pointer-events:none}
/* 인계 교차 페이드 중에는 문구·버튼을 먼저 걷어 영상의 ∞와 본문 배경만 겹친다. */
.intro-overlay.is-revealing .intro-copy,.intro-overlay.is-revealing .intro-skip{opacity:0;transition:opacity .3s}
.intro-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background:#e9ecef url('../video/intro-collab-v3-start.jpg') center / cover no-repeat;
}

/* ── 문구: 영상의 왼쪽 밝은 여백에 둔다(마지막 ∞는 오른쪽). ── */
.intro-copy{
  position:absolute;left:max(24px,6.5vw);bottom:max(104px,13vh);z-index:1;
  width:min(46vw,760px);pointer-events:none;
}
/* 영상 속 창·기둥 위에서도 글자 대비를 유지하도록 글자 바로 뒤에만 약한 빛을 깐다.
   넓고 진한 흰 막은 영상을 뿌옇게 만들어 화질이 떨어져 보이므로, 범위·농도를 줄이고 글자 윤곽 빛으로 보완한다. */
.intro-copy::before{
  content:'';position:absolute;inset:-14% -10% -16% -14%;z-index:-1;
  background:radial-gradient(closest-side,#f6f8fb8c 0%,#f4f7fb4d 55%,transparent 100%);
}
.intro-headline,.intro-name,.intro-caption{text-shadow:0 0 2px #ffffffcc,0 0 16px #ffffffb3}
.intro-captions{display:grid;margin-bottom:clamp(10px,1.4vh,18px)}
.intro-caption{
  grid-area:1 / 1;display:flex;align-items:center;gap:12px;visibility:hidden;
  color:var(--blue);font-size:clamp(.75rem,.85vw,.9375rem);font-weight:650;letter-spacing:.04em;white-space:nowrap;
}
.intro-caption::before{content:'';width:28px;height:2px;border-radius:1px;background:currentcolor}
.intro-headline{display:grid;font-size:clamp(1.5rem,3.9vw,4.5rem);font-weight:800;line-height:1.16;letter-spacing:-.045em}
/* 줄마다 마스크를 둬 글자가 아래에서 솟아오르는 인상을 만든다. 아래 여백은 받침 글자가 잘리지 않게 한다. */
.intro-line{display:block;overflow:hidden;padding-bottom:.08em;white-space:nowrap}
.intro-word{display:inline-block}
.intro-word.is-accent{color:var(--blue)}
.intro-char{display:inline-block;visibility:hidden}
.intro-name{position:absolute;left:0;bottom:0;display:flex;flex-direction:column}
.intro-name-en,.intro-role,.intro-name-ko .intro-char{visibility:hidden}
.intro-name-en{color:var(--blue);font-size:clamp(.8125rem,1.05vw,1.25rem);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.intro-name-ko{display:block;overflow:hidden;font-size:clamp(2.75rem,6.4vw,7rem);font-weight:800;line-height:1.1;letter-spacing:-.05em;padding-bottom:.06em}
.intro-role{color:var(--muted);font-size:clamp(.9375rem,1.25vw,1.5rem);font-weight:550;margin-top:.35em}

/* ── 건너뛰기: 처음부터 끝까지 같은 자리. 최소 44px 조작 영역과 안전 영역을 지킨다. ── */
.intro-skip{
  position:absolute;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:2;
  display:inline-flex;align-items:center;gap:10px;min-width:44px;min-height:44px;padding:10px 16px 12px;overflow:hidden;
  border:1px solid #ffffffd0;border-radius:999px;background:#ffffffe6;box-shadow:0 10px 28px -18px #0b1f5566;
  color:var(--ink);font-size:.875rem;font-weight:650;white-space:nowrap;
  transition:background .2s,transform .2s;
}
/* 좁은 화면에서도 `건너뛰기`가 한 줄로 유지되도록 글자 영역이 줄어들지 않게 한다. */
.intro-skip-label{flex:0 0 auto}
.intro-skip:hover{background:#fff;transform:translateY(-1px)}
.intro-skip:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.intro-skip-key{padding:1px 6px;border:1px solid #c6d3e8;border-radius:5px;color:var(--muted);font:inherit;font-size:.6875rem;font-weight:600}
.intro-skip-progress{position:absolute;left:16px;right:16px;bottom:6px;height:2px;border-radius:1px;background:var(--blue);transform:scaleX(0);transform-origin:left;opacity:.7}

/* ── `오프닝 보기`: 덱 컨트롤 줄의 조용한 텍스트 버튼. 모션 감소 사용자의 직접 재생 경로다. ── */
.intro-replay{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:0;border-radius:999px;
  background:transparent;color:var(--muted);font-size:.8125rem;font-weight:600;white-space:nowrap;transition:color .2s,background .2s;
}
.intro-replay .icon{width:14px;height:14px;fill:currentcolor;stroke:none}
.intro-replay:hover{color:var(--blue);background:#ffffff80}

/* ── 세로 화면: 영상을 ∞ 쪽(오른쪽)으로 잘라 보이고 문구는 아래에 가로 전체로 둔다. ── */
@media(max-aspect-ratio:9/10){
  /* 가상 카메라: 영상은 원본 16:9 비율의 310vw 크기로 고정하고, intro.js가 영상 시간에 따라
     transform(translate + scale)만 바꿔 확대(도입 200vw 상당 → ∞ 310vw)와 좌우 팬을 만든다.
     레이아웃 속성을 매 프레임 바꾸지 않아 합성 단계에서만 처리되므로 재생이 끊기지 않는다.
     위·아래 가장자리는 배경색으로 흐려 검은 여백 없이 문구 영역으로 이어진다. */
  .intro-video{
    inset:auto;top:0;left:0;width:310vw;height:174.375vw;object-fit:fill;
    transform-origin:0 0;transform:translate3d(-60vw,0,0) scale(.645);will-change:transform;
    mask-image:linear-gradient(transparent,#000 7%,#000 76%,transparent);
  }
  .intro-copy{left:24px;right:24px;width:auto;bottom:max(92px,11vh)}
  .intro-headline{font-size:clamp(1.5rem,7.2vw,3rem)}
  .intro-caption{font-size:.75rem;white-space:normal}
  .intro-name-ko{font-size:clamp(2.75rem,13vw,5rem)}
  .intro-skip-key{display:none}
}

/* 낮은 가로 화면(휴대폰 가로 등)에서는 문구를 줄인다. */
@media(max-height:560px) and (min-aspect-ratio:9/10){
  .intro-copy{bottom:max(76px,10vh)}
  .intro-headline{font-size:clamp(1.25rem,3vw,2rem)}
  .intro-name-ko{font-size:clamp(2rem,5vw,3rem)}
}

/* 좁은 화면에서는 덱 컨트롤 공간이 좁아 아이콘만 남긴다(보조기기 이름은 aria-label로 유지). */
@media(max-width:600px){
  .intro-replay span{display:none}
  .intro-replay{width:44px;justify-content:center;padding:0}
}