/*
============================================================
------------------ Portfolio Page Assembly -----------------
============================================================
*/
/* Each page assembles its first visible pieces as they load. The header stays put. */
@media (prefers-reduced-motion: no-preference) {
  main :is(.hero-content, .page-hero-content) > :is(.eyebrow, .section-label) {
    animation: nd-arrive-detail 360ms ease-out both;
  }

  main :is(.hero-content, .page-hero-content) > h1 {
    animation: nd-arrive-title 470ms cubic-bezier(.2, .8, .2, 1) 45ms both;
  }

  main :is(.hero-content, .page-hero-content) > p:not(.eyebrow) {
    animation: nd-arrive-detail 420ms ease-out 115ms both;
  }

  main :is(.hero-content, .page-hero-content) > .hero-actions,
  main .project-directory-links {
    animation: nd-arrive-detail 430ms ease-out 165ms both;
  }

  main :is(.path-card, .value-card, .project-card-small, .certificate-card) {
    animation: nd-arrive-card 490ms cubic-bezier(.2, .8, .2, 1) 190ms both;
  }

  main :is(.path-card, .value-card, .project-card-small, .certificate-card):nth-child(2) {
    animation-delay: 245ms;
  }

  main :is(.path-card, .value-card, .project-card-small, .certificate-card):nth-child(3) {
    animation-delay: 300ms;
  }

  /* A header click briefly separates existing content before navigation. */
  body.nd-page-disassembling main h1 {
    animation: nd-scatter-title 170ms ease-in both;
  }

  body.nd-page-disassembling main p {
    animation: nd-scatter-detail 170ms ease-in both;
  }

  body.nd-page-disassembling main :is(.path-card, .value-card, .project-card-small, .certificate-card) {
    animation: nd-scatter-card 170ms ease-in both;
  }

  @keyframes nd-arrive-title {
    from { opacity: 0; transform: translate(-14px, 10px) rotate(-.4deg); }
    to { opacity: 1; transform: none; }
  }

  @keyframes nd-arrive-detail {
    from { opacity: 0; transform: translate(9px, 10px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes nd-arrive-card {
    from { opacity: 0; transform: translateY(14px) scale(.975); }
    to { opacity: 1; transform: none; }
  }

  @keyframes nd-scatter-title {
    to { opacity: .55; transform: translate(-10px, -7px) rotate(-.4deg); }
  }

  @keyframes nd-scatter-detail {
    to { opacity: .55; transform: translate(8px, 5px); }
  }

  @keyframes nd-scatter-card {
    to { opacity: .6; transform: translate(4px, 9px) scale(.985); }
  }
}