@charset "utf-8";

/* ==========================================================================
   메인 — 히어로 인트로 영상 (A안: 시네마틱 오프닝 + 스크롤 축소)

   상태 클래스 (.film 에 붙는다)
     film--intro : 오프닝 연출 대상. 막이 닫힌 상태에서 시작한다 (뷰 인라인 스크립트)
     is-ready    : 오프닝 시작 (영상 재생 시작 / 정지 화면 로드 / 2.5초 중 먼저)
     film--pin   : 스크롤 축소 사용. 섹션이 길어지고 무대가 고정된다 (main_film.js)
     is-playing  : 배경 영상이 실제로 재생 중 → 정지 화면 위로 영상을 드러낸다
     is-paused   : 사용자가 일시정지함

   --p : 스크롤 진행률 0~1. main_film.js 가 넣는다
   ========================================================================== */

.film {
    --header-h: 60px;
    /* 주소창이 들락날락해도 높이가 출렁이지 않게 svh(가장 작은 뷰포트)를 쓴다.
       dvh 는 스크롤 중에 값이 바뀌어 고정된 무대가 덜컥거린다 */
    --film-h: max(480px, calc(100vh - var(--header-h)));
    --film-pin: 0px;
    --inset-x: 5vw;
    --inset-y: 7%;
    --p: 0;

    position: relative;
    height: calc(var(--film-h) + var(--film-pin));
    background: var(--color-bg);
}

@supports (height: 100svh) {
    .film { --film-h: max(480px, calc(100svh - var(--header-h))); }
}

.film--pin { --film-pin: 55vh; }

.film__stage {
    position: sticky;
    top: var(--header-h);
    height: var(--film-h);
    overflow: hidden;
    color: var(--color-inverse-fg);
}

/* 영상 액자 — 스크롤하면 사방이 줄어들며 둥근 액자가 된다 */
.film__frame {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--color-inverse-bg);
    clip-path: inset(
        calc(var(--p) * var(--inset-y))
        calc(var(--p) * var(--inset-x))
        round calc(var(--p) * 20px)
    );
}

.film__poster,
.film__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: var(--film-focus, 50% 50%);
    /* 무채색 UI와 어울리도록 약하게 탈색 + 대비 보정 */
    filter: grayscale(.18) contrast(1.06) brightness(.95);
}

.film__video {
    opacity: 0;
    transition: opacity .8s ease;
}

.film.is-playing .film__video { opacity: 1; }

/* 오프닝 줌 아웃 — 막이 열리는 동안 화면이 살짝 물러난다 */
.film--intro .film__poster,
.film--intro .film__video {
    transform: scale(1.14);
    transition: transform 2.6s cubic-bezier(.22, .61, .36, 1) .5s, opacity .8s ease;
}

.film--intro.is-ready .film__poster,
.film--intro.is-ready .film__video { transform: scale(1); }

.film__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(10, 10, 10, .45) 0%,
            rgba(10, 10, 10, .08) 40%,
            rgba(10, 10, 10, .78) 100%);
}

/* 오프닝 막 ----------------------------------------------------------------- */

.film__curtain {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.film--intro .film__curtain { display: block; }

.film__curtain-half {
    position: absolute;
    left: 0;
    right: 0;
    height: 50.5%;   /* 가운데 실금이 비치지 않게 살짝 겹친다 */
    background: var(--color-inverse-bg);
    transition: transform 1.25s cubic-bezier(.77, 0, .18, 1) .75s;
}

.film__curtain-half--top    { top: 0; }
.film__curtain-half--bottom { bottom: 0; }

.film__curtain-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, .8);
    transform: scaleX(0);
    transition: transform .7s cubic-bezier(.65, 0, .35, 1) .1s, opacity .3s ease .8s;
}

.film--intro.is-ready .film__curtain-line         { transform: scaleX(1); opacity: 0; }
.film--intro.is-ready .film__curtain-half--top    { transform: translateY(-100%); }
.film--intro.is-ready .film__curtain-half--bottom { transform: translateY(100%); }

/* 텍스트 ------------------------------------------------------------------- */

.film__inner {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    margin: 0 auto;
    padding-bottom: 92px;
    /* 스크롤하면 위로 빠지며 사라진다 */
    opacity: calc(1 - var(--p) * 2.2);
    transform: translateY(calc(var(--p) * -56px));
}

.film__eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .18em;
    color: rgba(255, 255, 255, .75);
}

.film__title {
    margin-top: 14px;
    font-size: 52px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .3);
}

/* 줄 단위로 아래에서 밀려 올라온다 */
.film__line {
    display: block;
    overflow: hidden;
    padding-bottom: .06em;   /* 글자 아랫부분이 잘리지 않게 */
}

.film__line > span { display: block; }

.film__desc {
    max-width: 560px;
    margin: 16px 0 32px;
    font-size: 18px;
    color: rgba(255, 255, 255, .85);
}

.film__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* 영상 보기 — 투명 바탕 + 흰 테두리 */
.film__watch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 26px 0 22px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-inverse-fg);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 2px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.film__watch:hover {
    background: var(--color-bg);
    color: var(--color-fg);
    border-color: var(--color-bg);
}

.film__watch:focus-visible,
.film__toggle:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
}

.film__watch-icon {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent currentColor;
}

/* 오프닝 순서: 선(0.1s) → 막(0.75s) → 문구(1.2s~) */
.film--intro .film__eyebrow,
.film--intro .film__desc,
.film--intro .film__actions {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
}

.film--intro .film__line > span {
    transform: translateY(105%);
    transition: transform 1s cubic-bezier(.22, .61, .36, 1);
}

.film--intro.is-ready .film__eyebrow,
.film--intro.is-ready .film__desc,
.film--intro.is-ready .film__actions { opacity: 1; transform: none; }

.film--intro.is-ready .film__line > span { transform: none; }

.film--intro.is-ready .film__eyebrow                   { transition-delay: 1.2s; }
.film--intro.is-ready .film__line:nth-child(1) > span  { transition-delay: 1.3s; }
.film--intro.is-ready .film__line:nth-child(2) > span  { transition-delay: 1.42s; }
.film--intro.is-ready .film__desc                      { transition-delay: 1.65s; }
.film--intro.is-ready .film__actions                   { transition-delay: 1.8s; }

/* 일시정지 버튼 ------------------------------------------------------------ */

.film__toggle {
    position: absolute;
    right: max(var(--gutter), env(safe-area-inset-right, 0px));
    bottom: 20px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 50%;
    opacity: calc(1 - var(--p) * 2.2);
}

.film__toggle[hidden] { display: none; }

/* 일시정지 아이콘 (막대 두 개) */
.film__toggle-icon {
    width: 10px;
    height: 12px;
    border-left: 3px solid #FFFFFF;
    border-right: 3px solid #FFFFFF;
}

/* 재생 아이콘 (삼각형) */
.film.is-paused .film__toggle-icon {
    width: 0;
    height: 0;
    margin-left: 3px;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #FFFFFF;
}

/* 스크롤 안내 -------------------------------------------------------------- */

.film__cue {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 2;
    padding-bottom: 46px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .24em;
    color: rgba(255, 255, 255, .7);
    transform: translateX(-50%);
    opacity: calc(1 - var(--p) * 6);
}

.film--pin .film__cue { display: block; }

/* 아래로 흐르는 실선 */
.film__cue::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, .8);
    transform-origin: top;
    animation: film-cue 2s cubic-bezier(.65, 0, .35, 1) infinite;
}

@keyframes film-cue {
    0%   { transform: scaleY(0); transform-origin: top; }
    45%  { transform: scaleY(1); transform-origin: top; }
    55%  { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

/* 전체 영상 모달 ----------------------------------------------------------- */

.film-modal {
    width: min(var(--max-width), calc(100vw - 32px));
    max-width: none;
    max-height: none;
    margin: auto;
    padding: 0;
    border: 0;
    background: #000000;
    color: var(--color-inverse-fg);
    overflow: visible;
}

.film-modal::backdrop { background: rgba(10, 10, 10, .94); }

.film-modal[open] { animation: film-modal-in .35s ease; }

@keyframes film-modal-in {
    from { opacity: 0; transform: scale(.97); }
    to   { opacity: 1; transform: none; }
}

.film-modal__video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 82vh;
    max-height: 82dvh;
    background: #000000;
}

/* X 아이콘. 화면 우상단에 고정 (노치 안쪽) */
.film-modal__close {
    position: fixed;
    top: max(12px, env(safe-area-inset-top, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    width: 44px;
    height: 44px;
}

.film-modal__close::before,
.film-modal__close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 2px;
    background: #FFFFFF;
}

.film-modal__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.film-modal__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.film-modal__close:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}

/* 모바일 ------------------------------------------------------------------- */

@media (max-width: 640px) {
    .film {
        --inset-x: 16px;
        --inset-y: 5%;
    }

    .film--pin { --film-pin: 40vh; }

    .film__inner { padding-bottom: 84px; }
    .film__eyebrow { font-size: 12px; }
    .film__title { font-size: 32px; }
    .film__desc { font-size: 15px; margin-bottom: 24px; }

    /* 두 버튼을 반씩 나눠 한 줄에 */
    .film__actions .btn,
    .film__watch {
        flex: 1 1 0;
        padding: 0 12px;
    }

    .film__toggle { bottom: 20px; }

    /* 일시정지 버튼과 겹치지 않도록 안내는 숨긴다 (스크롤은 손가락이 먼저 안다) */
    .film--pin .film__cue { display: none; }

    .film-modal { width: 100vw; }
}

/* 가로 모드처럼 세로가 짧을 때 — 고정 연출 없이 일반 히어로처럼 */
@media (max-height: 560px) and (orientation: landscape) {
    .film,
    .film--pin { --film-pin: 0px; }

    .film { --film-h: 400px; }
    .film__inner { padding-bottom: 72px; }
    .film__title { font-size: 28px; }
    .film__desc { margin-bottom: 20px; }
    .film__cue,
    .film--pin .film__cue { display: none; }
}

/* 모션 최소화 — 오프닝·스크롤 축소·스크롤 안내 없음 (자동재생 여부는 JS 가 판단) */
@media (prefers-reduced-motion: reduce) {
    .film--pin { --film-pin: 0px; }
    .film { --p: 0 !important; }
    .film__video { transition: none; }
    .film__cue::after { animation: none; }
    .film-modal[open] { animation: none; }
}