/* 매치 오프닝 시네마틱 — 레터박스 + 좌측 타이틀 카드 (콜옵/배틀필드식 도입) */

.match-intro {
  position: fixed;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}

.match-intro.intro-fade-out {
  transition: opacity 0.65s ease;
  opacity: 0;
}

/* 레터박스 바: 시작 시 화면 위아래에서 스르륵 들어온다 */
.intro-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 11vh;
  background: #040605;
  transition: transform 1.1s cubic-bezier(0.22, 0.8, 0.24, 1);
}

.intro-bar-top { top: 0; transform: translateY(-100%); }
.intro-bar-bottom { bottom: 0; transform: translateY(100%); }

.match-intro.intro-live .intro-bar-top,
.match-intro.intro-live .intro-bar-bottom { transform: translateY(0); }

/* 좌측 타이틀 카드 */
.intro-card {
  position: absolute;
  left: max(5vw, 48px);
  top: 54%;
  transform: translateY(-50%);
  color: #edf4ef;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

.intro-card h1 {
  margin: 0 0 10px;
  font-size: clamp(30px, 4.4vw, 58px);
  font-weight: 900;
  letter-spacing: 4px;
  opacity: 0;
  transform: translateX(-26px);
  transition: opacity 0.9s ease 0.7s, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.7s;
}

.intro-card .intro-loc,
.intro-card .intro-time {
  margin: 0 0 4px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: clamp(12px, 1.25vw, 17px);
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(222, 232, 222, 0.88);
  opacity: 0;
  transform: translateX(-18px);
}

.intro-card .intro-loc {
  transition: opacity 0.8s ease 1.6s, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 1.6s;
}

.intro-card .intro-time {
  color: rgba(255, 209, 102, 0.92);
  transition: opacity 0.8s ease 2.2s, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 2.2s;
}

.match-intro.intro-live .intro-card h1,
.match-intro.intro-live .intro-card .intro-loc,
.match-intro.intro-live .intro-card .intro-time {
  opacity: 1;
  transform: translateX(0);
}

/* 스킵 힌트: 우하단, 레터박스 바 위 */
.intro-skip {
  position: absolute;
  right: max(4vw, 36px);
  bottom: calc(11vh + 18px);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(237, 244, 239, 0.55);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity 1s ease 2.8s;
}

.match-intro.intro-live .intro-skip { opacity: 1; }