/* =========================================================
   CARAMEL LOUNGE — logo intro (index.html 전용)
   떼어내려면: index.html의 <!-- INTRO START/END --> 블록 2곳 삭제
   + 이 파일과 assets/intro.js 삭제.
   ========================================================= */

/* --- 타이밍 조절은 여기서 -------------------------------- */
:root {
  --intro-lead:   .4s;   /* 첫 줄(CARAMEL)이 뜬 뒤 둘째 줄이 열리기까지 */
  --intro-reveal: 1.2s;   /* 둘째 줄(LOUNGE) 마스크 reveal 길이 */
  --intro-hold:   1.4s;   /* 다 보인 상태로 유지 */
  --intro-exit:   .8s;    /* 오버레이가 위로 걷히는 시간 */
  --intro-ease:   cubic-bezier(.19, 1, .22, 1);
}

#intro { display: none; }

html.intro-on body { overflow: hidden; }

html.intro-on #intro {
  display: block;
  position: fixed; inset: 0; z-index: 10000;
  background: var(--white, #fff);
  overflow: hidden;
  cursor: pointer;
  animation: intro-exit var(--intro-exit) cubic-bezier(.76, 0, .24, 1) forwards;
  animation-delay: calc(var(--intro-lead) + var(--intro-reveal) + var(--intro-hold));
}

/* 상단 헤어라인 + 캡션 */
#intro .intro-line {
  position: absolute; top: 56px; left: var(--pad, 48px); right: var(--pad, 48px);
  height: 1px; background: var(--ink, #141414);
  transform: scaleX(0); transform-origin: left;
  animation: intro-line calc(var(--intro-lead) + var(--intro-reveal) + .2s) var(--intro-ease) forwards;
}
#intro .intro-cap {
  position: absolute; top: 28px;
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gray, #8a8a86);
  opacity: 0;
  animation: intro-fade .6s ease forwards;
  animation-delay: calc(var(--intro-lead) + .2s);
}
#intro .intro-cap.l { left: var(--pad, 48px); }
#intro .intro-cap.r { right: var(--pad, 48px); }

/* 로고 타이포 — 기존 .logo-type과 같은 폰트/굵기 */
#intro .intro-logo {
  position: absolute; left: 0; right: 0; bottom: 2vw;
  font-family: var(--sans);
  letter-spacing: -0.045em;
  line-height: .82;
  white-space: nowrap;
  text-align: center;
  color: var(--ink, #141414);
}
#intro .intro-logo b,
#intro .intro-logo span { display: block; }
#intro .intro-logo b {
  font-weight: 700; font-size: 19vw;
  opacity: 0;
  animation: intro-fade .35s ease forwards;
}
#intro .intro-logo span {
  font-weight: 700; font-size: 22.5vw;
  margin: 0 -10vw;
  clip-path: inset(0 100% 0 0);
  animation: intro-reveal var(--intro-reveal) var(--intro-ease) forwards;
  animation-delay: var(--intro-lead);
}

/* 클릭 시 건너뛰기 */
html.intro-on #intro.is-skip {
  animation: intro-exit .5s cubic-bezier(.76, 0, .24, 1) forwards;
}

@keyframes intro-reveal { to { clip-path: inset(0 0 0 0); } }
@keyframes intro-line   { to { transform: scaleX(1); } }
@keyframes intro-fade   { to { opacity: 1; } }
@keyframes intro-exit   { to { transform: translateY(-100%); } }

/* --- 인트로가 걷힐 때 기존 첫 화면이 살짝 올라오며 등장 --- */
html.intro-on .landing > * { opacity: 0; transform: translateY(24px); }
html.intro-out .landing > * {
  opacity: 1; transform: none;
  transition: opacity .9s ease, transform 1.1s var(--intro-ease);
}
html.intro-out .landing > :nth-child(2) { transition-delay: .12s; }
html.intro-out .landing > :nth-child(3) { transition-delay: .24s; }

@media (max-width: 760px) {
  #intro .intro-line { top: 48px; }
  #intro .intro-cap { top: 22px; font-size: 10px; }
  #intro .intro-cap.r { display: none; }
  #intro .intro-logo { bottom: 18vh; }
}