/* 소담만세력 모바일 인트로 화면
   - 홈 아이콘(PWA)으로 열 때 세션당 1회 표시
   - 컨셉: 먹이 번지고 → 형태가 잡히고 → 글이 놓인다 (붓질 순서)
   - opacity/transform 위주로 GPU 가속. 배경 이미지는 로드된 뒤에만 페이드인(로딩을 막지 않음) */

.sodam-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483600;           /* 공용 로딩 모달(2147483000)보다 위 */
  background: #f7f1e8;           /* 이미지 없어도 즉시 크림색으로 시작 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;               /* 탭하면 건너뛰기 */
  -webkit-tap-highlight-color: transparent;
}
.sodam-intro.is-out {
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
}

/* ── 배경(수묵) : 로드 완료 후에만 서서히 드러남 ── */
.sodam-intro-bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.04);
}
.sodam-intro.bg-ready .sodam-intro-bg {
  animation: sodamIntroBg 1450ms cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes sodamIntroBg {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── 가운데 묶음 ── */
.sodam-intro-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
  transform: translateY(-4%);    /* 배경 여백의 시각적 중심에 맞춤 */
}

/* ── 로고 : 먹이 번지다 또렷해지는 느낌 ── */
.sodam-intro-logo {
  position: relative;
  width: 168px;
  height: 168px;
  opacity: 0;
  /* 🔴 글귀(.sodam-intro-copy--1)와 **같은 350ms**. 로고가 혼자 먼저 뜨지 않게 맞춘 값이다.
     사장님: "텍스트 페이드인해서 들어올 때 로고도 같이 뜨는 게 맞아" (2026-08-04) */
  animation: sodamIntroLogo 1200ms cubic-bezier(.22,.61,.36,1) 350ms forwards;
}
.sodam-intro-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* 해 위치의 은은한 빛 번짐 */
.sodam-intro-logo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 28%;
  width: 132px;
  height: 132px;
  margin: -66px 0 0 -66px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,176,54,.34) 0%, rgba(240,176,54,.14) 42%, rgba(240,176,54,0) 70%);
  opacity: 0;
  animation: sodamIntroGlow 1750ms ease-out 750ms forwards;
  pointer-events: none;
}
@keyframes sodamIntroLogo {
  from { opacity: 0; transform: scale(.92); filter: blur(6px); }
  to   { opacity: 1; transform: scale(1);   filter: blur(0); }
}
@keyframes sodamIntroGlow {
  0%   { opacity: 0; transform: scale(.72); }
  60%  { opacity: 1; transform: scale(1.06); }
  100% { opacity: .82; transform: scale(1); }
}

/* ── 카피 : 昭(밝히고) / 談(이야기하다) ── */
.sodam-intro-copy {
  margin: 0;
  font-family: "Sodam Korean Serif", "Noto Serif KR", "Nanum Myeongjo", serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.52;
  letter-spacing: -.02em;
  color: #33291f;
  opacity: 0;
  animation: sodamIntroRise 1050ms cubic-bezier(.22,.61,.36,1) forwards;
}
.sodam-intro-copy--1 { margin-top: 26px; animation-delay: 350ms; }   /* P0-20: 로고를 빼서 1000ms 당김 */
.sodam-intro-copy--2 { animation-delay: 700ms; }

/* ── 브랜드명(한자 병기) ── */
.sodam-intro-brand {
  margin: 26px 0 0;
  font-size: 22px;              /* 13px에서 키움 — 인트로의 브랜드명답게 */
  font-weight: 900;
  letter-spacing: .04em;        /* 자간을 좁혀야 실제로 커 보인다(기존 .16em은 흐릿하게 퍼짐) */
  color: #4a3d30;               /* 진하게 — 존재감 */
  opacity: 0;
  animation: sodamIntroRise 1050ms cubic-bezier(.22,.61,.36,1) 1100ms forwards;
}
.sodam-intro-brand .hanja {
  margin-left: 8px;
  font-size: .82em;             /* 한자는 살짝 작게 — 병기 느낌 */
  font-family: "Sodam Hanja Ink Serif", "Noto Serif CJK KR", serif;
  font-weight: 800;
  color: #93826d;
}
@keyframes sodamIntroRise {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 작은 화면 대응 ── */
@media (max-width: 360px) {
  .sodam-intro-logo { width: 142px; height: 142px; }
  .sodam-intro-copy { font-size: 22px; }
}
@media (min-width: 761px) {
  /* 데스크톱 PWA에서도 과하지 않게 */
  .sodam-intro-logo { width: 190px; height: 190px; }
  .sodam-intro-copy { font-size: 28px; }
}

/* ── 검수용: ?intro=slow 일 때 2배 느리게 재생 ── */
.sodam-intro.is-slow .sodam-intro-bg        { animation-duration: 2.9s; }
.sodam-intro.is-slow .sodam-intro-logo      { animation-duration: 2.4s; animation-delay: .7s; }
.sodam-intro.is-slow .sodam-intro-logo::before { animation-duration: 3.5s; animation-delay: 1.5s; }
.sodam-intro.is-slow .sodam-intro-copy      { animation-duration: 2.1s; }
.sodam-intro.is-slow .sodam-intro-copy--1   { animation-delay: .7s; }
.sodam-intro.is-slow .sodam-intro-copy--2   { animation-delay: 1.4s; }
.sodam-intro.is-slow .sodam-intro-brand     { animation-duration: 2.1s; animation-delay: 2.2s; }

/* ── 접근성: 모션 최소화 설정 존중 ── */
@media (prefers-reduced-motion: reduce) {
  .sodam-intro-bg,
  .sodam-intro-logo,
  .sodam-intro-logo::before,
  .sodam-intro-copy,
  .sodam-intro-brand {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .sodam-intro.is-out { transition-duration: 200ms; }
}