/* ═══════════════════════════════════════════════════
   시안 A+인트로 — 로고 오프닝
   A는 그대로, 첫 진입 때만 인트로 커튼이 내려와 있다.
   시퀀스: 로고(블러 해제) → 헤어라인 → 워드마크(자간 조임) → 커튼 업.
   클릭하면 즉시 스킵. 모션 최소화 설정이면 아예 안 뜬다.
   ═══════════════════════════════════════════════════ */

html.intro-lock { overflow: hidden }

.intro {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(242, 102, 42, .06), transparent 55%),
    var(--c-void, #0E0A07);
  cursor: pointer;
  transition: transform 1.05s cubic-bezier(.76, 0, .24, 1), visibility 0s 1.05s;
}
.intro.is-done { transform: translateY(-101%); visibility: hidden }

.intro__in { text-align: center; padding: 0 24px }

.intro__mark {
  height: clamp(44px, 6vw, 72px); width: auto; margin: 0 auto;
  opacity: 0; filter: blur(10px); transform: translateY(18px) scale(.96);
  animation: introMark 1.15s cubic-bezier(.16, 1, .3, 1) .25s forwards;
}
@keyframes introMark {
  to { opacity: 1; filter: blur(0); transform: none }
}

.intro__rule {
  height: 1px; width: min(280px, 56vw); margin: clamp(22px, 3vh, 34px) auto;
  background: linear-gradient(90deg, transparent, rgba(242, 235, 224, .55), transparent);
  transform: scaleX(0);
  animation: introRule 1s cubic-bezier(.16, 1, .3, 1) .95s forwards;
}
@keyframes introRule { to { transform: scaleX(1) } }

.intro__word {
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: clamp(11px, 1.15vw, 15px); text-transform: uppercase;
  color: var(--c-cream, #F2EBE0);
  opacity: 0; letter-spacing: .52em; text-indent: .52em;   /* indent로 중앙 보정 */
  animation: introWord 1.25s cubic-bezier(.16, 1, .3, 1) 1.25s forwards;
}
@keyframes introWord {
  to { opacity: 1; letter-spacing: .26em; text-indent: .26em }
}

.intro__since {
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: .3em; text-indent: .3em;
  color: var(--c-mute, #A2968A); margin-top: 1.4em;
  opacity: 0; animation: introSince .9s ease 2s forwards;
}
@keyframes introSince { to { opacity: .85 } }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none }
}