@charset "utf-8";
/*------------------------------------------------------
· Project : MU:A INTERIOR (mua)
· File    : trigger.css — 스크롤 트리거 초기/도달 상태
· SUMMARY:
  1) Base (초기 상태는 JS 준비 후에만 적용)
  2) T1 Line mask    3) T2 Image scale   4) T3 Clip
  5) T4 Parallax     6) T6 Line draw     7) T7 Word blur
  8) Reduced motion
· NOTE : data-reveal 값으로 요소별 모션을 분기한다. 전 요소 fade-up 일괄 적용 금지.
         JS 실패 시에도 콘텐츠가 보이도록 초기값은 .is-ready 하위에만 둔다.
---------------------------------------------------------*/

/* #################################### 01.Base #################################### */
/* 초기 숨김 상태가 붙는 첫 순간에는 전환을 끈다.
   그러지 않으면 "숨는 동작"까지 애니메이션이 돼, 내려가다 말고 올라오는 꼴이 된다. */
.is-priming [data-reveal],
.is-priming [data-reveal] > * {
    transition: none;
}

/* 전환 대상을 못 박는다 — 비워 두면 all 이 되어, 스크롤 중 자리·크기가 바뀔 때마다
   그 변화까지 1.2초에 걸쳐 따라와 요소가 위아래로 흔들린다 */
.is-ready [data-reveal] {
    transition-property: opacity, transform, filter, clip-path;
    transition-duration: var(--dur-reveal);
    transition-timing-function: var(--ease-out);
    transition-delay: var(--reveal-delay, 0s);
}

/* #################################### 02.T1 Line mask — 줄 단위 마스크 업 #################################### */
.is-ready [data-reveal='line'] {
    display: block;
    overflow: hidden;
}

.is-ready [data-reveal='line'] > span {
    display: block;
    transform: translateY(105%);
    transition: transform var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0s);
}

.is-ready [data-reveal='line'].is-in > span {
    transform: translateY(0);
}

/* #################################### 03.T2 Image scale — 프레임 고정, 내부만 확대 #################################### */
.is-ready [data-reveal='scale'] > img {
    transform: scale(1.12);
    transition: transform var(--dur-slow) var(--ease-out);
}

.is-ready [data-reveal='scale'].is-in > img {
    transform: scale(1);
}

/* #################################### 04.T3 Clip — 좌우에서 열린다 #################################### */
.is-ready [data-reveal='clip'] {
    clip-path: inset(0 20% 0 20%);
    transition: clip-path var(--dur-slow) var(--ease-out) var(--reveal-delay, 0s);
}

.is-ready [data-reveal='clip'].is-in {
    clip-path: inset(0);
}

/* #################################### 05.T6 Line draw — 1px 라인이 좌에서 우로 #################################### */
.is-ready [data-reveal='draw'] {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-slow) var(--ease-out) var(--reveal-delay, 0s);
}

.is-ready [data-reveal='draw'].is-in {
    transform: scaleX(1);
}

/* #################################### 06.T7 Word blur — 단어 단위 진입 #################################### */
.is-ready [data-reveal='word'] > span {
    opacity: 0;
    filter: blur(0.375rem);
    transition: opacity var(--dur-reveal) var(--ease-out), filter var(--dur-reveal) var(--ease-out);
}

.is-ready [data-reveal='word'].is-in > span {
    opacity: 1;
    filter: blur(0);
}

/* #################################### 06-1.섹션 연결 — 경계 없이 이어진다 #################################### */
/* 앞 섹션의 미디어가 다음 섹션까지 물려 내려오며 폭·비율이 바뀐다.
   섹션마다 잘라 보이지 않게 하는 것이 목적이다.
   GPU 레이어(will-change)는 JS 가 트리거 진입 시에만 부여하고 이탈 시 해제한다. */
.mua-bridge {
    position: relative;
    z-index: var(--z-base);
}

/* 스크롤 진행에 따라 좌우가 열리며 다음 섹션으로 넘어간다 */
.is-ready .mua-bridge-media {
    clip-path: inset(0 var(--bridge-inset, 12%));
    transition: clip-path var(--dur-slow) var(--ease-out);
}

/* #################################### 06-2.T8 Up — 아래에서 올라오며 든다 #################################### */
/* 글·카드·줄처럼 판이 큰 것에 쓴다. 사진은 clip, 제목 한 줄은 line 이 맡는다 */
.is-ready [data-reveal='up'] {
    opacity: 0;
    transform: translateY(var(--reveal-rise));
}

.is-ready [data-reveal='up'].is-in {
    opacity: 1;
    transform: translateY(0);
}

/* #################################### 07.Stagger — 순차 지연 #################################### */
.is-ready [data-stagger] > * {
    --reveal-delay: calc(var(--stagger) * var(--i, 0));
}

/* 형제 차례를 매긴다 — 마크업에 번호를 적지 않아도 선 순서대로 한 칸씩 늦는다 */
.is-ready [data-stagger] > :nth-child(1) { --i: 0; }
.is-ready [data-stagger] > :nth-child(2) { --i: 1; }
.is-ready [data-stagger] > :nth-child(3) { --i: 2; }
.is-ready [data-stagger] > :nth-child(4) { --i: 3; }
.is-ready [data-stagger] > :nth-child(5) { --i: 4; }
.is-ready [data-stagger] > :nth-child(6) { --i: 5; }
.is-ready [data-stagger] > :nth-child(n + 7) { --i: 6; }

/* #################################### 08.Reduced motion #################################### */
@media (prefers-reduced-motion: reduce) {
    .is-ready [data-reveal] {
        clip-path: none;
        opacity: 1;
        filter: none;
        transform: none;
    }

    /* 잠금 화면은 풀어서 영상을 여는 연출이다 — 그 연출이 서지 않으면 안내문만 남아
       같은 자리에 겹쳐 있는 본문 글줄과 포개진다(실측: 글꼴 200% 에서 두 줄과 겹침) */
    .mua-main-space-lock {
        display: none;
    }

    /* 굴린 자리에 맞춰 켜 주던 것들 — 그 일을 맡은 스크립트가 아예 서지 않으므로
       숨긴 채로 남는다. 움직임을 줄인 사람에게도 글은 다 보여야 하니 처음부터 띄운다 */
    .is-ready .mua-fade,
    .is-ready .mua-main-space-line,
    .is-ready [data-seq] > *,
    .is-ready [data-seq] [data-seq-copy],
    .is-ready [data-seq] .mua-ct-step-item,
    .is-ready [data-seq] .mua-pf-fold-item {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* 스크립트가 서지 못하면 영상이 열리지 않는다 — 그 위에 얹으려던 흰 글씨가
   흰 바탕에 그대로 남아 읽히지 않으므로, 바탕이 없는 동안에는 본문 색으로 돌린다 */
html:not(.is-ready) .mua-on-media {
    color: var(--color-ink);
    text-shadow: none;
}

/* 잠금 화면은 풀어야 영상이 열리는 연출이다 — 풀어 줄 손이 없으면 안내문만 남아
   같은 자리에 겹쳐 둔 본문 글줄과 포개진다(실측: 320 · 글꼴 200% 에서 두 줄과 겹침) */
html:not(.is-ready) .mua-main-space-lock {
    display: none;
}

/* #################################### 08.Print #################################### */
/* 종이에는 손으로 만지는 것이 남을 자리가 없다 — 고정 바·드로어·영상은 빼고 글과 사진만 남긴다.
   맨 마지막에 두어야 앞 파일의 규칙을 덮는다. 클래스 하나짜리 규칙과 겨루므로
   `[class]` 를 끼워 셈을 맞춘다 */
@media print {
    .mua-header,
    .mua-topnav,
    .mua-menu,
    .mua-quick,
    .mua-overlay,
    .mua-flow-nav,
    .mua-loader,
    .mua-vplay,
    .mua-btn,
    .mua-main-space-lock,
    .mua-cookie,
    .skip-link,
    video {
        display: none;
    }

    /* 영상이 빠진 자리에 얹혀 있던 흰 글씨는 종이에서 바탕과 같은 색이 된다 */
    .mua-on-media {
        color: var(--color-ink);
        text-shadow: none;
    }

    /* 가로로 눕던 메인도 종이에서는 위에서 아래로 읽는다.
       화면을 채우려고 자리를 띄워 두던 무대·글줄도 흐름에 되돌린다 —
       그대로 두면 빈 자리만 남고 글이 겹쳐 찍힌다 */
    .mua-main,
    .mua-main-panel,
    .is-flow .mua-main-hero,
    .mua-main-hero-stage,
    .is-ready .mua-main-hero-stage,
    .mua-main-space-stage,
    .mua-main-space-media,
    .mua-main-space-text {
        position: static;
        width: 100%;
        height: auto;
        padding-top: 0;
        overflow: visible;
    }

    /* 등장 대기 상태로 멈춰 있으면 종이에 빈 자리로 남는다 — 모두 드러낸 채로 찍는다.
       기다리게 만드는 규칙들이 셀렉터를 겹쳐 쓰므로, 그 자리들을 그대로 짚어 되돌린다 */
    body :is([class], span, em, strong, input, p, li, a, button, div),
    .is-priming [data-reveal] > *,
    .is-ready [data-reveal],
    .is-ready [data-reveal='word'] > span,
    .is-ready .mua-fade,
    .is-ready .mua-main-space-line,
    .is-ready [data-seq] > *,
    .is-ready [data-seq] [data-seq-copy],
    .is-ready [data-seq] .mua-pf-fold-item,
    .is-ready [data-seq] .mua-ct-step-item,
    .mua-main-hero-title > [data-reveal],
    .mua-main-hero-title > [data-reveal] > span,
    .is-ready .mua-main-hero-title > [data-reveal],
    .is-ready .mua-main-hero-title > [data-reveal] > span,
    .is-ready .mua-main-hero-stage,
    [data-seq] [data-seq-copy],
    [data-seq] [data-seq-img] {
        animation: none;
        transition: none;
        opacity: 1;
        transform: none;
        filter: none;
        visibility: visible;
        clip-path: none;
    }

    /* 옆으로 굴리던 띠도 종이에서는 위에서 아래로 쌓는다 —
       그대로 두면 첫 칸만 찍히고 나머지가 종이 밖으로 잘려 나간다 */
    .mua-rail {
        display: block;
        overflow: visible;
    }

    .mua-style-rail-item,
    .mua-mag-book {
        width: 100%;
    }

    /* 잉크를 아끼되 글은 또렷하게 */
    body {
        background: var(--color-bg);
        color: var(--color-ink);
    }

    /* 링크 주소를 함께 남긴다 — 종이에서는 눌러 볼 수 없다.
       주소는 띄어쓰기가 없어 좁은 종이에서 한 덩어리로 삐져나간다 — 어디서든 꺾이게 둔다 */
    .mua-sub-content a[href^="http"]::after {
        content: ' (' attr(href) ')';
        font-size: var(--fs-caption);
        overflow-wrap: anywhere;
    }
}