/* Shared motion for the project board and every project story. */
.motion-ready .project-motion-page .reveal,
.motion-ready .project-motion-page .reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

.project-motion-page .project-card,
.project-motion-page .proof-card,
.project-motion-page .project-detail-feature {
  transform: none;
  transform-style: flat;
  transition: transform 260ms cubic-bezier(.2,.85,.25,1.2), box-shadow 260ms ease, border-color 260ms ease;
}

.project-motion-page .project-card {
  box-shadow: 0 10px 24px -12px #175b7c38;
}

.project-motion-page .project-media img,
.project-motion-page .proof-card img,
.project-motion-page .project-detail-feature img {
  transition: transform 480ms cubic-bezier(.22,1,.36,1);
}

.project-motion-page .project-media > span:not(.project-media-banner) {
  transform-origin: left center;
}

.project-motion-page .project-actions .button,
.project-motion-page .project-detail-actions .button,
.project-motion-page .project-detail-cta .button,
.project-motion-page .back-link {
  transition: transform 220ms cubic-bezier(.2,.85,.25,1.2), box-shadow 220ms ease, background-color 220ms ease;
}

.project-motion-page .project-fact-grid > div {
  transition: transform 260ms cubic-bezier(.2,.85,.25,1.2), box-shadow 260ms ease, border-color 260ms ease;
}

.project-motion-page .project-timeline > div {
  animation: none;
  opacity: 1;
  transform: none;
  transition: border-color 220ms ease, box-shadow 220ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .project-motion-page .project-card:hover {
    transform: translateY(-7px);
    border-color: #77b8cf;
    box-shadow: 0 22px 40px -18px #175b7c66;
  }
  .project-motion-page .project-card:hover .project-media img {
    transform: scale(1.045);
  }
  .project-motion-page .project-card:hover .project-media > span:not(.project-media-banner) {
    animation: project-label-bounce 560ms ease both;
  }
  .project-motion-page .project-fact-grid > div:hover {
    transform: translateY(-5px);
    border-color: #8ec5d8;
    box-shadow: 0 16px 28px -15px #175b7c55;
  }
  .project-motion-page .proof-card:not(:has(video)):hover,
  .project-motion-page .project-detail-feature:not(:has(video)):hover {
    transform: translateY(-4px);
    border-color: #77b8cf;
    box-shadow: 0 20px 36px -16px #175b7c55;
  }
  .project-motion-page .proof-card:hover img,
  .project-motion-page .project-detail-feature:hover img {
    transform: scale(1.025);
  }
  .project-motion-page .project-timeline > div:hover > span {
    animation: project-label-bounce 560ms ease both;
  }
  .project-motion-page .project-actions .button:hover,
  .project-motion-page .project-detail-actions .button:hover,
  .project-motion-page .project-detail-cta .button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 18px -10px #175b7c99;
  }
  .project-motion-page .back-link:hover { transform: translateX(-4px); }
}

.project-motion-page .project-card:focus-within {
  border-color: #237b9a;
  box-shadow: 0 12px 30px -14px #175b7c66;
}
.project-motion-page .project-media:focus-visible > span:not(.project-media-banner) {
  animation: project-label-bounce 560ms ease both;
}
.project-motion-page .project-actions .button:focus-visible,
.project-motion-page .project-detail-actions .button:focus-visible,
.project-motion-page .project-detail-cta .button:focus-visible {
  transform: translateY(-3px);
}
.project-motion-page .project-media:focus-visible {
  outline: 3px solid #237b9a;
  outline-offset: -5px;
}
.project-motion-page .project-actions .button:focus-visible,
.project-motion-page .project-detail-actions .button:focus-visible,
.project-motion-page .project-detail-cta .button:focus-visible,
.project-motion-page .back-link:focus-visible {
  outline: 3px solid #237b9a;
  outline-offset: 4px;
}
.project-motion-page .project-card:has(a:active) {
  transform: translateY(1px) scale(.985);
  transition-duration: 80ms;
}
.project-motion-page .project-actions .button:active,
.project-motion-page .project-detail-actions .button:active,
.project-motion-page .project-detail-cta .button:active,
.project-motion-page .back-link:active {
  transform: scale(.96);
  transition-duration: 80ms;
}

@keyframes project-label-bounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-7px) rotate(-2deg); }
  55% { transform: translateY(1px) rotate(1deg); }
  78% { transform: translateY(-2px); }
}

/* Native navigation stays immediate; supporting browsers blend the pages. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .project-motion-page .site-header { view-transition-name: project-header; }
  ::view-transition-old(root) { animation: project-page-out 160ms ease both; }
  ::view-transition-new(root) { animation: project-page-in 280ms cubic-bezier(.22,1,.36,1) both; }
  ::view-transition-group(project-header) { animation-duration: 0s; }
}
@keyframes project-page-out { to { opacity: 0; } }
@keyframes project-page-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .project-motion-page *,
  .project-motion-page *::before,
  .project-motion-page *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .project-motion-page .project-card,
  .project-motion-page .proof-card,
  .project-motion-page .project-detail-feature,
  .project-motion-page .project-fact-grid > div,
  .project-motion-page .project-media img,
  .project-motion-page .proof-card img,
  .project-motion-page .project-detail-feature img,
  .project-motion-page .button,
  .project-motion-page .back-link { transform: none !important; }
}