/* Motion only: each page retains its original palette and component styling. */
:root{--ease:cubic-bezier(.22,1,.36,1)}
.nav{transition:box-shadow .25s ease,background .25s ease}
.page-scrolled .nav{box-shadow:0 5px 24px rgba(15,23,42,.08)}
input,textarea,select{transition:border-color .2s ease,box-shadow .2s ease}
/* A light touch: short transitions, small distances, and no looping animation. */
a,button,summary{transition:color .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .25s var(--ease)}
.card,.project-card,.testimonial-card,.experience-item,.skill-card,.why-highlight,.tech-item{transition:transform .3s var(--ease),box-shadow .3s ease,border-color .3s ease}
@media(hover:hover) and (pointer:fine){
  .card:hover,.project-card:hover,.testimonial-card:hover,.skill-card:hover,.why-highlight:hover{transform:translateY(-3px);box-shadow:0 15px 34px rgba(15,23,42,.1);border-color:#cbd5e1}
  .experience-item:hover,.tech-item:hover{transform:translateY(-2px);border-color:#cbd5e1}
  .btn:hover,.button:hover,.project-link:hover,.profile-link:hover,.icon-btn:hover,.submit:not(:disabled):hover,.message-submit:not(:disabled):hover{transform:translateY(-2px)}
}
.message-modal.open,.project-lightbox.open,.image-lightbox.open{animation:surface-fade .2s ease both}
.message-modal.open .message-dialog{animation:dialog-enter .28s var(--ease) both}
.project-lightbox.open img,.image-lightbox.open img{animation:dialog-enter .28s var(--ease) both}
@keyframes surface-fade{from{opacity:0}to{opacity:1}}
@keyframes dialog-enter{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .card:hover,.project-card:hover,.testimonial-card:hover,.skill-card:hover,.why-highlight:hover,.experience-item:hover,.tech-item:hover,
  .btn:hover,.button:hover,.project-link:hover,.profile-link:hover,.icon-btn:hover,.submit:hover,.message-submit:hover,a.live-link:hover,a.live-link:hover svg,.link:hover,.message-fab:hover,.nav .services-nav-cta:hover{transform:none}
}