/* =========================================================
   홈 모션그래픽 — "내 회사가 자라는 모습"을 상상하게 하는 연출
   (히어로는 모션 없이 정적으로 유지)
   3) 성장 장면: 매장 → 자체 브랜드 → 우리 공장 → 우리 사옥
   4) 성장 지도 계단이 아래에서 차오름
   ※ 숫자·금액은 쓰지 않습니다. 움직임 줄이기 설정 사용자에게는 정지 화면.
   ========================================================= */

/* ---------- 1~2. 히어로 ----------
   신뢰를 위해 첫 화면(대표 사진 영역)에는 모션을 두지 않습니다.
   성장 연출은 바로 아래 '상상해 보세요' 섹션에서만 보여 줍니다. */

/* ---------- 3. 성장 장면 섹션 ---------- */
.imagine { background: var(--navy); color: #DCE6F2; overflow: hidden; }
.imagine .section-head h2 { color: var(--white); }
.imagine .section-head p { color: #C3D2E5; }
.imagine .eyebrow { color: var(--accent); }
.imagine-stage { position: relative; background: linear-gradient(180deg, #163C6E 0%, #12335F 70%); border-radius: 20px; border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.imagine-svg { display: block; width: 100%; height: auto; }

/* 장면 전환 */
.imagine-svg .scene { opacity: 0; transform: translateY(18px) scale(.96); transform-box: view-box; transform-origin: 400px 300px; transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.imagine-svg .scene.is-on { opacity: 1; transform: none; }

/* 장면 요소 색 */
.imagine-svg .bld { fill: #FFFFFF; }
.imagine-svg .bld-soft { fill: #DCE6F2; }
.imagine-svg .roof { fill: var(--green); }
.imagine-svg .deep { fill: #1A4479; }
.imagine-svg .navy { fill: #12335F; }
.imagine-svg .gold { fill: var(--accent); }
.imagine-svg .gray-box { fill: #8FA3BD; }
.imagine-svg .sign-text { fill: #FFFFFF; font: 800 13px Pretendard, sans-serif; letter-spacing: .08em; }
.imagine-svg .sign-text.dark { fill: #12335F; }
.imagine-svg .skyline { fill: rgba(255,255,255,.05); }
.imagine-svg .ground { fill: #0B2241; }
.imagine-svg .track { stroke: rgba(255,255,255,.15); stroke-width: 3; stroke-linecap: round; }
.imagine-svg .track-dot { fill: #1A4479; stroke: rgba(255,255,255,.3); stroke-width: 2; transition: fill .5s; }
.imagine-svg .track-dot.is-done { fill: var(--accent); stroke: var(--accent); }
.imagine-svg .track-label { fill: #8FA3BD; font: 700 13px Pretendard, sans-serif; transition: fill .5s; }
.imagine-svg .track-label.is-done { fill: #FFFFFF; }
.imagine-svg .path-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 560; stroke-dashoffset: 560; transition: stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1); opacity: .9; }
.imagine-svg .path-dot { fill: var(--accent); transition: transform 1.2s cubic-bezier(.4,0,.2,1); }

/* 반복 애니메이션 */
.imagine-svg .smoke { fill: rgba(255,255,255,.55); animation: smoke 3.2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.imagine-svg .smoke.s2 { animation-delay: 1.05s; }
.imagine-svg .smoke.s3 { animation-delay: 2.1s; }
@keyframes smoke { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 20% { opacity: .9; } 100% { transform: translate(18px, -60px) scale(1.6); opacity: 0; } }

.imagine-svg .belt-box { animation: belt 4s linear infinite; }
.imagine-svg .belt-box.b2 { animation-delay: -1.33s; }
.imagine-svg .belt-box.b3 { animation-delay: -2.66s; }
@keyframes belt { from { transform: translateX(0); } to { transform: translateX(400px); } }

.imagine-svg .win { fill: #3B5B86; animation: winLight 4.8s ease-in-out infinite; }
@keyframes winLight { 0%, 20% { fill: #3B5B86; } 35%, 85% { fill: var(--accent); } 100% { fill: #3B5B86; } }

.imagine-svg .flag { fill: var(--accent); transform-box: fill-box; transform-origin: left center; animation: flag 1.6s ease-in-out infinite; }
@keyframes flag { 0%, 100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(-6deg) scaleX(.9); } }

.imagine-svg .sparkle { fill: var(--accent); transform-box: fill-box; transform-origin: center; animation: sparkle 2s ease-in-out infinite; }
.imagine-svg .sparkle.k2 { animation-delay: .7s; }
.imagine-svg .sparkle.k3 { animation-delay: 1.4s; }
@keyframes sparkle { 0%, 100% { transform: scale(.4); opacity: .2; } 50% { transform: scale(1.1); opacity: 1; } }

.imagine-svg .bounce { animation: bounce 2.4s ease-in-out infinite; transform-box: fill-box; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* 캡션 + 타임라인 */
.imagine-caption { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-3); align-items: end; padding: var(--sp-4); border-top: 1px solid rgba(255,255,255,.08); }
.imagine-caption .cap-stage { display: inline-block; font-size: .85rem; font-weight: 800; color: var(--navy); background: var(--accent); border-radius: 999px; padding: .2rem .7rem; margin-bottom: .6rem; }
.imagine-caption h3 { color: var(--white); font-size: var(--fs-h3); margin-bottom: .35rem; }
.imagine-caption p { color: #C3D2E5; }
.imagine-caption .cap-text { min-height: 7.2rem; transition: opacity .4s; }
.imagine-caption .cap-text.is-fading { opacity: 0; }
.imagine-steps { display: flex; gap: .5rem; flex-wrap: wrap; }
.imagine-steps button {
    min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.25);
    background: transparent; color: #DCE6F2; font-weight: 700; position: relative; overflow: hidden;
}
.imagine-steps button[aria-selected="true"] { background: var(--white); color: var(--navy); border-color: var(--white); }
.imagine-steps button .bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--accent); }
.imagine-steps button[aria-selected="true"] .bar { animation: stepBar var(--step-ms, 4200ms) linear forwards; }
.imagine.is-paused .imagine-steps button .bar { animation-play-state: paused; }
@keyframes stepBar { to { width: 100%; } }
.imagine-note { margin-top: var(--sp-2); font-size: .85rem; color: #8FA3BD; }
.imagine-cta { margin-top: var(--sp-4); }

/* ---------- 브랜드 필름(로고 영상) ---------- */
.brand-film-section { background: var(--white); }
.brand-film-grid { display: grid; grid-template-columns: .9fr 1.3fr; gap: var(--sp-5); align-items: center; }
.brand-film-copy h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-2); }
.brand-film-copy > p { color: var(--muted); font-size: 1.1rem; margin-bottom: var(--sp-3); }
.logo-meaning { display: grid; gap: .9rem; }
.logo-meaning li { display: flex; align-items: center; gap: .9rem; color: var(--muted); font-size: var(--fs-small); line-height: 1.5; }
.logo-meaning strong { display: block; color: var(--navy); font-size: 1.02rem; }
.lm-mark { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; background: var(--ivory); display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding: 9px; }
.lm-bars i { width: 6px; border-radius: 3px; background: var(--navy); }
.lm-bars i:nth-child(1) { height: 40%; } .lm-bars i:nth-child(2) { height: 65%; } .lm-bars i:nth-child(3) { height: 100%; background: var(--accent-dark); }
.lm-person { flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.lm-person i:nth-child(1) { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-dark); }
.lm-person i:nth-child(2) { width: 16px; height: 14px; border-radius: 8px 8px 3px 3px; background: var(--accent-dark); }
.lm-diamond { align-items: center; }
.lm-diamond i { width: 16px; height: 16px; background: var(--accent); transform: rotate(45deg); border-radius: 2px; box-shadow: 0 0 10px rgba(255,201,60,.8); }
.lm-building i { width: 20px; height: 26px; background: linear-gradient(180deg, var(--navy) 0%, #5B6B80 100%); clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 100%, 0 100%); }

.brand-film-media { margin: 0; }
.brand-film-media figcaption { margin-top: .6rem; text-align: right; }
.brand-film-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #FFFFFF; border: 1px solid var(--line); box-shadow: var(--shadow); }
.brand-film-frame video, .brand-film-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; background: #FFFFFF; }
.film-controls { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; }
.film-btn {
    display: inline-flex; align-items: center; gap: .4rem; min-width: 44px; height: 44px; padding: 0 .85rem;
    border: 0; border-radius: 999px; background: rgba(18, 51, 95, .82); color: var(--white); font-weight: 700; font-size: .9rem;
    justify-content: center; backdrop-filter: blur(4px);
}
.film-btn:hover { background: var(--navy); }
.film-btn.is-on { background: var(--accent); color: var(--navy); }
.brand-film { margin-top: var(--sp-5); }
.brand-film .brand-film-frame { background: #0B2241; }

@media (max-width: 860px) {
    .brand-film-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
    .brand-film-media { order: -1; }
    .brand-film-frame { border-radius: 14px; }
}

/* ---------- 4. 성장 지도 계단 차오르기 ---------- */
.stairs.pre .stair { transform: scaleY(.25); transform-origin: bottom; opacity: .25; }
.stairs.go .stair { transform: none; opacity: 1; transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .5s, background .2s, border-color .2s, color .2s; }
.stairs.go .stair:nth-child(2) { transition-delay: .08s; } .stairs.go .stair:nth-child(3) { transition-delay: .16s; }
.stairs.go .stair:nth-child(4) { transition-delay: .24s; } .stairs.go .stair:nth-child(5) { transition-delay: .32s; }
.stairs.go .stair:nth-child(6) { transition-delay: .40s; } .stairs.go .stair:nth-child(7) { transition-delay: .48s; }

/* ---------- 반응형 ---------- */
@media (max-width: 860px) {
    .imagine-caption { grid-template-columns: 1fr; padding: var(--sp-3); }
    .imagine-caption .cap-text { min-height: 8.5rem; }
}
@media (max-width: 560px) {
    .imagine-steps { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .imagine-steps button { padding: 0 .5rem; font-size: .92rem; }
    .imagine-stage { border-radius: 14px; }
}

/* 움직임 줄이기 */
@media (prefers-reduced-motion: reduce) {
    .imagine-svg .smoke, .imagine-svg .belt-box,
    .imagine-svg .win, .imagine-svg .flag, .imagine-svg .sparkle, .imagine-svg .bounce { animation: none; }
    .imagine-svg .scene, .imagine-svg .path-line, .imagine-svg .path-dot { transition: none; }
    .imagine-steps button .bar { display: none; }
    .stairs.pre .stair { transform: none; opacity: 1; }
}