:root { --gallery-ease: cubic-bezier(.22,1,.36,1); }

@media (prefers-reduced-motion:no-preference) {
  .button {
    transition: background .25s, border-color .25s, box-shadow .35s,
      transform .45s var(--gallery-ease);
  }
  .button:hover { transform: translateY(-3px); box-shadow: 0 8px 20px #193e361c; }
  .button:active { transform: translateY(0) scale(.98); box-shadow: none; }
  .button > span { transition: transform .45s var(--gallery-ease); }
  .button:hover > span { transform: translate(3px,-3px); }
  .text-link { transition: color .25s, border-color .25s, padding-bottom .3s; }
  .text-link:hover { padding-bottom: 8px; }
  .header::after { transform-origin: left; animation: palette-arrival 1.1s var(--gallery-ease) both; }
  .filters button { transition: color .2s, border-color .3s; }
  .art-media {
    transform: perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
    transition: transform .55s var(--gallery-ease), box-shadow .55s, background .3s;
  }
  .art-media img, .work-placeholder {
    transition: transform 1s var(--gallery-ease), filter .6s;
  }
  .art-button:hover .work-placeholder, .art-button:hover img { transform: scale(1.045); }
  .card-arrow { transition: transform .5s var(--gallery-ease), color .25s, border-color .25s, background .25s; }
  .art-button:hover .card-arrow { transform: rotate(45deg); background: #f0e8dc; }
  .art-button:focus-visible .art-media { box-shadow: 0 10px 28px #193e361c; }
  .art-button:active .art-media { transform: scale(.99); }
  .quote-card { transition: transform .45s var(--gallery-ease), box-shadow .45s; }
  .quote-card:hover { transform: translateY(-5px); box-shadow: 0 10px 24px #193e360c; }
  .faq details[open] p { animation: detail-arrival .35s var(--gallery-ease); }
  .faq summary::after { transition: color .25s, transform .35s; }
  .faq details[open] summary::after { transform: rotate(180deg); }
  #enquiry-result:not([hidden]) { animation: detail-arrival .45s var(--gallery-ease); }
  .hero-frame { transition: box-shadow .7s; }
  .hero-frame:hover { box-shadow: 16px 24px 40px #203a3225; }
  dialog[open]::backdrop { animation: backdrop-arrival .35s ease both; }
  dialog.is-closing::backdrop { animation: backdrop-departure .19s ease both; }
  .paint-blast span { transition: transform .55s var(--gallery-ease); }
  .paint-blast:hover span { transform: rotate(90deg) scale(1.15); }
  .paint-reset { transition: transform .45s var(--gallery-ease); }
  .paint-reset:hover { transform: rotate(-50deg); }
  @media (hover:hover) and (pointer:fine) {
    .art-button:hover .art-media { box-shadow: 0 18px 35px -18px #193e3666; }
  }
  @media (max-width:760px) {
    nav.open { animation: detail-arrival .3s var(--gallery-ease); }
  }
}

@keyframes palette-arrival {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}
@keyframes detail-arrival {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes backdrop-arrival { from{opacity:0} to{opacity:1} }
@keyframes backdrop-departure { from{opacity:1} to{opacity:0} }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .art-media { transform: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}