/* Deliberate lift, then tool retreat: all shot layers stay joined throughout. */
.cp-part{transform:translateY(calc(var(--lift,0)*-6% + var(--product-tilt,0)*4%)) scale(calc(1 + var(--lift,0)*.035)) perspective(1200px) rotateX(calc(var(--product-tilt,0)*9deg)) rotateY(calc(var(--product-tilt,0)*-4deg)) rotateZ(calc(var(--product-tilt,0)*-4deg));filter:drop-shadow(0 14px 16px rgba(0,0,0,.3))}
.cp-mould{transform:translateY(calc(var(--release,0)*2% + var(--retreat,0)*9%)) scale(calc(1 - var(--retreat,0)*.035));opacity:calc(1 - var(--retreat,0));transition:none!important}
.cp-stage .cp-ring,.cp-stage .cp-read,.cp-stage .cp-chip,.cp-stage .cp-gate{opacity:calc(1 - var(--retreat,0));transition:none}
.cp-stage .cp-spot{opacity:calc((1 - var(--retreat,0))*(.4 + var(--fill-light,0)*.6))}
.cp-step[role=button]{cursor:pointer;border-radius:8px;outline-offset:5px}
.cp-step[role=button]:hover{background:#ffffff04;opacity:.85}
.cp-step[role=button]:focus-visible{outline:2px solid #d3bca3}
.cp-step[aria-pressed=true] .n{color:#f3eee5}
.cp-steps .cp-step .bar i{transform:scaleX(var(--phase,0));transition:none}
.cp-stage[data-finished=true] .stage-view-3d{animation:process-cta-in .35s ease-out both}
@keyframes process-cta-in{from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}

@media(prefers-reduced-motion:reduce){.cp-stage *,.cp-step{animation:none!important;transition:none!important}}

/* The entire stage row is a native, keyboard-operable control. */
button.cp-step{width:100%;text-align:left;font:inherit;color:inherit;appearance:none;background:transparent;border:0;border-bottom:1px solid #f3eee524;position:relative;padding-right:36px;opacity:.65;touch-action:manipulation}
.cp-step .step-title,.cp-step .step-description{display:block}
button.cp-step::after{content:'↗';position:absolute;right:8px;top:20px;font-size:20px;color:#b8b2a7;transition:transform .25s,color .25s}
button.cp-step:hover::after{transform:translate(2px,-2px);color:#f3eee5}
.cp-steps button.cp-step[aria-pressed=true]{opacity:1;background:#ffffff04}
.cp-steps button.cp-step[aria-pressed=true]::after{content:'→';color:#ff9c72}
.cp-steps button.cp-step[aria-pressed=false]{opacity:.65}
.cp-steps button.cp-step:hover,.cp-steps button.cp-step:focus-visible{opacity:1}
@media(max-width:640px){button.cp-step::after{top:10px}.cp-step .step-description{display:none}}

/* Keep moving surfaces composited; do not animate blur radii. */
.cp-stage[data-moving=true] :is(.cp-rot,.cp-part,.cp-mould){will-change:transform,opacity}

.cp-stage .cp-rot{left:0;right:0}.cp-stage .cp-part{transform-origin:50% 50%}.cp-stage[data-finished=true] .stage-view-3d{bottom:7%}