/* Motion stays on opacity and transforms so the editorial grid never shifts. */
html{--motion-ease:cubic-bezier(.16,1,.3,1);--motion-soft-ease:cubic-bezier(.25,.8,.25,1)}
body{-webkit-tap-highlight-color:transparent}
:where(a,button,summary):focus:not(:focus-visible){outline:none}
:where(a,button,summary,input,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.has-motion .reveal{opacity:1;transform:none}
.has-motion .motion-reveal{opacity:0;transform:translate3d(0,22px,0);transition:opacity .75s var(--motion-ease),transform .9s var(--motion-ease);transition-delay:var(--motion-delay,0ms);will-change:opacity,transform}
.has-motion .motion-reveal.is-visible{opacity:1;transform:none}
.has-motion .motion-reveal:focus-within{opacity:1;transform:none;transition-delay:0ms}
.button,.nav-resume{transition:color .3s var(--motion-soft-ease),background-color .3s var(--motion-soft-ease),border-color .3s var(--motion-soft-ease),transform .35s var(--motion-ease),box-shadow .35s var(--motion-soft-ease)}
.button:not(:disabled):active,.nav-resume:active{transform:translateY(1px) scale(.98)}
.menu-toggle i,.menu-toggle i:before,.menu-toggle i:after{transition:background-color .25s var(--motion-soft-ease),transform .45s var(--motion-ease),top .45s var(--motion-ease)}
.contact-email>span:last-child,.social-symbol,.nav-resume span,.text-link span,.project-links span,.button span{display:inline-block;transition:transform .4s var(--motion-ease)}
.project-preview{transition:transform 1s var(--motion-ease),filter .7s var(--motion-soft-ease)}
.project:focus-within .project-preview{transform:scale(1.025)}
@media(hover:hover) and (pointer:fine){
  .button:not(:disabled):hover,.nav-resume:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.18)}
  .contact-email:hover>span:last-child,.nav-resume:hover span{transform:translate(2px,-2px)}
  .social-links a:hover .social-symbol{transform:translateY(-2px)}
  .text-link:hover span,.project-links a:hover span,.button:hover span{transform:translate(3px,2px)}
  .project:hover .project-preview{transform:scale(1.035);filter:saturate(1.05)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .has-motion .motion-reveal{opacity:1;transform:none;transition:none}
  .button,.nav-resume,.project-preview,.social-symbol,.text-link span,.project-links span,.button span,.contact-email>span:last-child{transform:none!important;transition:none!important}
}