/* Each programme opens up in depth; copy and links keep their normal layout. */
.path-card { --engaged:0; --art-x:0px; --art-y:0px; --art-turn:0deg; transform:perspective(1400px) translateY(calc(var(--engaged) * -10px)) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(calc(1 + var(--engaged) * .008)); }
.exp-ready .path-card.is-revealed { transition:transform 260ms cubic-bezier(.2,.7,.2,1),box-shadow 350ms,border-color 350ms; }
.path-card:is(.is-pointer-active,.is-touching,:has(:focus-visible)) { --engaged:1; z-index:2; border-color:#b39acb; box-shadow:0 7px 10px #49295806,0 30px 50px -12px #4929582b; }
.path-card.is-pointer-active { will-change:transform; }
.path-card.is-touching { transform:translateY(-4px) scale(.995); }
.path-card .path-art::after { opacity:calc(.35 + var(--engaged) * .65); background:radial-gradient(ellipse at var(--pointer-x,50%) var(--pointer-y,50%),#ffffffbd,transparent 62%); transition:opacity 400ms; }
.path-card .art-ground { transform:translateX(calc(var(--art-x) * -.4)) scale(calc(1 + var(--engaged) * .25),calc(1 - var(--engaged) * .15)); opacity:calc(1 - var(--engaged) * .25); transition:transform 650ms,opacity 650ms; }
.path-card :is(.art-paper,.art-browser,.art-check,.art-block,.agent-console,.agent-envelope,.agent-response) { transition:transform 650ms cubic-bezier(.16,1,.3,1),box-shadow 650ms; }

/* Mastery: a stack of notes separates into individual sheets. */
.path-card .paper-back { transform:perspective(650px) translate3d(calc(-18px - var(--engaged) * 20px + var(--art-x) * -.4),calc(-7px - var(--engaged) * 8px + var(--art-y) * -.4),0) rotateX(22deg) rotateY(-22deg) rotateZ(calc(-8deg - var(--engaged) * 12deg)); }
.path-card .paper-front { transform:perspective(650px) translate3d(var(--art-x),calc(var(--art-y) - var(--engaged) * 9px),0) rotateX(calc(22deg - var(--engaged) * 7deg)) rotateY(-22deg) rotateZ(calc(15deg - var(--engaged) * 9deg + var(--art-turn))) scale(calc(1 + var(--engaged) * .045)); }
.path-card .art-check { transform:translate3d(calc(var(--art-x) * 1.5 + var(--engaged) * 9px),calc(var(--art-y) * 1.4 - var(--engaged) * 11px),0) rotate(calc(-11deg + var(--engaged) * 14deg + var(--art-turn))) scale(calc(1 + var(--engaged) * .12)); }

/* Builder: browser layers unfold and the result moves into the foreground. */
.path-card .browser-back { transform:perspective(650px) translate3d(calc(18px + var(--engaged) * 13px - var(--art-x) * .4),calc(-14px - var(--engaged) * 7px - var(--art-y) * .4),0) rotateX(23deg) rotateY(-22deg) rotateZ(calc(-8deg + var(--engaged) * 11deg)); }
.path-card .browser-front { transform:perspective(650px) translate3d(calc(var(--art-x) - var(--engaged) * 6px),calc(var(--art-y) - var(--engaged) * 5px),0) rotateX(calc(23deg - var(--engaged) * 8deg)) rotateY(-22deg) rotateZ(calc(-8deg - var(--engaged) * 4deg + var(--art-turn))) scale(calc(1 + var(--engaged) * .06)); }
.path-card .art-block { transform:perspective(500px) translate3d(calc(var(--art-x) * 1.5 + var(--engaged) * 12px),calc(var(--art-y) * 1.5 - var(--engaged) * 13px),0) rotateY(-25deg) rotateZ(calc(-7deg + var(--engaged) * 13deg + var(--art-turn))) scale(calc(1 + var(--engaged) * .12)); }

/* Agent: the request, activity and response react at different depths. */
.path-card .agent-console { transform:perspective(650px) translate3d(var(--art-x),calc(var(--art-y) - var(--engaged) * 4px),0) rotateX(calc(12deg - var(--engaged) * 6deg)) rotateY(-15deg) rotateZ(calc(-6deg + var(--art-turn) * .5)); }
.path-card .agent-envelope { transform:perspective(500px) translate3d(calc(var(--art-x) * 1.4 - var(--engaged) * 9px),calc(var(--art-y) * 1.3 - var(--engaged) * 5px),0) rotateY(-12deg) rotateZ(calc(-15deg - var(--engaged) * 10deg + var(--art-turn))) scale(calc(1 + var(--engaged) * .1)); }
.path-card .agent-response { transform:translate3d(calc(var(--art-x) * 1.35 + var(--engaged) * 3px),calc(var(--art-y) * 1.4 - var(--engaged) * 7px),0) rotate(calc(5deg + var(--engaged) * 3deg + var(--art-turn))) scale(calc(1 + var(--engaged) * .04)); }
.path-card .agent-console-symbol { transition:background 400ms,box-shadow 400ms; }
.path-card:is(.is-pointer-active,.is-touching,:has(:focus-visible)) .agent-console-symbol { background:#6841c6; box-shadow:inset 0 1px 1px #ffffff45,0 0 0 4px #6841c615; }
.path-card .button { transition:background 250ms,box-shadow 250ms,transform 250ms; }
.path-card .button:hover { transform:translateY(-3px); box-shadow:0 8px 18px #6841c62b; }

/* Keep feedback small on touch devices and disable spatial motion when paused. */
@media (hover:none), (pointer:coarse) {
  .path-card:is(.is-touching,:has(:focus-visible)) { --engaged:.65; }
}
[data-motion="paused"] .path-card { --engaged:0!important; --art-x:0px!important; --art-y:0px!important; --art-turn:0deg!important; transform:none!important; }
[data-motion="paused"] .path-card *,[data-motion="paused"] .path-card *::after { transition:none!important; }
[data-motion="paused"] .path-card .button:hover { transform:none; }
@media (prefers-reduced-motion:reduce) {
  .path-card { --engaged:0!important; --art-x:0px!important; --art-y:0px!important; --art-turn:0deg!important; transform:none!important; }
  .path-card *, .path-card *::after { transition:none!important; }
  .path-card .button:hover { transform:none; }
}