/* =============================================
   인트로 오버레이 템플릿 (Self-contained)
   ============================================= */

.intro-overlay {
  /* === CSS 변수 - 더현 브랜드 컬러 적용 === */
  --io-bg-color: #1a365d;                       /* 더현 primary */
  --io-text-color: #ffffff;                      /* 흰색 메인 텍스트 */
  --io-sub-color: rgba(99, 179, 237, 0.85);     /* accent-light */
  --io-fade-duration: 1s;

  --io-logo-width-pc: 170px;
  --io-logo-width-mo: 130px;

  --io-font-display: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  --io-font-body: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;

  --io-text-size-pc: 2rem;
  --io-text-size-mo: 1.5rem;
  --io-sub-size-pc: 0.875rem;
  --io-sub-size-mo: 0.75rem;
  --io-text-letter-spacing: -0.02em;
  --io-sub-letter-spacing: 0.25em;
  --io-gap: 2rem;

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--io-bg-color);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--io-fade-duration) ease-out, visibility var(--io-fade-duration) ease-out;
}

.intro-overlay.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-overlay__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--io-gap);
}

.intro-overlay__logo {
  width: var(--io-logo-width-pc);
  height: auto;
  opacity: 0;
  filter: blur(12px);
  transition: opacity 1s ease-out, filter 1s ease-out;
  background: #ffffff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.intro-overlay__logo.is-visible {
  opacity: 1;
  filter: blur(0);
}

.intro-overlay__text {
  display: flex;
  gap: 2px;
  font-family: var(--io-font-display);
  font-size: var(--io-text-size-pc);
  font-weight: 500;
  color: var(--io-text-color);
  letter-spacing: var(--io-text-letter-spacing);
}

.intro-overlay__letter {
  opacity: 0;
  filter: blur(10px);
  transition: opacity 0.5s ease-out, filter 0.5s ease-out;
  white-space: pre;
}

.intro-overlay__letter.is-visible {
  opacity: 1;
  filter: blur(0);
}

.intro-overlay__sub {
  font-family: var(--io-font-body);
  font-size: var(--io-sub-size-pc);
  font-weight: 300;
  color: var(--io-sub-color);
  letter-spacing: var(--io-sub-letter-spacing);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.8s ease-out;
  margin: 0;
}

.intro-overlay__sub.is-visible {
  opacity: 1;
}

/* 스크롤 잠금 */
body.intro-overlay-no-scroll {
  overflow: hidden;
}

/* 모바일 */
@media (max-width: 767px) {
  .intro-overlay__logo {
    width: var(--io-logo-width-mo);
  }
  .intro-overlay__text {
    font-size: var(--io-text-size-mo);
  }
  .intro-overlay__sub {
    font-size: var(--io-sub-size-mo);
  }
}