@charset "UTF-8";
/* ----------------------------------------------
 * HanbitSoft Infra Development Team
 * 아일리스 3차 업데이트 티저 Stylesheet - item
 * Author - sgp8116@hanbitsoft.co.kr 261029
------------------------------------------------- */
/* Item: 배경 점등 → 패널 점등 → 아이템 소환, 보이는 비율에 따른 정전 (js/sections.js Item)
   영상이 없는 섹션. 섹션이 --start-ratio 만큼 보이면 배경 그림이 실루엣에서 깜빡이며 켜지고, 이어서 패널이 story 와 같은 순서로 켜진다.
   본문 사이의 아이템 넷은 한 줄씩 떠오르며 아이콘이 섬광과 함께 커졌다 자리 잡고, 켜진 뒤엔 천천히 떠다닌다.
-------------------------------------------------------------- */
/* 보이는 비율은 body 의 공통값 (.section-item 에서 덮어쓸 수 있다) */
/* 배경 그림: 정전 때 꺼지고(opacity) 점등 때 깜빡이며 켜지도록(filter) 섹션 배경에서 떼어 ::before 로 깐다. 패널(.section-content) 아래 */
.section-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    /* 그림 위에 경계 그러데이션(.section 의 --section-fade)을 겹친다 */
    background:
        var(--section-fade),
        url(../images/item/bg.webp) no-repeat 50% 0 / cover;
}
.section-item .section-content {
    display: flex;
    align-items: center;
    justify-content: center;
}
.section-item .section-content .content-wrapper {
    --headline-image: url(../images/item/headline.webp);
    --panel-frame-image: url(../images/item/content-frame.webp);
    /* 색은 공통 기본값(금색) 그대로 */
    width: 962px;
    height: 544px; /* content-frame.webp 크기 */
}
.section-item .section-content .content-wrapper .item-list {
    display: flex;
    justify-content: space-between;
    width: 612px;
}
.section-item .section-content .content-wrapper .item-list li {
    width: 106px;
}
.section-item .section-content .content-wrapper .item-list li .item {
    background-repeat: no-repeat;
    background-position: 0 0;
    display: block;
    height: 107px;
}
.section-item
    .section-content
    .content-wrapper
    .item-list
    li:nth-child(1)
    .item {
    background-image: url(../images/item/item-coat.webp);
}
.section-item
    .section-content
    .content-wrapper
    .item-list
    li:nth-child(2)
    .item {
    background-image: url(../images/item/item-leather-armor.webp);
}
.section-item
    .section-content
    .content-wrapper
    .item-list
    li:nth-child(3)
    .item {
    background-image: url(../images/item/item-metal-armor.webp);
}
.section-item
    .section-content
    .content-wrapper
    .item-list
    li:nth-child(4)
    .item {
    background-image: url(../images/item/item-robe.webp);
}

/* item 점등 (html[data-item-stage]: wait → on, js/sections.js Item)
   - wait: 섹션이 --start-ratio 만큼 보이기 전. 배경은 실루엣, 패널 숨김
   - on:   배경이 실루엣에서 섬광·깜빡임과 함께 켜지고(item-bg-on), --item-panel-delay 뒤 패널이 story 와 같은 순서로 켜진다:
           금테 → 몸체 섬광·깜빡임·빛줄기 → 제목·인용·본문·아이템 넷·인용·본문이 한 줄씩 떠오름.
           아이템 줄은 떠오르기 시작하고 --item-icon-lag 뒤 아이콘이 섬광과 함께 커졌다 자리 잡고(item-icon-on), 끝나면 천천히 떠다닌다(item-icon-float) */
html[data-item-stage] .section-item::before {
    filter: var(--off-filter);
}
html[data-item-stage="on"] .section-item::before {
    animation: item-bg-on var(--item-bg-on) ease-out both;
}
html[data-item-stage] .section-item .content-wrapper::before,
html[data-item-stage] .section-item .content-wrapper::after,
html[data-item-stage] .section-item .content-wrapper > :not(.item-list),
html[data-item-stage] .section-item .item-list li,
html[data-item-stage] .section-item .item-list li .item {
    opacity: 0;
}
html[data-item-stage="on"] .section-item .content-wrapper::before {
    animation: item-frame-draw var(--item-frame-draw) linear both;
    animation-delay: var(--item-panel-delay);
}
html[data-item-stage="on"] .section-item .content-wrapper::after {
    animation:
        story-panel-on var(--story-panel-on) ease-out both,
        story-panel-glint var(--story-panel-glint) ease-out both;
    animation-delay:
        calc(var(--item-panel-delay) + var(--item-body-delay)),
        calc(var(--item-panel-delay) + var(--item-body-delay) + 0.1s);
}
/* 줄 떠오름: 아이템 목록(.item-list)은 통째가 아니라 li 하나하나가 한 줄이다. 줄 순서(--n)는 제목 0, 인용 1, 본문 2, 아이템 3~6, 인용 7, 본문 8.
   떠오르기 시작하는 때(--line-delay)는 아이콘이 li 에서 물려받아 제 때를 잡는다 */
html[data-item-stage="on"] .section-item .content-wrapper > :not(.item-list),
html[data-item-stage="on"] .section-item .item-list li {
    --line-delay: calc(
        var(--item-panel-delay) + var(--item-line-start) +
            var(--story-line-step) * var(--n, 0)
    );
    animation: story-line-in var(--story-line-in) ease-out both;
    animation-delay: var(--line-delay);
}
html[data-item-stage] .section-item .content-wrapper > :nth-child(1) {
    --n: 0;
}
html[data-item-stage] .section-item .content-wrapper > :nth-child(2) {
    --n: 1;
}
html[data-item-stage] .section-item .content-wrapper > :nth-child(3) {
    --n: 2;
}
html[data-item-stage] .section-item .item-list li:nth-child(1) {
    --n: 3;
}
html[data-item-stage] .section-item .item-list li:nth-child(2) {
    --n: 4;
}
html[data-item-stage] .section-item .item-list li:nth-child(3) {
    --n: 5;
}
html[data-item-stage] .section-item .item-list li:nth-child(4) {
    --n: 6;
}
html[data-item-stage] .section-item .content-wrapper > :nth-child(5) {
    --n: 7;
}
html[data-item-stage] .section-item .content-wrapper > :nth-child(6) {
    --n: 8;
}
/* 아이콘: 제 줄이 떠오르기 시작하고 --item-icon-lag 뒤 섬광과 함께 커졌다가 자리 잡고, 끝나면 천천히 떠다닌다.
   떠다니는 주기는 줄 간격(--story-line-step)만큼씩 어긋나 왼쪽부터 차례로 물결친다 */
html[data-item-stage="on"] .section-item .item-list li .item {
    --icon-delay: calc(var(--line-delay) + var(--item-icon-lag));
    animation:
        item-icon-on var(--item-icon-on) ease-out both,
        item-icon-float var(--item-icon-float) ease-in-out infinite;
    animation-delay:
        var(--icon-delay), calc(var(--icon-delay) + var(--item-icon-on));
}
/* 움직임 줄이기(prefers-reduced-motion)를 켠 환경: 소환까지만 하고 떠다니지 않는다 (영상도 정지 배경만 보인다, js/video.js 정지 모드) */
@media (prefers-reduced-motion: reduce) {
    html[data-item-stage="on"] .section-item .item-list li .item {
        animation: item-icon-on var(--item-icon-on) ease-out both;
        animation-delay: var(--icon-delay);
    }
}
/* 금테 그리기: story-frame-draw 와 같은 방식. 구간은 item 패널의 변 길이(가로 964 : 세로 546)에 비례해 선 속도를 같게 맞췄다 */
@keyframes item-frame-draw {
    0% {
        opacity: 1;
        background-size:
            0 3px,
            3px 0,
            0 3px,
            3px 0;
    }
    31.9% {
        background-size:
            100% 3px,
            3px 0,
            0 3px,
            3px 0; /* 위 */
    }
    50% {
        background-size:
            100% 3px,
            3px 100%,
            0 3px,
            3px 0; /* 오른쪽 */
    }
    81.9% {
        background-size:
            100% 3px,
            3px 100%,
            100% 3px,
            3px 0; /* 아래 */
    }
    100% {
        opacity: 1;
        background-size:
            100% 3px,
            3px 100%,
            100% 3px,
            3px 100%; /* 왼쪽 */
    }
}
/* 아이콘 소환: 작고 하얗게 번쩍이며 나타나 조금 커졌다가 제 크기로 자리 잡는다. 후광(drop-shadow)은 패널 금색(--panel-light) */
@keyframes item-icon-on {
    0% {
        opacity: 0;
        transform: scale(0.4);
        filter: brightness(2.5) drop-shadow(0 0 0 transparent);
    }
    35% {
        opacity: 1;
        transform: scale(1.15);
        filter: brightness(1.8)
            drop-shadow(
                0 0 16px color-mix(in srgb, var(--panel-light) 70%, transparent)
            );
    }
    60% {
        transform: scale(0.96);
        filter: brightness(1)
            drop-shadow(
                0 0 10px color-mix(in srgb, var(--panel-light) 45%, transparent)
            );
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1) drop-shadow(0 0 0 transparent);
    }
}
/* 떠다니기: 위로 살짝 올랐다가 내려온다 */
@keyframes item-icon-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

/* item 정전 (html[data-item-power="off"]): 섹션이 --power-ratio 보다 덜 보이면 배경이 한 번에 꺼지고 패널은 실루엣으로 남는다.
   다시 그만큼 보이면 바로 켜진다. story·field 와 같은 규칙. (js/sections.js Item) */
html[data-item-power="off"] .section-item::before {
    opacity: 0; /* 트랜지션을 두지 않아 정전처럼 한 번에 꺼지고 켜진다 */
}
html[data-item-power="off"] .section-item .content-wrapper {
    filter: var(--off-filter);
}