/* ══════════════════════════════════════════════════════════════
   메인 첫 진입 인트로
   ① 옅은 회백색 화면 가운데 'KOREA PLATFORM SERVICE TECHNOLOGY' 가 한 글자씩 선명해지고, 아래로 1px 선이 그어짐
   ② 첫 글자만 남고 나머지가 사라지며 K·P·S·T 가 가운데로 모여 'KPST', 선도 함께 짧아짐   (.s-collapse)
   ③ K·P·S·T 가 로고 속 같은 글자 자리로 들어가 로고 글자가 되고, 둘레로 타원이 그려지고 사명이 나타남 (.s-morph)
   ④ 로고가 헤더 로고 자리로 날아감                                                        (.is-flying)
   ⑤ 날아가는 동안 가운데 선에서 위아래 커튼이 갈라지며 실제 히어로가 드러나고,
      헤더 자리 로고는 흰색으로 → 진짜 헤더 로고와 바꿔치기                               (.is-revealing)
   - 단계 클래스는 js/intro.js 가 시간에 맞춰 붙인다
   - <html class="intro-on"> 일 때만 보인다 (kpst.jsp <head> 의 인라인 스크립트가 붙임)
   - 브라우저 세션당 1회, '동작 줄이기' 설정이면 아예 안 띄움
   - 움직임은 하나의 곡선 체계로 통일 : 나타남 = expo-out, 이동 = expo-in-out
   ══════════════════════════════════════════════════════════════ */

.kpst-intro {
    --intro-surface: #f6f7f9;            /* 새하얀 흰색 대신 아주 옅은 회백색 */
    --intro-glow: rgba(27, 146, 255, 0.10);
    --intro-text: #111111;
    --intro-line: rgba(17, 17, 17, 0.38);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* expo-out : 빠르게 시작해 길게 멈춤 */
    --ease-inout: cubic-bezier(0.83, 0, 0.17, 1);   /* expo-in-out : 이동 */

    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    color: var(--intro-text);
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}

html.intro-on .kpst-intro,
.kpst-intro.is-revealing {
    display: block;
}

/* 인트로 동안 페이지 스크롤 잠금 */
html.intro-on,
html.intro-on body {
    overflow: hidden;
}

/* 인트로 동안 히어로 등장 애니메이션은 멈춰 두었다가, 커튼이 열릴 때 이어서 재생 */
html.intro-on .hero,
html.intro-on .hero * {
    animation-play-state: paused !important;
}

/* 날아간 인트로 로고와 겹치지 않게 진짜 헤더 로고는 숨겨 두었다가 끝나면 바꿔치기 */
html.intro-on #header .kpst-logo img,
html.intro-logo-hold #header .kpst-logo img {
    opacity: 0;
}

/* ── 위아래 커튼 : 두 장이 합쳐 한 화면처럼 보이도록 배경을 화면 크기(200%)로 깔고 위/아래만 보여줌 ── */
.kpst-intro__veil {
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    overflow: hidden;
    background:
        radial-gradient(ellipse 55% 45% at 50% 50%, var(--intro-glow) 0%, transparent 70%),
        var(--intro-surface);
    background-size: 100% 200%;
    transition: transform 1.05s var(--ease-inout);
}

.kpst-intro__veil--top {
    top: 0;
    background-position: center top;
}

.kpst-intro__veil--bottom {
    bottom: 0;
    background-position: center bottom;
}

/* 아주 미세한 종이결(노이즈) — 평평한 단색보다 질감 있어 보이게 */
.kpst-intro__veil::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    pointer-events: none;
}

.kpst-intro.is-revealing .kpst-intro__veil--top {
    transform: translateY(-100%);
}

.kpst-intro.is-revealing .kpst-intro__veil--bottom {
    transform: translateY(100%);
}

/* ── 가운데 스테이지 : 사명과 로고가 같은 자리(정중앙)에 겹쳐 있음 ── */
.kpst-intro__stage {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0 16px;
    text-align: center;
    pointer-events: none;
}

.kpst-intro__wordmark,
.kpst-intro__fly {
    grid-area: 1 / 1;
}

/* ══════ ① 영문 사명 : 얇은 굵기 + 넓은 자간 ══════ */
.kpst-intro__wordmark {
    position: relative;
    margin: 0 calc(var(--track) * -1) 0 0;   /* 마지막 글자 뒤 여백을 상쇄해 글자들이 정확히 가운데로 */
    font-size: clamp(13px, 1.9vw, 26px);
    font-weight: 500;
    line-height: 1.2;
    /* 글자를 한 자씩 span 으로 나누면 letter-spacing 이 먹지 않으므로 자간은 글자 오른쪽 여백(--track)으로 */
    --track: 0.34em;
    white-space: nowrap;
    color: var(--intro-text);
}

@media (max-width: 480px) {
    .kpst-intro__wordmark {
        font-size: 11px;
        --track: 0.18em;
    }
}

.kpst-intro__wm-word,
.kpst-intro__wordmark .i,
.kpst-intro__wordmark .r,
.kpst-intro__wordmark .ch {
    display: inline-block;
}

/* 글자가 하나씩 흐릿함 → 선명하게 (--n : js 가 매긴 글자 순번) */
.kpst-intro__wordmark .ch {
    margin-right: var(--track);
    opacity: 0;
    animation: introLetterIn 0.9s var(--ease-out) both;
    animation-delay: calc(0.2s + var(--n, 0) * 22ms);   /* 33글자 → 마지막 글자 약 0.9s 시작 */
}

/* 사명 아래 1px 선 : 가운데에서 양옆으로 그어짐 */
.kpst-intro__wordmark::after {
    content: "";
    position: absolute;
    left: 0;
    right: var(--track);                 /* 마지막 글자 뒤 자간만큼 빼서 글자 폭과 맞춤 */
    bottom: -1.1em;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--intro-line) 18%, var(--intro-line) 82%, transparent 100%);
    transform: scaleX(0);
    animation: introLineIn 1.1s var(--ease-out) 0.45s both;
}

/* ══════ ② KPST 로 모임 (첫 글자 이동량 --dx, 선 배율 --line-s 는 js 가 계산) ══════ */
/* ③의 transform 과 함수 순서를 맞춰 둬야 두 단계가 끊김 없이 이어서 보간됨 */
.kpst-intro.s-collapse .kpst-intro__wordmark .i {
    transform: translate(var(--dx, 0px), 0px) scale(1) skewX(0deg);
    transition: transform 0.85s var(--ease-inout);
}

.kpst-intro.s-collapse .kpst-intro__wordmark .r {
    opacity: 0;
    filter: blur(4px);
    transition: opacity 0.4s ease, filter 0.4s ease;
}

/* 선은 애니메이션(fill)이 transform 을 잡고 있으므로 animation 을 풀고 전환으로 짧게 */
.kpst-intro.s-collapse .kpst-intro__wordmark::after {
    animation: none;
    transform: scaleX(var(--line-s, 0.2));
    transition: transform 0.85s var(--ease-inout);
}

/* ══════ ③ KPST 글자가 그대로 로고가 됨 (.s-morph) ══════
   a. K·P·S·T 가 각자 로고 속 같은 글자 자리로 날아가며 기울고(이탤릭) 초록으로 → 겹친 순간 진짜 로고 글자와 바꿔치기
      (이동량 --tx / --ty, 배율 --ts 는 js 가 계산)
   b. 그 둘레로 파란 타원이 화살표 방향(왼→오)으로 그려짐
   c. 오른쪽에 (주)한국플랫폼서비스기술 이 한 글자씩, 이어서 작은 영문 사명이 나타남 */
.kpst-intro.s-morph .kpst-intro__wordmark .i {
    transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--ts, 1)) skewX(-12deg);
    transform-origin: calc(50% - var(--track) / 2) 50%;   /* 글자 오른쪽 여백을 빼고 글자 가운데 기준 */
    color: #b7d452;
    opacity: 0;
    transition: transform 0.75s var(--ease-inout), color 0.45s ease 0.2s, opacity 0.18s linear 0.62s;
}

.kpst-intro.s-morph .kpst-intro__wordmark::after {
    opacity: 0;
    transition: transform 0.85s var(--ease-inout), opacity 0.3s ease;
}

.kpst-intro__logo {
    display: block;
    width: clamp(220px, 22vw, 320px);
    height: auto;
    overflow: visible;
    filter: brightness(1) invert(0);     /* 헤더 로고와 같은 기준값 (흰색 전환 보간용) */
}

/* a. 진짜 로고 글자 : 날아온 글자가 겹치는 순간 나타남 */
.kpst-intro__logo .lg-l {
    opacity: 0;
    transition: opacity 0.18s linear 0.6s;
}

/* b. 파란 타원 : 잘라내는 사각형(clipPath)을 왼쪽부터 늘려 그려지는 것처럼 */
.kpst-intro__logo .lg-wipe {
    transform: scaleX(0);
    transform-box: fill-box;
    transform-origin: left center;
    transition: transform 0.7s var(--ease-inout) 0.45s;
}

/* c. 한글 사명 한 글자씩(--k : 글자 순번) → 영문 사명 */
.kpst-intro__logo .lg-ko path {
    opacity: 0;
    transform: translateX(-3px);
    transform-box: fill-box;
    transition: opacity 0.5s ease, transform 0.6s var(--ease-out);
    transition-delay: calc(0.6s + var(--k, 0) * 30ms);
}

.kpst-intro__logo .lg-en {
    opacity: 0;
    transition: opacity 0.6s ease 0.95s;
}

.kpst-intro.s-morph .kpst-intro__logo .lg-l,
.kpst-intro.s-morph .kpst-intro__logo .lg-en {
    opacity: 1;
}

.kpst-intro.s-morph .kpst-intro__logo .lg-wipe {
    transform: scaleX(1);
}

.kpst-intro.s-morph .kpst-intro__logo .lg-ko path {
    opacity: 1;
    transform: translateX(0);
}

/* 로고가 완성되면 빛이 한 번 천천히 지나감 (로고 모양으로 마스킹) */
.kpst-intro__shine {
    position: absolute;
    inset: 0;
    overflow: hidden;
    -webkit-mask: url("/images/kpst_logo.svg") center / contain no-repeat;
    mask: url("/images/kpst_logo.svg") center / contain no-repeat;
}

.kpst-intro__shine::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 35%;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.75) 50%, transparent 100%);
    transform: translateX(-120%);
}

.kpst-intro.s-morph .kpst-intro__shine::before {
    animation: introShine 1.1s var(--ease-inout) 1.25s both;
}

/* ══════ ④ 로고 → 헤더 로고 자리 (--fly-x / --fly-y / --fly-s 는 js 가 계산) ══════ */
.kpst-intro__fly {
    position: relative;
    transform-origin: 0 0;
}

.kpst-intro.is-flying .kpst-intro__fly {
    transform: translate(var(--fly-x, 0px), var(--fly-y, 0px)) scale(var(--fly-s, 1));
    transition: transform 1s var(--ease-inout);
}

/* 히어로 위 투명 헤더면 헤더 로고가 흰색이므로, 커튼이 걷힐 즈음 같이 흰색으로 */
.kpst-intro.is-revealing .kpst-intro__logo.to-white {
    filter: brightness(0) invert(1);
    transition: filter 0.45s ease 0.5s;
}

/* ── 건너뛰기 : 작은 글자 링크 ── */
.kpst-intro__skip {
    position: absolute;
    right: clamp(12px, 3vw, 36px);
    bottom: clamp(16px, 4vh, 36px);
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: rgba(17, 17, 17, 0.55);
    font: 500 12px/1 'Pretendard', sans-serif;
    letter-spacing: 0.24em;
    cursor: pointer;
    opacity: 0;
    animation: introFadeIn 0.8s ease 1s both;
    transition: color 0.2s ease;
    touch-action: manipulation;
}

.kpst-intro__skip:hover {
    color: var(--intro-text);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.kpst-intro__skip:focus-visible {
    outline: 2px solid #1b92ff;
    outline-offset: 2px;
}

/* ══════ 퇴장 ══════ */
/* 건너뛰기 : 진행 중이던 사명·로고 연출을 끝 상태로 바로 점프 (js 가 한 프레임만 붙였다 뗌) */
.kpst-intro.is-skipped .kpst-intro__wordmark,
.kpst-intro.is-skipped .kpst-intro__wordmark *,
.kpst-intro.is-skipped .kpst-intro__wordmark::after,
.kpst-intro.is-skipped .kpst-intro__logo *,
.kpst-intro.is-skipped .kpst-intro__shine::before {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
}

.kpst-intro.is-leaving {
    pointer-events: none;
}

/* 등장 애니메이션(fill: both)이 opacity 를 붙잡고 있으므로 animation 을 풀어야 사라진다 */
.kpst-intro.is-leaving .kpst-intro__skip {
    animation: none;
    opacity: 0;
}

/* ══════ 메인 히어로 등장 (커튼이 열릴 때 한 번) ══════ */
.hero.intro-stagger .slide-bg.active {
    animation: introHeroSettle 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero.intro-stagger .slide-text.active > * {
    animation: introFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero.intro-stagger .slide-text.active > :nth-child(1) { animation-delay: 0.3s; }
.hero.intro-stagger .slide-text.active > :nth-child(2) { animation-delay: 0.4s; }
.hero.intro-stagger .slide-text.active > :nth-child(3) { animation-delay: 0.5s; }
.hero.intro-stagger .slide-text.active > :nth-child(4) { animation-delay: 0.6s; }

/* ══════ 키프레임 ══════ */
@keyframes introLetterIn {
    from { opacity: 0; filter: blur(8px); transform: translateY(0.35em); }
    to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes introLineIn {
    to { transform: scaleX(1); }
}

@keyframes introShine {
    to { transform: translateX(380%); }
}

@keyframes introFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes introFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes introHeroSettle {
    from { transform: scale(1.06); }
    to { transform: scale(1); }
}

/* '동작 줄이기' 사용자는 인트로 없음 (head 스크립트에서도 막지만 한 번 더) */
@media (prefers-reduced-motion: reduce) {
    .kpst-intro { display: none !important; }
    html.intro-on,
    html.intro-on body { overflow: auto; }
    html.intro-on .hero,
    html.intro-on .hero * { animation-play-state: running !important; }
    html.intro-on #header .kpst-logo img { opacity: 1; }
}