/* 로그인 진입 인트로 — 전체를 덮는 불투명 오버레이(마크 영상) + 인트로가 끝난 뒤 로그인 화면이 떠오르는 페이드.
 * 재생·연출은 /ui/intro/ 가, 에셋은 /assets/intro-mark.mp4 · intro-sting.mp3 가 소유한다. 여기는 레이어와 전환만.
 *
 * ⚠️ 이 파일은 glass.css 보다 뒤에 링크되어야 한다 — `.signin-gate--login`(0,1,0)이 glass.css 의
 *    `.signin-gate { animation: rise }`(0,1,0)와 특이도가 같아 순서로만 이긴다.
 * ⚠️ 게이트 등장은 **opacity 만** 움직인다(rise 의 translateY 를 쓰지 않는다). 인트로가 걷히는 동안
 *    로그인 화면이 이미 떠 있어 둘이 겹치는데, 거기서 게이트가 8px 떠오르면 두 마크가 서로 어긋나
 *    미끄러지는 것처럼 보인다. */

.signin-intro {
  position: fixed;
  inset: 0;
  z-index: 5000; /* 앱 CSS 의 최대 z-index 는 4000(hovertip 3700 · 검색 팔레트 3200) */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 🔴 **클릭을 삼킨다.** 건너뛰기가 있던 시절에는 `none` 으로 두고 window 리스너가 받았는데, 그때는
     클릭이 밑의 화면으로도 그대로 통과해 보이지도 않는 요소를 눌렀다. 2026-09-18 오너 결정
     *"클릭이 아예 안 먹혀야 할 것 같아"* — 여기서 멈춘다. 오버레이는 finish() 가 반드시 치운다. */
  pointer-events: auto;
  background: #000; /* 순수 검정 — 영상의 검정과 같아야 상자가 안 보인다(오너 지시 '아무것도 없는 화면') */

}

/* ⚠️ 크기·회전·흐림은 JS 가 매 프레임 인라인으로 준다(introTimeline). 여기서 transform 을 잡으면 덮인다.
 *    transform-origin 이 중심이어야 제자리에서 작아진다 — 기본값이지만 명시해 둔다.
 * ⚠️ 퇴장에서 전체 화면 영상이 회전하면 사각형 모서리가 화면 안으로 들어온다. 그 모서리가 안 보이는 조건은
 *    영상 배경이 완전한 0 일 것(build-intro-video.sh 의 블랙 크러시 + 모서리 검사) · 오버레이가 순수 검정일 것. */
.signin-intro-video {
  /* 가로 16:9 영상을 **화면 전체**에 깐다. 정사각을 가운데 두던 판은 옆에서 날아오는 경로가 잘렸다(오너 지적).
     cover 라 세로 화면에서는 좌우가 조금 잘리지만 로고는 가운데에 있어 안전하다. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: 50% 50%;
  /* ⚠️ mix-blend-mode 를 두지 않는다 — 전체 화면 영상에 블렌드 모드를 걸면 브라우저가 영상을 하드웨어 레이어로
     못 올리고 매 프레임 합성해 **끊겼다**(오너 지적). 정사각을 가운데 둘 때는 상자를 지우려 필요했지만, 지금은
     영상이 화면 전체를 덮고 배경이 순수 검정이라 지울 상자가 없다. */
  will-change: transform, filter;
}

/* ★ 로고 락업 + 슬로건(2026-09-18 — 마크가 사라진 뒤 한 박자 두고 떠오른다).
 *   ⚠️ 불투명도·떠오름은 JS 가 매 프레임 인라인으로 준다(introTimeline.stageAt 의 tagOpacity·tagRise).
 *      여기서 opacity/transform 을 잡으면 덮인다 — 영상과 같은 규약이다.
 *   ⚠️ 심볼은 glass.css 의 `.brand-mark` 를 재사용하지 않는다. 저쪽은 셸의 레이아웃(크기·정렬)을 함께
 *      들고 있어 전체 화면 연출에 끌려 들어온다 — 같은 마스크만 여기서 다시 선언한다.
 *   ⚠️ 초기값 opacity:0 이 필요하다. 첫 rAF 전 한 프레임 동안 슬로건이 마크 위에 겹쳐 번쩍인다. */
.signin-intro-tagline {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  opacity: 0;
  will-change: opacity, transform;
}

/* ⚠️ 셸의 가로 락업(심볼 옆 워드마크)과 **배치가 다르다** — 여기서는 심볼이 AIDRA **위**에 선다
 *    (2026-09-18 오너: *"심볼 로고는 AIDRA 위에 그려줘"*). 전체 화면 연출이라 세로로 쌓아야 가운데
 *    축이 하나로 모이고, 마크가 사라진 자리를 그대로 이어받는다. glass.css 를 따라가지 말 것. */
.signin-intro-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.30em;
  font-family: var(--font-heading);
  font-weight: 600;
  /* 화면 폭을 따라간다 — 세로 화면에서도 두 줄이 되지 않을 만큼만 크게. */
  font-size: clamp(38px, 4.8vw, 92px);
  letter-spacing: 0.011em;
  line-height: 1;
  color: var(--ink);
}

.signin-intro-mark {
  flex: none;
  width: 1.12em; height: 1.12em;   /* 워드마크보다 조금 크게 — 위에 서면 같은 크기가 작아 보인다 */
  background: currentColor;
  -webkit-mask: url("/assets/aidra-mark.svg") center / contain no-repeat;
  mask: url("/assets/aidra-mark.svg") center / contain no-repeat;
}

.signin-intro-slogan {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(15px, 1.56vw, 30px);
  letter-spacing: 0.007em;
  color: var(--ink-80);
}

/* ★ 스플래시 대기 가림막(2026-09-16 — 스플래시가 로그인 화면에서 홈 랜딩으로 옮겨왔다).
 *   app.js 가 인증 진입 **첫 줄**에서 intro-pending 을 붙이면, 역할 확인·홈 적재·영상 다운로드 동안 사이드바·홈이
 *   그려져도 보이지 않는다. 스플래시 오버레이(z 5000)가 뜨면 그 아래 깔리고, 로그인 화면 대신 홈이 드러나는
 *   reveal 순간 pending 이 떨어지며 함께 걷힌다 — 그때 스플래시는 이미 페이드 중이라 홈이 그 밑에서 크로스페이드된다.
 *   ⚠️ #000 이어야 한다 — 스플래시 오버레이·영상 배경과 같은 색이 아니면 오버레이가 뜨는 순간 명도가 튄다. */
body.intro-pending::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 4999;
  background: #000;
  pointer-events: none;
}

.signin-gate--login {
  animation: signin-fade 620ms var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1)) both;
}

@keyframes signin-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .signin-gate--login { animation: none; opacity: 1; }
}