/* Project pages: the two-futures slider shows itself once, and the cut-paper hero gets gentle depth. Built 2026-11-08. Behaviour in futures.js. */
.future-compare[data-enhanced] .compare-divider>span{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.future-compare.is-demo .compare-divider>span{animation:ftPop .55s cubic-bezier(.3,1.6,.5,1) both}
.future-compare.is-demo .compare-divider>span::after{content:'';position:absolute;inset:-2px;border-radius:50%;box-shadow:0 0 0 0 rgba(213,236,157,.95);animation:ftRing 1.1s .15s ease-out both}
.future-compare.is-demo .scene-label{transition:opacity .4s}
.future-compare.ft-left .scene-right,.future-compare.ft-right .scene-left{opacity:.55}
.future-compare[data-enhanced] .compare-range:hover~.compare-divider>span,.future-compare[data-enhanced]:hover .compare-divider>span{transform:translate(-50%,-50%) scale(1.06)}
@keyframes ftPop{0%{transform:translate(-50%,-50%) scale(.9)}55%{transform:translate(-50%,-50%) scale(1.12)}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes ftRing{0%{box-shadow:0 0 0 0 rgba(213,236,157,.95)}100%{box-shadow:0 0 0 16px rgba(213,236,157,0)}}
.project-detail-image img{translate:calc(var(--mx,0) * -8px) calc(var(--my,0) * -6px);transition:translate .6s ease-out}
@media (prefers-reduced-motion:reduce){.future-compare.is-demo .compare-divider>span,.future-compare.is-demo .compare-divider>span::after{animation:none}.project-detail-image img{translate:none}}