/* Motion hooks (see js/motion/common.js). Loaded last.
   html.motion is set in js/theme.js when motion is allowed: pages start hidden and fade in.
   With reduced motion, or if Motion fails to load, everything simply shows. */
.motion main{opacity:0}

/* project cards: tinted border and arrow on hover; the card tilts toward the cursor in JS */
#work .wrap{perspective:1400px}
.feature{--tint:var(--accent)}
.feature[href$="virtual-law-library"]{--tint:#A0522D}
.feature[href$="crack-the-code"]{--tint:#00A8BC}
.feature[href$="vclaim"]{--tint:#0E9AA7}
.feature[href$="platforms"]{--tint:#1D4ED8}
.feature .shot{overflow:hidden; border-radius:12px; box-shadow:0 1px 0 var(--rule), 0 24px 48px -28px rgba(21,32,43,.45)}
.feature .shot img{box-shadow:none; border-radius:0}
.feature:hover{border-color:var(--tint); box-shadow:0 24px 48px -30px color-mix(in srgb,var(--tint) 55%,transparent)}
.feature .btn::after{content:" →"; display:inline-block; transition:transform .3s}
.feature:hover .btn::after{transform:translateX(4px)}
.motion .feature,.motion .feature:hover{transform:none; transition:border-color .3s, box-shadow .3s}

.contact .links a{display:inline-block}