/* =========================================================================
   터미널형 부팅 인트로 오버레이 (SECURE MODE)
   - 기존 홈페이지 위에 잠깐 덮였다가 사라지는 풀스크린 오버레이.
   - 기존 사이트의 레이아웃/스크롤에는 영향을 주지 않는다.
   ========================================================================= */

:root {
  --intro-neon-green: #39ff9e;   /* 메인 네온 그린 */
  --intro-accent: #ffffff;       /* 강조 라인(흰색 + 녹색 글로우) */
  --intro-bg: #04060a;           /* 거의 검정 배경 */
}

/* 인트로가 떠 있는 동안 뒤쪽(홈페이지) 스크롤을 잠깐 막는다.
   인트로가 끝나면 JS가 이 클래스를 제거한다. */
html.intro-active,
body.intro-active {
  overflow: hidden;
}

/* ----- 풀스크린 오버레이 컨테이너 ----- */
.intro-overlay {
  position: fixed;
  inset: 0;                       /* top/right/bottom/left: 0 */
  z-index: 2147483646;            /* 사이트 콘텐츠 위. 단 커서 잔상(cursor-trail,
                                     2147483647)보다는 한 단계 아래라 터미널에서도 잔상이 보인다 */
  background: var(--intro-bg);
  color: var(--intro-green, var(--intro-neon-green));
  /* 기존 사이트와 동일한 이사만루 폰트 사용 (style.css에서 전역 등록됨) */
  font-family: "esamanru", "Segoe UI", sans-serif;
  font-weight: 300;
  overflow: hidden;
  /* 부드러운 페이드아웃 준비 */
  opacity: 1;
  transition: opacity 0.5s ease;
  /* 인트로 안에서는 텍스트 선택/드래그 막기 */
  user-select: none;
  -webkit-user-select: none;
}

/* 페이드아웃 상태 */
.intro-overlay.intro-hide {
  opacity: 0;
  pointer-events: none;
}

/* ----- phosphor 글로우(전체 화면에 미세한 녹색 빛) ----- */
.intro-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(57, 255, 158, 0.08) 0%,
    rgba(57, 255, 158, 0.02) 45%,
    transparent 75%
  );
  pointer-events: none;
}

/* ----- 배경 가로 라인: 얇은 다크 네온 그린 (정적, 깜박임·글리치 없음) -----
   섹션(OUR GAMES / ABOUT US)과 동일한 라인 텍스처를 터미널에도 깐다.
   프레임(z2)·텍스트(z3)보다 아래(z1)라 배경 레이어로만 작동. */
.intro-glitch {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* 1px 다크 네온 그린 라인이 6px 간격으로 반복 (진하지 않게) */
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(8, 225, 120, 0.06) 0,
    rgba(8, 225, 120, 0.06) 1px,
    transparent 1px,
    transparent 6px
  );
}

/* =========================================================================
   모서리 HUD 프레임
   ========================================================================= */
.intro-frame {
  position: absolute;
  inset: clamp(14px, 3vw, 34px);
  pointer-events: none;
  z-index: 2;
}

/* 네 모서리의 ㄱ자 라인 */
.intro-corner {
  position: absolute;
  width: clamp(34px, 6vw, 60px);
  height: clamp(34px, 6vw, 60px);
}
.intro-corner::before,
.intro-corner::after {
  content: "";
  position: absolute;
  background: var(--intro-neon-green);
  box-shadow: 0 0 8px rgba(57, 255, 158, 0.8);
}
/* 가로 막대 */
.intro-corner::before { width: 100%; height: 2px; }
/* 세로 막대 */
.intro-corner::after  { width: 2px;  height: 100%; }

.intro-corner.tl { top: 0; left: 0; }
.intro-corner.tl::before { top: 0; left: 0; }
.intro-corner.tl::after  { top: 0; left: 0; }

.intro-corner.tr { top: 0; right: 0; }
.intro-corner.tr::before { top: 0; right: 0; }
.intro-corner.tr::after  { top: 0; right: 0; }

.intro-corner.bl { bottom: 0; left: 0; }
.intro-corner.bl::before { bottom: 0; left: 0; }
.intro-corner.bl::after  { bottom: 0; left: 0; }

.intro-corner.br { bottom: 0; right: 0; }
.intro-corner.br::before { bottom: 0; right: 0; }
.intro-corner.br::after  { bottom: 0; right: 0; }

/* HUD 모서리 라벨 */
.intro-hud-label {
  position: absolute;
  font-size: clamp(9px, 1.4vw, 13px);
  letter-spacing: 0.12em;
  color: var(--intro-neon-green);
  text-shadow: 0 0 6px rgba(57, 255, 158, 0.7);
  white-space: nowrap;
}
/* 모서리 ㄱ자 라인과 겹치지 않도록 프레임 안쪽으로 더 들여 배치 */
.intro-hud-label.top-left     { top: 28px;    left: 30px; }
.intro-hud-label.top-right    { top: 28px;    right: 30px; }
.intro-hud-label.bottom-left  { bottom: 28px; left: 30px; }
.intro-hud-label.bottom-right { bottom: 28px; right: 30px; }

/* =========================================================================
   좌상단 타이틀 로고 (타이핑보다 먼저 페이드인 → 화면이 살아있음을 알림)
   ========================================================================= */
.intro-title {
  position: absolute;
  /* 외곽 프레임(inset clamp(14px,3vw,34px))보다 안쪽으로 더 들여 여백을 준다 */
  top: clamp(48px, 6.4vh, 82px);
  left: clamp(48px, 5.4vw, 82px);
  /* 기준 위치에서 위로 40px, 왼쪽으로 40px 미세 이동 */
  margin-top: -40px;
  margin-left: -40px;
  width: clamp(133px, 15.4vw, 231px);   /* 기존 대비 70% 크기 */
  z-index: 3;
  opacity: 0;
  /* 로고 그룹 전체가 천천히 페이드인 (점멸은 안쪽 glow 레이어가 담당) */
  animation: intro-title-in 1.8s ease forwards;
}
@keyframes intro-title-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 두 레이어를 정확히 겹쳐 쌓는다(동일 278x112 캔버스라 픽셀이 일치). */
.intro-title-off,
.intro-title-glow {
  width: 100%;
  height: auto;
  display: block;
}
/* 소등 이미지: 바닥 레이어(항상 표시) */
.intro-title-off {
  position: relative;
}
/* 발광 이미지: 위에 얹고 불규칙하게 점멸.
   opacity 0 이 되면 아래 소등 이미지가 드러나 "번갈아 깜박" 효과가 난다. */
.intro-title-glow {
  position: absolute;
  top: 0;
  left: 0;
  /* 켜졌을 때 실제로 빛을 뿜는 느낌(네온 글로우) */
  filter: drop-shadow(0 0 6px rgba(57, 255, 158, 0.55))
          drop-shadow(0 0 14px rgba(57, 255, 158, 0.3));
  animation: intro-title-flicker 5.3s steps(1, end) infinite;
}

/* 불규칙 네온 점멸: 켜짐(1)/꺼짐(0) 사이를 들쭉날쭉한 간격으로 오간다.
   steps(1,end) 라 값이 부드럽게 섞이지 않고 딱딱 끊겨 진짜 점멸처럼 보인다. */
@keyframes intro-title-flicker {
  0%,   6%   { opacity: 1; }   /* 켜짐 */
  7%,   9%   { opacity: 0; }   /* 짧게 꺼짐 */
  10%,  21%  { opacity: 1; }   /* 켜짐(길게) */
  22%        { opacity: 0; }   /* 한 번 깜빡 */
  23%,  26%  { opacity: 1; }
  27%,  29%  { opacity: 0; }   /* 꺼짐 */
  30%,  33%  { opacity: 1; }
  34%        { opacity: 0; }   /* 아주 짧은 깜빡 */
  35%,  49%  { opacity: 1; }   /* 켜짐(길게) */
  50%,  53%  { opacity: 0; }   /* 꺼짐(살짝 길게) */
  54%,  55%  { opacity: 1; }   /* 잠깐 켜짐 */
  56%        { opacity: 0; }   /* 다시 깜빡 */
  57%,  70%  { opacity: 1; }   /* 켜짐(길게) */
  71%,  72%  { opacity: 0; }
  73%,  81%  { opacity: 1; }
  82%,  85%  { opacity: 0; }   /* 꺼짐 */
  86%        { opacity: 1; }
  87%        { opacity: 0; }   /* 이중 깜빡 */
  88%,  100% { opacity: 1; }   /* 켜짐 마무리 */
}

/* =========================================================================
   중앙 부팅 로그
   ========================================================================= */
.intro-console {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(28px, 8vw, 120px);
  z-index: 3;
}

.intro-line {
  font-size: clamp(14px, 2.4vw, 22px);
  line-height: 1.9;
  letter-spacing: 0.04em;
  text-shadow: 0 0 6px rgba(57, 255, 158, 0.55);
  /* 타이핑 전에는 보이지 않다가 JS가 노출 */
  opacity: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.intro-line.visible { opacity: 1; }

/* > 프롬프트 기호 */
.intro-line .intro-prompt {
  color: var(--intro-neon-green);
  margin-right: 0.5em;
}

/* [ SIGNAL DETECTED ] 강조 라인 (흰색 + 강한 녹색 글로우) */
.intro-line.highlight {
  color: var(--intro-accent);
  text-shadow:
    0 0 6px rgba(57, 255, 158, 0.9),
    0 0 14px rgba(57, 255, 158, 0.7),
    0 0 26px rgba(57, 255, 158, 0.5);
}

/* 깜빡이는 블록 커서 */
.intro-cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.05em;
  margin-left: 0.1em;
  background: var(--intro-neon-green);
  box-shadow: 0 0 8px rgba(57, 255, 158, 0.9);
  transform: translateY(0.15em);
  animation: intro-blink 1s steps(1) infinite;
}
@keyframes intro-blink {
  0%, 49%  { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* =========================================================================
   SKIP 버튼 (우하단)
   ========================================================================= */
.intro-skip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(clamp(40px, 7vw, 70px) + 90px);   /* 기존보다 90px 위로 */
  z-index: 5;
  padding: 12px 27px;                             /* 150% 확대 */
  font-family: inherit;
  font-size: clamp(15px, 2.1vw, 19.5px);          /* 150% 확대 */
  letter-spacing: 0.2em;
  color: var(--intro-neon-green);
  background: transparent;
  border: 1px solid rgba(57, 255, 158, 0.6);
  box-shadow: 0 0 8px rgba(57, 255, 158, 0.35);
  /* 커스텀 hover 커서: Cursor_Hover1 기본 + cursor-trail.js 의 .cur-alt 토글로
     Cursor_Hover1 ↔ Cursor_Hover2 깜박임 (intro-overlay.css 가 style.css 보다
     나중에 로드되므로 여기서 직접 지정해줘야 한다.) */
  cursor: url('images/Cursor_Hover1.png') 0 0, pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.intro-skip:hover,
.intro-skip:focus-visible {
  background: rgba(57, 255, 158, 0.15);
  color: var(--intro-accent);
  outline: none;
}

/* =========================================================================
   모바일 반응형 — 좁은 세로 화면에서도 비율이 깨지지 않게 조정
   ========================================================================= */
@media (max-width: 600px) {
  /* HUD 프레임을 화면 가장자리에 더 가깝게 */
  .intro-frame { inset: 12px; }
  .intro-corner {
    width: 26px;
    height: 26px;
  }

  /* 모서리 라벨: 좁은 폭에서 좌우 라벨이 겹치지 않게 더 작게 */
  .intro-hud-label {
    font-size: 8px;
    letter-spacing: 0.06em;
  }
  .intro-hud-label.top-left,
  .intro-hud-label.top-right    { top: 10px; }
  .intro-hud-label.bottom-left,
  .intro-hud-label.bottom-right { bottom: 10px; }
  .intro-hud-label.top-left,
  .intro-hud-label.bottom-left  { left: 12px; }
  .intro-hud-label.top-right,
  .intro-hud-label.bottom-right { right: 12px; }

  /* 중앙 부팅 로그: 좌우 여백 축소, 글자 크기 화면비에 맞춤 */
  .intro-console {
    padding: 0 24px;
  }
  .intro-line {
    font-size: clamp(13px, 4.6vw, 18px);
    line-height: 1.85;
  }

  /* SKIP 버튼 하단 중앙 유지, 살짝 위로 */
  .intro-skip {
    bottom: 34px;
  }
}

/* 아주 좁은 화면(소형 폰)에서 상단 좌/우 라벨 겹침 방지 */
@media (max-width: 380px) {
  .intro-hud-label {
    font-size: 7px;
    letter-spacing: 0.03em;
  }
}

/* =========================================================================
   전환 시퀀스 [B] 글리치 → [A] CRT 전원 꺼짐
   ========================================================================= */

/* [B] 글리치 1회(약 0.16s): 흔들림 + RGB 채널 분리/노이즈 느낌, steps(2)로 거칠게 */
.intro-overlay.intro-glitch-burst {
  animation: intro-glitch-burst 0.16s steps(2) 1 both;
}
@keyframes intro-glitch-burst {
  0%   { transform: translate(0, 0);     filter: none; }
  25%  { transform: translate(-6px, 3px); filter: hue-rotate(45deg) contrast(1.7) saturate(1.6); }
  50%  { transform: translate(6px, -4px); filter: hue-rotate(-45deg) contrast(1.9) saturate(1.6); }
  75%  { transform: translate(-4px, -2px); filter: hue-rotate(25deg) contrast(1.5); }
  100% { transform: translate(0, 0);     filter: none; }
}

/* [A] CRT 전원 꺼짐(약 0.42s):
   scaleY를 가로 한 줄로 수축(밝기 ↑) → scaleX 0으로 좌우로 닫히며 opacity 0 */
.intro-overlay.intro-crt-off {
  transform-origin: center center;
  animation: intro-crt-off 0.42s cubic-bezier(0.6, 0, 0.9, 0.3) 1 forwards;
}
@keyframes intro-crt-off {
  0%   { transform: scaleY(1) scaleX(1);     filter: brightness(1);   opacity: 1; }
  48%  { transform: scaleY(0.012) scaleX(1); filter: brightness(2.6); opacity: 1; }
  100% { transform: scaleY(0.012) scaleX(0); filter: brightness(3);   opacity: 0; }
}

/* =========================================================================
   히어로 전환: 인트로 종료 후 주요 요소가 순차 페이드인
   (기존 style.css는 보존하고, body 클래스 기준으로 최소 범위만 제어)
   ========================================================================= */

/* 배경 키 비주얼: 인트로 종료 후 opacity로 페이드인(너무 느리지 않게).
   숨김은 html.intro-playing 기준 → 첫 페인트 전에 적용되어 FOUC를 막는다. */
html.intro-playing .hero {
  opacity: 0;
}
body.intro-done .hero {
  opacity: 1;
  transition: opacity 1s ease;
}

/* 인트로 재생 중에는 히어로 주요 요소를 숨김 상태로 대기.
   ※ 타이틀은 로고 이미지와 스윕 하이라이트(::after)가 함께 움직여야 하므로
      .hero-title(img) 이 아니라 래퍼(.hero-title-wrap) 를 대상으로 한다. */
html.intro-playing .hero-title-wrap,
html.intro-playing .hero-coming,
html.intro-playing .hero-subtitle,
html.intro-playing .steam-btn,
html.intro-playing .hero-video {
  opacity: 0;
  transform: translateY(14px);
  animation: none;            /* Wishlist Now 펄스 등 기존 애니메이션 잠시 정지 */
}
/* Epic 박스는 인트로/스캔 시퀀스에서 제외 — 스크롤 인 리빌(script.js .reveal)이 담당 */

/* 인트로 종료(.intro-done) 시 약 0.12초 간격으로 순차 등장 */
body.intro-done .hero-title-wrap,
body.intro-done .hero-coming,
body.intro-done .hero-subtitle,
body.intro-done .steam-btn,
body.intro-done .hero-video {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
body.intro-done .hero-title-wrap { transition-delay: 0s; }
body.intro-done .hero-coming    { transition-delay: 0.12s; }
body.intro-done .hero-subtitle  { transition-delay: 0.24s; }
body.intro-done .steam-btn      { transition-delay: 0.36s; }
body.intro-done .hero-video     { transition-delay: 0.48s; }

/* =========================================================================
   접근성: 모션 최소화 선호 시 — 인트로 자체를 JS가 건너뛰지만,
   혹시 표시되더라도 애니메이션을 끈다.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .intro-overlay,
  .intro-console,
  .intro-cursor {
    animation: none !important;
    transition: none !important;
  }
  /* 타이틀은 애니메이션 없이 바로 보이게(opacity 0으로 숨지 않도록).
     점멸도 끄고 발광 이미지를 켜진 상태로 고정. */
  .intro-title { animation: none !important; opacity: 1; }
  .intro-title-glow { animation: none !important; opacity: 1; }
  /* 배경 가로 라인은 정적(모션 없음)이라 그대로 표시 */
}