/* 솔인디자인 홈페이지 — 화면 움직임 (2026-10-09 대표님 확정, 모든 방문자에게 켬)
   html 에 fx 표시가 있을 때만 적용된다(index.html 이 붙인다). 표시가 없으면(?fx=0, 「움직임 줄이기」를 켠 기기) 예전 화면 그대로다. */
.fx { --fx-ease: cubic-bezier(.16, 1, .3, 1); }

/* 1. 처음 열 때: 검은 막 위에 회사 이름이 모였다가 막이 위로 걷힌다 */
.fx body::before { content: "SOLIN DESIGN"; position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: #000; font-size: clamp(17px, 2.2vw, 28px); font-weight: 700; pointer-events: none; animation: fx-curtain 2s var(--fx-ease) both; }
.fx body::after { content: ""; position: fixed; left: 50%; top: calc(50% + 32px); z-index: 201; width: 120px; height: 1px; margin-left: -60px; background: var(--accent); transform-origin: left; pointer-events: none; animation: fx-rule 2s var(--fx-ease) both; }
@keyframes fx-curtain {
  0% { letter-spacing: 1em; text-indent: 1em; color: rgba(245, 245, 247, 0); clip-path: inset(0); }
  45%, 68% { letter-spacing: .42em; text-indent: .42em; color: rgba(245, 245, 247, 1); clip-path: inset(0); }
  100% { letter-spacing: .42em; text-indent: .42em; color: rgba(245, 245, 247, 0); clip-path: inset(0 0 100% 0); }
}
@keyframes fx-rule { 0% { transform: scaleX(0); opacity: 1; } 50% { transform: scaleX(1); opacity: 1; } 68%, 100% { transform: scaleX(1); opacity: 0; } }

/* 2. 화면이 바뀔 때 부드럽게 나타난다 */
.fx .view { animation: fx-view .8s var(--fx-ease) both; }
@keyframes fx-view { from { opacity: 0; } to { opacity: 1; } }

/* 3. 위쪽 메뉴: 내려 읽을 때 숨고 올리면 나온다 + 얼마나 읽었는지 황동색 선 */
.fx .gnav { transition: transform .5s var(--fx-ease); }
.fx.fx-down:not(.lock) .gnav { transform: translateY(-100%); }
.fx .gnav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(var(--sp, 0)); transform-origin: left; }

/* 4. 첫 화면 사진: 내리면 살짝 커지면서 둥근 카드처럼 접힌다 */
.fx .hero { clip-path: inset(0 calc(var(--hp, 0) * 3.5%) calc(var(--hp, 0) * 6%) round calc(var(--hp, 0) * 44px)); }
.fx .hero-slide { transform: scale(calc(1 + var(--hp, 0) * .1)); }
.fx .hero-ctrl { opacity: calc(1 - var(--hp, 0) * 2.4); }

/* 5. 떠오르는 효과를 더 길고 부드럽게, 나란한 것은 차례로 */
.fx .rv { transform: translateY(34px); transition: opacity 1s var(--fx-ease), transform 1.1s var(--fx-ease); }
.fx .rv + .rv { transition-delay: .09s; }
.fx .rv + .rv + .rv { transition-delay: .18s; }
.fx .rv + .rv + .rv + .rv { transition-delay: .27s; }

/* 6. 제목: 낱말이 아래에서 하나씩 올라온다 (fx.js 가 낱말로 쪼갠다) */
.fx .fx-split.rv { opacity: 1; transform: none; transition: none; }
.fx .fx-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.fx .fx-w > i { display: inline-block; font-style: normal; transform: translateY(112%); transition: transform 1s var(--fx-ease); transition-delay: calc(var(--i) * 55ms); }
.fx .is-in .fx-w > i { transform: none; }
.fx .block-head .eyebrow.rv::before, .fx .pf-side .eyebrow.rv::before { content: ""; display: inline-block; width: 30px; height: 1px; margin-right: 12px; vertical-align: middle; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .9s .25s var(--fx-ease); }
.fx .block-head .eyebrow.rv.is-in::before, .fx .pf-side .eyebrow.rv.is-in::before { transform: scaleX(1); }

/* 7. 시공사례 카드: 사진이 아래에서 위로 열리고, 글은 조금 뒤에 따라온다 */
.fx .card.rv { opacity: 1; transform: none; transition-delay: 0s; }
.fx .card.rv .card-img { clip-path: inset(100% 0 0 0); transition: clip-path 1.15s var(--fx-ease); }
.fx .card.rv .card-img img { transform: scale(1.28); transition: transform 1.7s var(--fx-ease), opacity .3s; }
.fx .card.rv .card-row, .fx .card.rv .card-meta { opacity: 0; transform: translateY(14px); transition: opacity .8s .4s var(--fx-ease), transform .8s .4s var(--fx-ease); }
.fx .card.rv:nth-child(even) .card-img { transition-delay: .14s; }
.fx .card.rv.is-in .card-img { clip-path: inset(0); }
.fx .card.rv.is-in .card-img img { transform: none; }
.fx .card.rv.is-in .card-img:hover img { transform: scale(1.06); }
.fx .card.rv.is-in .card-row, .fx .card.rv.is-in .card-meta { opacity: 1; transform: none; }

/* 8. 숫자는 올라가며 세어진다 (자리가 흔들리지 않게 같은 폭 숫자) */
.fx .intro-stats b { font-variant-numeric: tabular-nums; }

/* 9. 건설업등록증 카드: 나타날 때 빛이 한 번 지나가고, 마우스를 올리면 기울어진다 */
.fx .cert { position: relative; overflow: hidden; }
.fx .cert.is-in { transition: transform .25s ease-out, opacity 1s var(--fx-ease); }
.fx .cert::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .1), transparent); pointer-events: none; }
.fx .cert.is-in::before { animation: fx-sweep 1.7s .6s var(--fx-ease) both; }
@keyframes fx-sweep { to { left: 130%; } }
.fx .cert::after { content: ""; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(201, 165, 111, .18), transparent 60%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.fx .cert:hover::after { opacity: 1; }

/* 10. 흐르는 글자 띠 (소개와 시공사례 사이). 화면을 내리면 조금 더 빨리 흐른다 */
.fx-mq { overflow: hidden; padding: 30px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fx-mq-s { transform: translate3d(calc(var(--ms, 0) * -1px), 0, 0); }
.fx-mq-in { display: flex; width: max-content; animation: fx-mq 46s linear infinite; }
.fx-mq-in span { display: flex; align-items: center; }
.fx-mq b { font-size: clamp(40px, 8vw, 112px); font-weight: 800; line-height: 1.15; letter-spacing: -.04em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(245, 245, 247, .36); }
.fx-mq b:nth-of-type(even) { color: var(--text); -webkit-text-stroke: 0; }
.fx-mq i { flex: none; width: 10px; height: 10px; margin: 0 clamp(20px, 3vw, 46px); border-radius: 50%; background: var(--accent); }
@keyframes fx-mq { to { transform: translate3d(-33.333%, 0, 0); } }

/* 11. 사진 위에서 따라다니는 둥근 표시 (마우스가 있는 PC 만) */
.fx-cur { position: fixed; left: 0; top: 0; z-index: 90; width: 84px; height: 84px; margin: -42px 0 0 -42px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #000; font-size: 12px; font-weight: 700; letter-spacing: .14em; pointer-events: none; scale: 0; transition: scale .35s var(--fx-ease); }
.fx-cur.on { scale: 1; }

/* 12. 영상·대표 사진은 화면을 내릴 때 천천히 따라 움직인다 (fx.js), 문의 구역 뒤에는 은은한 빛 */
.fx .player img, .fx .d-cover img { will-change: transform; }
.fx .contact { position: relative; overflow: hidden; }
.fx .contact > * { position: relative; }
.fx .contact::before { content: ""; position: absolute; left: 50%; top: 62%; width: 900px; height: 900px; margin: -450px 0 0 -450px; border-radius: 50%; background: radial-gradient(closest-side, rgba(201, 165, 111, .17), transparent); pointer-events: none; animation: fx-breathe 7s ease-in-out infinite alternate; }
@keyframes fx-breathe { from { transform: scale(.82); opacity: .55; } to { transform: scale(1.12); opacity: 1; } }

/* 13. 첫 화면 필름(html.fx2, film.js): 필름이 회사 이름으로 시작하므로 처음의 검은 막은 뺀다. 첫 화면의 사진 넘기기는 app.js 가 그리지 않는다 */
.fx2 body::before, .fx2 body::after { display: none; }
.fx2 .hero .fx-film { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; }