/* ── 모션 강화 (v2): 숫자 굴리기 · 글자 튀어나오기 · 선·빛·물결 ── */

/* 맨 위 진행 막대 */
.prog{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:560px;height:3px;z-index:70;background:rgba(255,255,255,.08)}
.prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#B08A3E,#F0D79C);box-shadow:0 0 10px rgba(240,215,156,.8)}

/* 숫자 슬롯 굴리기 */
.dg{display:inline-block;height:1em;overflow:hidden;vertical-align:top;line-height:1}
.dg .col{display:block;transition:transform 1.25s cubic-bezier(.2,1.25,.35,1)}
.dg .col span{display:block;height:1em}
.rolling{text-shadow:0 10px 26px rgba(0,0,0,.55)!important}
.land{animation:land .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes land{0%{transform:scale(1.22);filter:brightness(2.1)}100%{transform:none;filter:none}}
.spark{position:fixed;z-index:80;width:7px;height:7px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#fff6d8 0,#F0D79C 45%,rgba(217,184,119,0) 70%);transition:transform .9s cubic-bezier(.1,.7,.3,1),opacity .9s ease}

/* 제목 한 글자씩 */
.sp .w{display:inline-block;white-space:nowrap}
.sp .c{display:inline-block;opacity:0;transform:translateY(.55em) rotate(8deg) scale(.8);transition:opacity .5s ease,transform .6s cubic-bezier(.3,1.5,.5,1)}
.in .sp .c,.sp.in .c{opacity:1;transform:none}

/* 첫 화면: 패럴랙스 · 떠오르는 금빛 입자 · 제목 빛 훑기 */
.hero .bgw{position:absolute;inset:-4% 0 0 0;will-change:transform}
.hero .bgw .bg{inset:0}
.fx{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero h1{position:relative}
.hero h1 .sweep{display:none}
.hero h1.lit{animation:slam .7s .45s cubic-bezier(.3,1.5,.5,1) forwards,shimmer 4.2s 2.4s ease-in-out infinite}
@keyframes shimmer{0%,70%,100%{filter:none}80%{filter:brightness(1.45) drop-shadow(0 0 18px rgba(255,226,160,.75))}}
.hero .chip{animation:dropin .7s .2s cubic-bezier(.3,1.5,.5,1) forwards!important;transform:translateY(-30px)}
@keyframes dropin{to{opacity:1;transform:none}}
.hero .sub{animation:upin .7s 1.6s cubic-bezier(.2,.8,.2,1) forwards!important;transform:translateY(22px)}
.hero .name{animation:upin .7s 1.85s cubic-bezier(.2,.8,.2,1) forwards!important;transform:translateY(22px)}
@keyframes upin{to{opacity:1;transform:none}}

/* 통계 카드: 옆에서 밀려 들어오고 금줄이 그어짐 */
.stat{position:relative;overflow:hidden}
.stat.rv{transform:translateX(-50px)}
.stat.rv.d1{transform:translateX(50px)}
.stat.rv.in{transform:none}
.stat::after{content:"";position:absolute;left:22px;right:22px;bottom:14px;height:2px;background:linear-gradient(90deg,var(--gold),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform 1.2s .5s ease}
.stat.in::after{transform:none}
.stat.glow{animation:glow 1.2s ease}
@keyframes glow{0%{box-shadow:0 0 0 rgba(240,215,156,0)}30%{box-shadow:0 0 40px rgba(240,215,156,.45)}100%{box-shadow:0 0 0 rgba(240,215,156,0)}}

/* 퇴근길: 차 불빛이 흐름 */
.road .cars{fill:none;stroke:#FFE2A0;stroke-width:5;stroke-linecap:round;stroke-dasharray:14 70;opacity:0;filter:drop-shadow(0 0 6px #ffd27a);transition:opacity .6s 2s}
.road.in .cars{opacity:1;animation:flow 1.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-168}}
.road img{transform:scale(1.15);transition:transform 6s ease}
.road.in img{transform:scale(1)}

/* 지도: 달리는 점 · 도착 물결 · 단지 블록 튀어나오기 */
.schem .ripple{fill:none;stroke:var(--red);stroke-width:4;transform-box:fill-box;transform-origin:center;opacity:0}
.schem.in .ripple{animation:rip 1.8s 2s ease-out infinite}
.schem.in .ripple.r2{animation-delay:2.6s}
@keyframes rip{0%{transform:scale(.3);opacity:.9}100%{transform:scale(3);opacity:0}}
.schem .blk rect{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.schem.in .blk rect{transform:none}
.schem .mover{opacity:0}
.schem.in .mover{opacity:1;transition:opacity .2s .1s}

/* 공사 장면: 금빛 층이 아래에서부터 쌓임 */
.build{overflow:hidden}
.build img{transform:scale(1.12);transition:transform 5s ease}
.build.in img{transform:scale(1)}
.rise{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(240,215,156,0) 0 44px,rgba(240,215,156,.7) 44px 46px);
  -webkit-mask:linear-gradient(0deg,#000 0,#000 40%,transparent 85%);mask:linear-gradient(0deg,#000 0,#000 40%,transparent 85%);
  clip-path:inset(100% 0 0 0);transition:clip-path 2.6s cubic-bezier(.4,0,.2,1)}
.build.in .rise{clip-path:inset(0 0 0 0);animation:shine 2.4s 2.6s ease-in-out infinite alternate}
@keyframes shine{to{opacity:.35}}
.build .t h3{opacity:0;transform:scale(1.25);transition:all .8s 1.6s cubic-bezier(.3,1.5,.5,1)}
.build.in .t h3{opacity:1;transform:none}

/* 공원: 호수 물결 · 문구 둥실 */
.park .zoomer{position:absolute;inset:0;will-change:transform}
.park .zoomer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ring{position:absolute;left:79%;top:61%;width:60px;height:24px;margin:-12px 0 0 -30px;border:2px solid rgba(255,255,255,.75);border-radius:50%;opacity:0;animation:ring 3s ease-out infinite}
.ring.r2{animation-delay:1s}.ring.r3{animation-delay:2s}
@keyframes ring{0%{transform:scale(.4);opacity:.9}100%{transform:scale(3.4);opacity:0}}
.park .tx .chip{animation:float 3s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}

/* 생활: 지하철 선 위를 달리는 열차 */
.metro{margin-top:30px;position:relative;height:44px}
.metro .line{position:absolute;left:0;right:0;top:20px;height:4px;border-radius:4px;background:#5BA857;opacity:.85}
.metro .st{position:absolute;top:13px;width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid #5BA857}
.metro .st.home{border-color:var(--gold);box-shadow:0 0 14px var(--gold)}
.metro .train{position:absolute;top:8px;left:0;height:28px;padding:0 12px;border-radius:14px;background:#5BA857;color:#fff;font-weight:800;font-size:13px;line-height:28px;
  box-shadow:0 0 16px rgba(91,168,87,.7);animation:ride 4.5s cubic-bezier(.6,0,.4,1) infinite}
@keyframes ride{0%{left:0}45%,55%{left:calc(100% - 66px)}100%{left:0}}
.chips .chip{transition-timing-function:cubic-bezier(.3,1.6,.5,1)!important}

/* 집 안: 지금 어느 방인지 · 진행 막대 */
.walk .room{position:absolute;left:14px;bottom:20px;z-index:3;font-family:var(--serif);font-weight:800;font-size:26px;color:#fff;text-shadow:0 3px 14px rgba(0,0,0,.8);transition:opacity .35s,transform .35s}
.walk .room.out{opacity:0;transform:translateY(10px)}
.walk .bar2{position:absolute;left:0;bottom:0;height:4px;background:var(--gold);width:0;z-index:3;box-shadow:0 0 10px var(--gold)}
.film img{transition:transform 4s ease}
.film figure.on img{transform:scale(1.08)}

/* 혜택: 발코니가 넓어지는 평면 · 도장에 화면 울림 */
.plan{margin:30px auto 0;width:220px;height:120px;position:relative}
.plan .room{position:absolute;left:0;top:0;width:150px;height:120px;border:3px solid rgba(255,255,255,.85);border-radius:4px}
.plan .room span{position:absolute;left:0;right:0;top:46px;text-align:center;font-size:14px;font-weight:700;color:rgba(255,255,255,.85)}
.plan .bal{position:absolute;left:150px;top:0;width:66px;height:120px;border:3px dashed var(--gold);border-left:0;background:rgba(217,184,119,.28);
  transform:scaleX(0);transform-origin:left;transition:transform 1s .5s cubic-bezier(.3,1.4,.5,1)}
.plan .bal span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:var(--gold2)}
.benefit.in .plan .bal{transform:none}
.plan .arrow{position:absolute;left:110px;top:-28px;white-space:nowrap;font-size:13px;color:var(--gold);font-weight:700;opacity:0;transition:opacity .4s 1.4s}
.benefit.in .plan .arrow{opacity:1}
.benefit.in{animation:shake .45s 1.85s}
@keyframes shake{20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-4px)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-1px)}}
.benefit .lim{transition-delay:1.8s!important}

/* 마무리: 반짝임 · 버튼 빛 훑기 */
.btn::before{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.75),transparent);animation:btnshine 2.8s ease-in-out infinite}
@keyframes btnshine{0%{left:-60%}55%,100%{left:120%}}
.bar a{position:relative;overflow:hidden}
.bar a::before{content:"";position:absolute;top:0;bottom:0;width:35%;left:-50%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.7),transparent);animation:btnshine 3.2s 1s ease-in-out infinite}