/* ─────────────────────────────────────────────────────────────
   Particle → UI intro overlay (dark, editorial, restrained)
   기본은 "보이는" 상태이지만, JS가 재생 여부를 제어한다.
   JS 미실행/비활성 시엔 <noscript> 또는 인라인 스크립트가 숨겨
   본문이 항상 사용 가능하도록 한다.
   ───────────────────────────────────────────────────────────── */
#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* 검정에서 시작 — 흰 실(threads)이 풀리는 인트로 */
  background:
    radial-gradient(1200px 860px at 50% 46%, #17171f 0%, #0b0b10 62%, #060608 100%);
  opacity: 1;
  transition: opacity 1.2s cubic-bezier(.4,0,.2,1);   /* 길고 우아한 크로스페이드 */
}
#intro-overlay.fade-out { opacity: 0; }
#intro-overlay.hidden   { display: none; }

/* ── 영상 인트로 ──
   영상이 준비되면 오버레이에 .video-mode 가 붙고, 파티클·타이포 레이어는
   숨겨진다. 영상의 첫·끝 프레임이 거의 검정이라 배경도 검정으로 맞춰
   레터박스가 드러나지 않게 한다. */
/* 영상(16:9)을 어떤 창 비율에서도 잘라내지 않고 화면 안에 전부 보여준다.
   - 브라우저 창은 주소창·탭 때문에 보통 16:9 보다 가로로 길어, cover 로 채우면
     영상 위아래가 잘렸다. 반대로 세로로 긴 창에서는 좌우가 잘리고 가로 움직임이
     확대돼 컷 전환이 옆으로 미끄러져 보였다.
   - 영상 박스 자체를 16:9 로 만들어 창 안에 최대 크기로 가운데 둔다.
     남는 영역은 같은 영상의 흐린 배경(#intro-ambient)이 채운다. */
#intro-video {
  position: absolute;
  top: 50%; left: 50%;
  width: min(100%, calc(100vh * 16 / 9));
  width: min(100%, calc(100dvh * 16 / 9));
  height: auto;
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  object-fit: cover;
  display: none;
  opacity: 0;
  transition: opacity .6s ease;
}
/* 여백이 생기는 쪽의 영상 가장자리를 페이드해 경계선 없이 흐린 배경에 녹인다 */
@media (min-aspect-ratio: 16/9) {   /* 창이 더 가로로 길다 → 좌우 여백 */
  #intro-video {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  }
}
@media (max-aspect-ratio: 16/9) {   /* 창이 더 세로로 길다 → 위아래 여백 */
  #intro-video {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
  }
}

/* 흐린 배경(앰비언트) — 영상 프레임을 작은 캔버스에 옮겨 그리고 화면을 덮도록 키운 뒤 흐린다.
   가장자리가 흐려지며 비지 않도록 화면보다 조금 크게 둔다. */
#intro-ambient {
  position: absolute;
  inset: -8%;
  width: 116%; height: 116%;
  object-fit: cover;
  filter: blur(36px) brightness(0.95) saturate(0.9);
  display: none;
  opacity: 0;
  transition: opacity .6s ease;
}
#intro-overlay.video-mode #intro-ambient { display: block; }
#intro-overlay.video-mode #intro-ambient.ready { opacity: 1; }

#intro-overlay.video-mode { background: #000; transition-duration: .9s; }
#intro-overlay.video-mode #intro-video { display: block; }
#intro-overlay.video-mode #intro-video.ready { opacity: 1; }
#intro-overlay.video-mode #intro-canvas,
#intro-overlay.video-mode .intro-center { display: none; }

#intro-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* 중앙 타이포 레이어 */
.intro-center {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 24px;
  pointer-events: none;
}

/* 분위기용 용어 라벨 — 타이틀과 같은 정중앙 자리에서 순차 노출 */
#intro-word {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-family: var(--sans, Inter, Pretendard, system-ui, sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.5em;
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(226, 228, 236, 0.82);
  opacity: 0;
  transition: opacity .5s cubic-bezier(.4,0,.2,1);
}

/* 타이틀 — 화면 정중앙(가로·세로) 고정 */
#intro-title {
  margin: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1s cubic-bezier(.4,0,.2,1), transform 1s cubic-bezier(.4,0,.2,1);
}
#intro-title.show { opacity: 1; transform: none; }
#intro-title .it-name {
  font-family: var(--serif, 'Fraunces', Georgia, serif);
  font-size: 1.95rem;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.005em;
  color: #f4f2ec;
}
#intro-title .it-sub {
  margin-top: 12px;
  font-family: var(--sans, Inter, sans-serif);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(190, 192, 200, 0.85);
}

/* Skip intro — 우상단, 절제된 pill */
#intro-skip {
  position: absolute;
  top: 20px;
  right: 22px;
  z-index: 3;
  padding: 8px 15px;
  font-family: var(--font, Inter, system-ui, sans-serif);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(220, 222, 228, 0.72);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
#intro-skip:hover,
#intro-skip:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.36);
  outline: none;
}

/* Replay intro — 푸터의 절제된 텍스트 버튼 */
.replay-intro {
  margin-left: 10px;
  padding: 2px 4px;
  font: inherit;
  font-size: 0.76rem;
  color: var(--text-3);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .12s;
}
.replay-intro:hover,
.replay-intro:focus-visible { color: var(--accent); outline: none; }

/* 모션 최소화 사용자: 파티클 애니메이션 생략, 짧은 페이드만 */
@media (prefers-reduced-motion: reduce) {
  #intro-overlay { transition: opacity .3s ease; }
  #intro-canvas  { display: none; }
  #intro-word    { display: none; }
  #intro-title   { transition: opacity .3s ease; transform: none; }
}