/* PL-003 and PL-004. A single colour veil, followed by local content motion. */
:root {
  --motion-content-rise: 14px;
  --motion-scroll-rise: 8px;
}

/* Keep text accessible while it waits; image layers stay untouched. */
.reveal-pending { opacity: 0; transform: translate3d(0, var(--motion-scroll-rise), 0); }

html.page-arrival::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background: var(--previous-page-colour);
  animation: page-veil-out var(--motion-standard) var(--motion-easing) both;
}

/* The logo keeps its normal geometry and stays above the colour veil. */
html.page-arrival .brand {
  position: relative;
  z-index: 91;
}

/* Wait for the colour change before showing the new page's opening content. */
html.page-arrival .hero-copy,
html.page-arrival .hero-art,
html.page-arrival main .intro,
html.page-arrival .visual img,
html.page-arrival .section-head,
html.page-arrival .product,
html.page-arrival .work-heading,
html.page-arrival .work-card,
html.page-arrival .founder > *,
html.page-arrival .content > *,
html.page-arrival .gallery figure,
html.page-arrival .next {
  visibility: hidden;
}

@keyframes page-veil-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.page-arrival::before { animation: none; display: none; }
  html.page-arrival .hero-copy,
  html.page-arrival .hero-art,
  html.page-arrival main .intro,
  html.page-arrival .visual img,
  html.page-arrival .section-head,
  html.page-arrival .product,
  html.page-arrival .work-heading,
  html.page-arrival .work-card,
  html.page-arrival .founder > *,
  html.page-arrival .content > *,
  html.page-arrival .gallery figure,
  html.page-arrival .next { visibility: visible; }
}