/* 인트로 4컷 — 전체화면. 자막은 mp4 가 아니라 여기서 얹는다 (INV-3). */

/* .screen 의 기본 패딩·스크롤을 걷어낸다. 인트로는 종이 한 장이다. */
#app:has(.intro-screen) { padding-top: 0; }
.intro-screen { padding: 0 !important; overflow: hidden !important; background: #FFFDF8; }

.intro { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }

.intro-stage {
  position: relative; flex: 1; min-height: 0; overflow: hidden; background: #FFFDF8;
  display: flex; align-items: center; justify-content: center;
}


.intro-vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* 9:20 으로 구워 위아래 띠를 그 프레임의 종이로 채워 뒀다 (scripts/build-intro.sh).
     그래서 cover 로 깔아도 잘리는 건 종이 띠뿐이고, 배경색이 어긋날 일이 없다.
     예전엔 contain + 종이색 배경이었는데 컷마다 종이 톤이 달라 띠가 눈에 띄었다. */
  object-fit: cover; background: #EDEDEA;
}
.intro-stage.done .intro-vid { opacity: 0; }

/* 자막 층 — 컷마다 줄이 쌓인다. 영상 상단 1/3 은 빈 종이로 뽑아 뒀다. */
.intro-caps { position: absolute; inset: 0; pointer-events: none; }

.intro-cap {
  position: absolute; left: 8%; right: 8%; top: 5%;
  font-family: var(--font-hand); font-size: clamp(26px, 8.2vw, 44px); line-height: 1.24;
  color: var(--ink); text-align: center; text-wrap: balance; word-break: keep-all;
  opacity: 0; transform: translateY(10px) rotate(-1.4deg);
  transition: opacity .28s ease, transform .28s cubic-bezier(.2,1.3,.4,1);
  /* 그림과 겹쳐도 글자가 읽히도록 종이색을 부드럽게 깐다. 테두리 있는 상자를 쓰면
     크레용 그림 위에 UI 가 얹힌 티가 나서, 가장자리를 흘려 보낸다. */
  background: radial-gradient(ellipse 62% 58% at 50% 50%,
    rgba(255,253,246,.96) 0, rgba(255,253,246,.9) 58%, rgba(255,253,246,0) 100%);
  padding: 14px 4px 18px;
}
.intro-cap.in { opacity: 1; transform: translateY(0) rotate(-1.4deg); }

.intro-cap.at-mid { top: 42%; }
/* 공룡 머리가 위를 다 먹는 컷 — 발밑 빈 종이로 내린다.
   두 줄이 연달아 나오는 6컷은 위/아래로 나눠 놓지 않으면 포개진다. */
.intro-cap.at-bottom { top: auto; bottom: 3%; }
.intro-cap.at-bottomhi { top: auto; bottom: 15%; }

/* 마지막 두 마디는 **엇갈려 겹친다** (대표 지시 2026-08-12).
   흰 상자를 깔지 않는다 — 대신 글자에 종이색 외곽선을 둘러 그림 위에서도 읽히게 한다.
   상자는 그림을 덮지만 외곽선은 글자에만 붙는다. */
.intro-cap.at-cross1,
.intro-cap.at-cross2 {
  background: none; padding: 0;
  -webkit-text-stroke: 7px var(--paper);
  paint-order: stroke fill;          /* 획을 먼저 칠해야 글자가 잡아먹히지 않는다 */
  text-wrap: initial;
}
/* 첫 마디는 왼쪽으로 기울고, 두 번째 마디는 오른쪽으로 기울며 그 위로 파고든다.
   세로로 겹치게 두는 게 핵심 — 나란히 쌓으면 그냥 두 줄이지 엇갈린 게 아니다. */
.intro-cap.at-cross1 {
  top: auto; bottom: 21%; left: 1%; right: 8%;
  font-size: clamp(29px, 8.8vw, 50px); line-height: 1.1;
  transform: translateY(10px) rotate(-9deg);
}
.intro-cap.at-cross1.in { transform: translateY(0) rotate(-9deg); }

.intro-cap.at-cross2 {
  top: auto; bottom: 13%; left: 24%; right: 1%;
  font-size: clamp(42px, 14vw, 72px); color: var(--cray-red);
  -webkit-text-stroke-width: 9px;
  transform: translateY(10px) rotate(12deg);
  animation: shout-shake .5s ease-out;
}
.intro-cap.at-cross2.in { transform: translateY(0) rotate(12deg); }

@keyframes shout-shake {
  0%   { transform: translateY(0) rotate(12deg) scale(.78); }
  45%  { transform: translateY(0) rotate(17deg) scale(1.10); }
  75%  { transform: translateY(0) rotate(10deg) scale(.98); }
  100% { transform: translateY(0) rotate(12deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .intro-cap.at-cross2 { animation: none; } }

/* 말풍선은 **앱이 그린다**. 영상에 그리게 하면 모델이 크기를 제멋대로 잡아
   대사가 풍선 밖으로 나간다(2026-08-12 실제로 두 번 그랬다). 여기서 그리면
   풍선이 글자 크기를 따라가므로 넘칠 수가 없다. 디자인 시스템의 .bubble 을 그대로 쓴다. */
.intro-cap.in-bubble {
  top: 7%; left: 7%; right: 7%;
  transform: translateY(10px) rotate(-2.2deg);
  background: #fff; border:1.5px solid var(--edge);
  border-radius: 8px 28px 24px 22px;
  box-shadow: 0 6px 20px rgba(58,52,46,.13);
  padding: 16px 18px 18px;
}
.intro-cap.in-bubble.in { transform: translateY(0) rotate(-2.2deg); }
/* 꼬리 — 말하는 사람(왼쪽 여친) 쪽으로 내린다. 테두리 위에 흰 삼각형을 겹쳐 선을 지운다. */
.intro-cap.in-bubble::before,
.intro-cap.in-bubble::after {
  content: ""; position: absolute; top: 100%; left: 20%;
  border: 15px solid transparent; border-top-color: var(--ink); border-bottom: 0;
}
.intro-cap.in-bubble::after {
  border-top-color: #fff; margin-top: -4px; border-width: 13px;
}
/* 받아치는 두 번째 줄 — 앞 대사를 지우지 않고 붙는다.
   1컷에서는 남친의 건성 대답이라 말풍선 아래 오른쪽(남친 쪽)에 놓는다. */
.intro-cap.small {
  font-size: clamp(17px, 4.8vw, 25px); color: var(--sub);
  top: 28%; left: auto; right: 10%; text-align: right;
  background: none; padding: 0;
}

/* 마지막 카드 */
.intro-end {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3); padding: var(--sp-5) var(--sp-4)
    calc(var(--sp-5) + env(safe-area-inset-bottom));
  background: #FFFDF8;
  opacity: 0; visibility: hidden; transition: opacity .4s ease;
}
.intro-end.show { opacity: 1; visibility: visible; }
/* 로고는 카톡 대화 키비주얼이라(대표 확정) 크게 키우면 안쪽 글자가 잡음이 된다.
   배지 크기로 두고 문구가 화면을 끌게 한다. 홈·로그인과 같은 자산·같은 기울기. */
.intro-logo { width: min(44%, 176px); border-radius: 18px; transform: rotate(-2deg); }
.intro-tag {
  font-family: var(--font-hand); font-size: 27px; color: var(--ink);
  margin-bottom: var(--sp-2); text-align: center;
}
.intro-end .btn { min-width: 200px; }

/* 오프닝 카드 — 소리를 열기 위한 탭 한 번. 밋밋하던 스플래시 역할도 겸한다. */
.intro-gate {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3); padding: var(--sp-5) var(--sp-4);
  background: var(--paper);
  transition: opacity .45s ease;
}
.intro-gate.gone { opacity: 0; pointer-events: none; }
.intro-gate-sub {
  font-family: var(--font-hand); font-size: 26px; color: var(--ink);
  text-align: center; margin-bottom: var(--sp-2);
}
.intro-gate .btn { min-width: 200px; }
.intro-gate-hint { font-size: 12.5px; color: var(--sub); font-weight: 600; }

/* 진행 막대 — 얼마나 남았는지만 알려 준다. 컷이 하나라 점으로 나눌 게 없다. */
.intro-bar {
  position: absolute; left: 16px; right: 16px; z-index: 3;
  bottom: calc(14px + env(safe-area-inset-bottom));
  height: 5px; border-radius: 999px; background: rgba(58,52,46,.18);
  overflow: hidden; pointer-events: none;
}
.intro-bar i { display: block; height: 100%; width: 0;
  background: var(--cray-blue); border-radius: 999px; }

.intro-skip {
  position: absolute; z-index: 3;
  top: calc(10px + env(safe-area-inset-top)); right: 12px;
  min-height: 36px; padding: 6px 14px;
  border: 0; border-radius: var(--radius-pill);
  background: rgba(255,253,246,.86); color: var(--sub);
  font-family: var(--font-body); font-size: 13.5px; font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .intro-cap, .intro-vid, .intro-end { transition-duration: .01ms; }
}