/* ---- Page load animation ----
 * Turned on by the `page-intro` class on <html>. The page's main blocks
 * fade in and slide up one after another, the same motion as switching to
 * side projects on the homepage.
 *
 * Pure CSS, so if any script fails the content still ends up visible.
 * js/page-intro.js removes the class once it's finished, so the animation
 * never replays (e.g. when the homepage swaps project lists).
 */

@keyframes page-intro {
  from {
    opacity: 0;
    translate: 0 32px;
  }
}

/* (`keep-nav`: arriving from the homepage project transition, where the nav
   never left, so it doesn't fade in again) */
html.page-intro:not(.keep-nav) .page-wrapper > nav,
html.page-intro .main-wrapper > :not(.dir-list),
html.page-intro .dir-list > * {
  animation: page-intro 550ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--intro-step, 0) * 90ms);
}

/* Order: nav first, then each block down the page (capped, so blocks
   further down don't wait around) */
html.page-intro .main-wrapper > :nth-child(1) { --intro-step: 1; }
html.page-intro .main-wrapper > :nth-child(2) { --intro-step: 2; }
html.page-intro .main-wrapper > :nth-child(3) { --intro-step: 3; }
html.page-intro .main-wrapper > :nth-child(n + 4) { --intro-step: 4; }

/* Project pages with the nav in the side panel (css/project-panel.css):
   the section itself doesn't fade, so the nav can stay put when arriving
   from the homepage. The nav, then the text, then the images fade in. */
html.page-intro .main-wrapper > section.section_project {
  animation: none;
}

html.page-intro:not(.keep-nav) .project-nav,
html.page-intro .project-panel_content,
html.page-intro .project-images {
  animation: page-intro 550ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--intro-step, 0) * 90ms);
}

html.page-intro .project-nav { --intro-step: 0; }
html.page-intro .project-panel_content { --intro-step: 1; }
html.page-intro .project-images { --intro-step: 2; }

/* Homepage: projects follow right after the folder heading */
html.page-intro .dir-list > :nth-child(1) { --intro-step: 2; }
html.page-intro .dir-list > :nth-child(2) { --intro-step: 3; }
html.page-intro .dir-list > :nth-child(n + 3) { --intro-step: 4; }

@media (prefers-reduced-motion: reduce) {
  html.page-intro * {
    animation: none !important;
  }
}