/* Small, interruptible changes. Content stays readable without JavaScript. */
:root { --motion-ease: cubic-bezier(.2,.7,.3,1); --motion-time: 160ms; }
.js .reveal { opacity: 1; transform: none; transition: none; }
:where(a, button, summary, input, select, textarea) {
  transition: color var(--motion-time) var(--motion-ease), background-color var(--motion-time) var(--motion-ease), border-color var(--motion-time) var(--motion-ease), opacity var(--motion-time) var(--motion-ease), translate var(--motion-time) var(--motion-ease), scale 120ms var(--motion-ease);
}
:where(button, summary, .text-link, .pill-button, .contact-button, .nav-contact) { -webkit-tap-highlight-color: transparent; }
:where(button, .pill-button, .contact-button, .nav-contact):not(:disabled):active { scale: .99; }
:where(a, button, summary, input, select, textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
:where(input, select, textarea):focus { border-color: var(--ink, #303632); background-color: color-mix(in srgb, var(--ink, #303632) 3%, white); }
summary > span:last-child, summary i::after { transition: transform var(--motion-time) var(--motion-ease); }
.text-link span { transition: transform var(--motion-time) var(--motion-ease); }
.home-photo img, .home-open img, .project-image img { transition: scale 220ms var(--motion-ease), filter var(--motion-time) var(--motion-ease); }
@media (hover: hover) and (pointer: fine) {
  :where(button, .pill-button, .contact-button, .nav-contact):not(:disabled):hover { translate: 0 -1px; }
  summary:hover { background-color: color-mix(in srgb, currentColor 3%, transparent); }
  .text-link:hover span { transform: translate(1px, -1px); }
  .home-photo:hover img, .home-open:hover img { transform: none; scale: 1.008; }
  .project-image:hover img { scale: 1.008; filter: brightness(.98); }
}
@supports (transition-behavior: allow-discrete) {
  header nav[data-motion-menu] {
    opacity: 0; translate: 0 -3px; pointer-events: none;
    transition: opacity 140ms var(--motion-ease), translate 140ms var(--motion-ease), display 140ms allow-discrete;
  }
  header nav[data-motion-menu]:is(.open, .is-open) { opacity: 1; translate: 0 0; pointer-events: auto; }
  dialog {
    opacity: 0; translate: 0 4px; scale: .996;
    transition: opacity 160ms var(--motion-ease), translate 160ms var(--motion-ease), scale 160ms var(--motion-ease), display 160ms allow-discrete, overlay 160ms allow-discrete;
  }
  dialog[open] { opacity: 1; translate: 0 0; scale: 1; }
  dialog::backdrop { opacity: 0; transition: opacity 160ms ease-out, display 160ms allow-discrete, overlay 160ms allow-discrete; }
  dialog[open]::backdrop { opacity: 1; }
  @starting-style {
    header nav[data-motion-menu]:is(.open, .is-open) { opacity: 0; translate: 0 -3px; }
    dialog[open] { opacity: 0; translate: 0 4px; scale: .996; }
    dialog[open]::backdrop { opacity: 0; }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  dialog::backdrop { animation: none !important; transition: none !important; }
  :where(a, button, summary, input, select, textarea), .home-photo img, .home-open img, .project-image img { translate: none !important; scale: none !important; }
  .text-link:hover span { transform: none; }
  .js .reveal { opacity: 1; transform: none; }
}