/* Final, optional enhancement. Static content never depends on a reveal class. */
:root {
  --portfolio-motion-feedback: 180ms;
  --portfolio-motion-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Reset earlier unconditional hover transforms, including sticky touch hover. */
.project-art img,
.project-link:hover .project-art img {
  transform: none;
  transition: none;
}

.primary-action > span[aria-hidden="true"],
.hero-resume > span[aria-hidden="true"],
.text-action > span[aria-hidden="true"],
.play-preview-label > span[aria-hidden="true"] {
  display: inline-block;
  transform: none;
  transition: none;
}

@media (hover: hover) and (pointer: fine) {
  .project-art img {
    transition: transform var(--portfolio-motion-feedback) ease;
  }
  .project-link:hover .project-art img {
    transform: scale(1.035);
  }
  .primary-action > span[aria-hidden="true"],
  .hero-resume > span[aria-hidden="true"],
  .text-action > span[aria-hidden="true"],
  .play-preview-label > span[aria-hidden="true"] {
    transition: transform 160ms ease;
  }
  .primary-action:hover > span[aria-hidden="true"],
  .hero-resume:hover > span[aria-hidden="true"],
  .text-action:hover > span[aria-hidden="true"],
  .play-preview:hover .play-preview-label > span[aria-hidden="true"] {
    transform: translate(4px, -4px);
  }
}

/* JavaScript also cancels WAAPI effects when this preference changes live. */
@media (prefers-reduced-motion: reduce) {
  [data-motion-state],
  .hero-copy,
  .hero-copy > *,
  .hero-portrait,
  .play-preview,
  .hero-portrait .portrait-slot,
  .hero-portrait > img,
  .play-preview img,
  .project-card {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    clip-path: none !important;
    opacity: 1 !important;
  }
  .project-art img,
  .project-link:hover .project-art img,
  .primary-action > span[aria-hidden="true"],
  .hero-resume > span[aria-hidden="true"],
  .text-action > span[aria-hidden="true"],
  .play-preview-label > span[aria-hidden="true"] {
    transform: none !important;
    transition: none !important;
  }
}

/* Review controls are only mounted on the explicit ?motion-review=1 URL. */
.motion-review-bar {
  position: fixed;
  z-index: 45;
  inset: auto auto 18px 18px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  max-width: min(640px, calc(100vw - 36px));
  padding: 10px 12px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 32px #24242414;
  font: 400 12px/1.4 var(--body);
}
.motion-review-label { padding: 0 8px 0 2px; font-weight: 500; }
.motion-review-bar button, .motion-review-bar a {
  color: var(--accent);
  background: transparent;
  border: 0;
  border-radius: 4px;
  font: inherit;
  min-height: 36px;
  padding: 8px 10px;
  text-decoration: none;
  cursor: pointer;
}
.motion-review-bar button:hover, .motion-review-bar a:hover { background: var(--soft-yellow); }
.motion-review-status { flex-basis: 100%; padding: 3px 3px 0; color: var(--muted); }
@media (max-width: 980px) {
  /* Review tools take priority over the unrelated chat launcher in limited space. */
  body:has(.motion-review-bar) #portfolio-assistant > .portfolio-assistant-launcher { display: none; }
}
@media (max-width: 600px) {
  .motion-review-bar { inset: auto 12px 12px; max-width: none; padding: 8px; gap: 0; }
  .motion-review-label { flex-basis: 100%; padding: 2px 8px; }
  .motion-review-bar button, .motion-review-bar a { min-height: 44px; padding-inline: 8px; }
  .motion-review-status { display: none; }
  html[data-motion-preference="reduced"] .motion-review-status { display: block; }
}