/* Feedback follows the visitor's actions; no entrance or scroll animations. */
@media (prefers-reduced-motion: no-preference) {
  .project-visual[data-preview-motion] {
    transform: perspective(1100px)
      translate3d(var(--preview-x, 0px), var(--preview-y, 0px), 0)
      rotateX(var(--preview-rx, 0deg)) rotateY(var(--preview-ry, 0deg));
    transform-origin: 50% 50%;
    transition: transform 230ms cubic-bezier(.2, .65, .3, 1);
  }

  .project-visual[data-preview-motion=active] { will-change: transform; }
  .project-visual[data-preview-motion=suspended] {
    transform: none;
    transition: none;
  }

  .project-actions .button {
    transition: background-color 160ms ease, border-color 160ms ease,
      color 160ms ease, translate 160ms ease, scale 120ms ease;
  }
  .project-actions .button:active { translate: 0 1px; scale: .985; }
  .project-actions .button > span[aria-hidden],
  .project-actions .text-link > span[aria-hidden],
  .contact-email > span[aria-hidden] { transition: translate 180ms ease; }

  /* Native open/close semantics remain intact in browsers without this feature. */
  @supports (interpolate-size: allow-keywords) and selector(details::details-content) {
    .project details::details-content {
      interpolate-size: allow-keywords;
      block-size: 0;
      opacity: 0;
      overflow: clip;
      transition: block-size 240ms cubic-bezier(.2, .65, .3, 1),
        opacity 180ms ease, content-visibility 240ms;
      transition-behavior: allow-discrete;
    }
    .project details[open]::details-content { block-size: auto; opacity: 1; }
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .project-actions .button:hover { translate: 0 -1px; }
  .project-actions .button:hover:active { translate: 0 1px; }
  .project-actions .button:hover > span[aria-hidden],
  .project-actions .text-link:hover > span[aria-hidden],
  .contact-email:hover > span[aria-hidden] { translate: 2px -2px; }
}

.project-actions .text-link:hover,
.contact-email:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

@media (prefers-reduced-motion: reduce) {
  .project-visual[data-preview-motion] { transform: none; transition: none; }
}

@media print { .project-visual[data-preview-motion] { transform: none; } }