/* v96 · 잘린 이미지 경계 없애기: 마스크가 상자 끝에 닿기 전에 0이 되도록, 부드러운(eased) 단계로 */
/* eased fade: 1 → 0 following a smooth curve instead of a straight ramp */
:root{--ease-fade:#000 0%,rgba(0,0,0,.97) 12%,rgba(0,0,0,.9) 24%,rgba(0,0,0,.78) 36%,rgba(0,0,0,.62) 48%,rgba(0,0,0,.45) 60%,rgba(0,0,0,.29) 71%,rgba(0,0,0,.16) 81%,rgba(0,0,0,.07) 90%,rgba(0,0,0,.02) 96%,transparent 100%}

/* Process rocks: the whole layer melts away well before the section edges */
.ps-rocks{-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.08) 6%,rgba(0,0,0,.3) 12%,rgba(0,0,0,.62) 19%,rgba(0,0,0,.88) 26%,#000 32%,#000 62%,rgba(0,0,0,.88) 69%,rgba(0,0,0,.62) 77%,rgba(0,0,0,.3) 85%,rgba(0,0,0,.08) 93%,transparent 100%);
 mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.08) 6%,rgba(0,0,0,.3) 12%,rgba(0,0,0,.62) 19%,rgba(0,0,0,.88) 26%,#000 32%,#000 62%,rgba(0,0,0,.88) 69%,rgba(0,0,0,.62) 77%,rgba(0,0,0,.3) 85%,rgba(0,0,0,.08) 93%,transparent 100%)}
/* each boulder fades to zero inside its own box (closest-side) */
.rk-a{bottom:0 !important;height:84% !important;-webkit-mask-image:radial-gradient(closest-side at 46% 52%,var(--ease-fade)) !important;mask-image:radial-gradient(closest-side at 46% 52%,var(--ease-fade)) !important}
.rk-b{-webkit-mask-image:radial-gradient(closest-side at 56% 48%,var(--ease-fade)) !important;mask-image:radial-gradient(closest-side at 56% 48%,var(--ease-fade)) !important}
.rk-c{-webkit-mask-image:radial-gradient(closest-side at 50% 50%,var(--ease-fade)) !important;mask-image:radial-gradient(closest-side at 50% 50%,var(--ease-fade)) !important}

/* Brand slab scene: same idea — the floor and reflection dissolve before the box edge */
#app .brand-visual{-webkit-mask-image:radial-gradient(farthest-side at 50% 48%,var(--ease-fade)) !important;mask-image:radial-gradient(farthest-side at 50% 48%,var(--ease-fade)) !important;
 -webkit-mask-size:100% 100% !important;mask-size:100% 100% !important;-webkit-mask-position:0 0 !important;mask-position:0 0 !important;-webkit-mask-repeat:no-repeat !important;mask-repeat:no-repeat !important}
/* replay button lives outside the faded scene so it stays crisp */
#app .about2-brand{position:relative}
#app .about2-brand>.brand-replay{position:absolute;right:calc(var(--pad) * .2 + 2%);bottom:16%;z-index:5}
