/**
 * Page Transition Styles
 *
 * Fade out/in and lane animation for home <-> writing in-page transitions.
 * Logo and illustration (left) stay static; only main content areas fade.
 */

/* Home <-> writing (body swap). Home <-> history is choreographed in
   page-transition.js instead and only uses the name recolour below. */

/* Fade out: home – text columns, grid, and leftmost gridline (logo + illustration stay visible) */
.page-frame.page-transition-out .text-columns,
.page-frame.page-transition-out .grid-field {
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-in);
}

/* Home -> writing: the leftmost gridline fades out (no movement), quickly, so
   it's gone before the lanes animate. Not on home <-> history, where it stays. */
.page-frame.page-transition-out:not(.page-transition-history) .gridline--1 {
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-in);
}

/* Fade out: writing – only article list and content (logo + illustration stay visible) */
.page-frame.page-transition-out .article-list-container,
.page-frame.page-transition-out .article-content {
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-in);
}

/* Home <-> project history: the name recolours from the moment of the click,
   alongside the outgoing content's exit (transition on .page-content in
   layout.css). The direction class, set by page-transition.js, wins over the
   page-level colour until cleanup. */
.page-frame.page-transition-to-history .page-content {
  color: var(--color-name-receded);
}

.page-frame.page-transition-to-home .page-content {
  color: var(--color-name-ink);
}

/* Fade in: only main content areas (logo + illustration stay at full opacity) */
/* Writing content (article-list, article-content) is shown only after writing-content-ready in writing.css */
.page-frame.page-transition-in .text-columns,
.page-frame.page-transition-in .grid-field,
.page-frame.page-transition-in .article-list-container,
.page-frame.page-transition-in .article-content {
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}

.page-frame.page-transition-in.page-transition-in-visible .text-columns,
.page-frame.page-transition-in.page-transition-in-visible .grid-field {
  opacity: 1;
}

/* Promote layers during transitions for smoother painting */
.page-frame.page-transition-out .text-columns,
.page-frame.page-transition-out .grid-field,
.page-frame.page-transition-out .article-list-container,
.page-frame.page-transition-out .article-content,
.page-frame.page-transition-in .text-columns,
.page-frame.page-transition-in .grid-field,
.page-frame.page-transition-in .article-list-container,
.page-frame.page-transition-in .article-content {
  will-change: opacity;
}