/* 첫 접속 인트로 — 단색 배경 위에 이름·선·큰 제목·두 줄 문구, 아래에 그림.
   맛집 포트폴리오(sein)의 모바일 인트로와 같은 방식. 마크업과 동작은 js/intro.js 참고. */
.intro {
  position: fixed; inset: 0; z-index: 100; overflow: hidden;
  color: #fff; text-align: center; background: var(--intro-bg, #3a2a21);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", sans-serif;
}
.intro[hidden] { display: none; }
html.intro-open { overflow: hidden; }

.intro-art {
  position: absolute; left: 50%; bottom: 0;
  height: max(150vw, 86svh); width: auto; max-width: none;
  transform: translateX(-50%); transform-origin: 50% 100%;
  /* 그림 위 끝이 배경색으로 스며들게 */
  -webkit-mask-image: linear-gradient(transparent, #000 12%);
  mask-image: linear-gradient(transparent, #000 12%);
}
.intro-text {
  position: absolute; left: 16px; right: 16px;
  top: calc(env(safe-area-inset-top) + 9svh);
  display: flex; flex-direction: column; align-items: center;
  text-shadow: 0 1px 10px rgba(40, 24, 14, .3);
}
.intro-host { margin: 0; font-size: 13px; letter-spacing: .28em; }
.intro-line {
  width: 150px; height: 1px; margin: 18px 0 22px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
}
.intro-title {
  margin: 0; font-family: 'Jua', sans-serif; font-weight: 400;
  font-size: clamp(44px, 14vw, 64px); line-height: 1.12; white-space: pre-line;
}
.intro-copy { margin: 3svh 0 0; font-size: 15px; line-height: 1.55; word-break: keep-all; }
.intro-copy b, .intro-copy span { display: block; }
.intro-copy b { font-size: 17px; font-weight: 700; }
.intro-small { margin: 1.4svh 0 0; font-size: 12px; letter-spacing: .22em; opacity: .85; }
.intro-skip {
  position: absolute; top: calc(env(safe-area-inset-top) + 10px); right: 12px;
  min-width: 44px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 99px;
  background: rgba(0, 0, 0, .22); color: inherit; font: inherit; font-size: 13px; cursor: pointer;
}
.intro-skip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* 하늘이 밝은 그림 (크림색 배경): 글자를 짙은 갈색으로 */
.intro-dark { color: #3a2a21; }
.intro-dark .intro-text { text-shadow: 0 1px 10px rgba(255, 255, 255, .5); }
.intro-dark .intro-host, .intro-dark .intro-small { color: #7a4f2c; }
.intro-dark .intro-line { background: linear-gradient(90deg, transparent, rgba(58, 42, 33, .55), transparent); }
.intro-dark .intro-skip { background: rgba(58, 42, 33, .1); }
.intro-dark .intro-skip:focus-visible { outline-color: #3a2a21; }

/* 명조 글꼴 (홈페이지·맛집 안내 인트로): 제목·문구는 고운바탕, 영문은 Cormorant Garamond */
.intro-serif .intro-title, .intro-serif .intro-copy { font-family: 'Gowun Batang', "Nanum Myeongjo", "AppleMyungjo", serif; }
.intro-serif .intro-title { font-weight: 700; font-size: clamp(38px, 12vw, 56px); line-height: 1.28; letter-spacing: -.01em; }
.intro-serif .intro-host, .intro-serif .intro-small { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; }
.intro-serif .intro-host { font-size: 16px; }
.intro-serif .intro-small { font-size: 14px; }

/* 그림과 글꼴이 준비되기 전에는 글자와 그림을 숨겨 둔다 (배경색만 보인다) */
.intro:not(.intro-run) .intro-art,
.intro:not(.intro-run) .intro-text > * { opacity: 0; }

.intro-run .intro-art { animation: intro-zoom 4.2s ease-out both; }
.intro-run .intro-host { animation: intro-up .7s ease-out .2s both; }
.intro-run .intro-line { animation: intro-line .7s ease-out .5s both; }
.intro-run .intro-title { animation: intro-blur-in .9s ease-out .7s both; }
.intro-run .intro-copy { animation: intro-up .7s ease-out 1.3s both; }
.intro-run .intro-small { animation: intro-up .7s ease-out 1.6s both; }
.intro-leave { animation: intro-out .5s ease-in forwards; }

@keyframes intro-up { from { opacity: 0; transform: translateY(10px); } }
@keyframes intro-blur-in { from { opacity: 0; filter: blur(10px); transform: translateY(12px) scale(1.04); } }
@keyframes intro-line { from { opacity: 0; transform: scaleX(0); } }
@keyframes intro-zoom { from { opacity: 0; transform: translateX(-50%) scale(1.08); } 18% { opacity: 1; } }
@keyframes intro-out { to { opacity: 0; transform: scale(1.03); } }

/* 넓은 화면: 그림을 가운데 두고 양옆도 배경색으로 스며들게 */
@media (min-width: 768px) {
  .intro-art {
    height: 78svh;
    -webkit-mask-image: linear-gradient(transparent, #000 14%), linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
    mask-image: linear-gradient(transparent, #000 14%), linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .intro-text { top: 7svh; }
  .intro-title { font-size: 60px; }
  .intro-serif .intro-title { font-size: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-run *, .intro-leave { animation: none !important; }
}