.page-loader { display: none; }
.has-page-intro .page-loader {
  position: fixed;
  inset: 0;
  z-index: 19;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  background: #161617;
  color: #a3a3a3;
  font-size: 13px;
  line-height: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms ease-out, visibility 160ms;
}
[data-page-stage="loading"][data-show-loader="true"] .page-loader { opacity: 1; visibility: visible; pointer-events: auto; }
.page-loader-matrix {
  display: grid;
  grid-template-columns: repeat(5, 5px);
  grid-template-rows: repeat(5, 5px);
  gap: 3px;
}
.page-loader-matrix > span {
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: #d4d4d4;
  animation: loader-ripple 1800ms cubic-bezier(.37, 0, .63, 1) infinite;
  animation-delay: var(--ripple-delay);
}
@keyframes loader-ripple {
  0%, 65%, 100% { transform: scale(.35); opacity: .25; }
  30% { transform: scale(1); opacity: 1; }
}

/* Animate the contents, never the sticky/grid ancestors. */
.has-page-intro :is(.home, .about, .case-study) .section {
  opacity: 1 !important;
  transform: none !important;
}
[data-page-stage="loading"] :is(.hero > .content, .about-sticky, .case-sticky, .utility-page-wrap, .protected-wrap) {
  opacity: 0;
  filter: blur(10px);
}
:is([data-page-stage="loading"], [data-page-stage="intro"]) :is(.home-projects, .about-main, .case-main, .footer) {
  visibility: hidden;
}
[data-page-stage="intro"] :is(.hero > .content, .about-sticky, .case-sticky, .utility-page-wrap, .protected-wrap) {
  animation: intro-reveal 300ms ease-out both;
}
[data-page-stage="projects"] :is(.home-projects, .about-main, .case-main) {
  animation: projects-reveal 400ms ease-out both;
}
[data-page-stage="exiting"] :is(.hero > .content, .about-sticky, .case-sticky, .home-projects, .about-main, .case-main, .footer > *, .utility-page-wrap, .protected-wrap) {
  animation: page-exit 200ms ease-in both;
  pointer-events: none;
}
@keyframes intro-reveal {
  from { opacity: 0; filter: blur(10px); }
  to { opacity: 1; filter: blur(0); }
}
@keyframes projects-reveal {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes page-exit {
  to { opacity: 0; filter: blur(10px); }
}
@media (prefers-reduced-motion: reduce) {
  .has-page-intro .page-loader { transition: none; }
  .has-page-intro .page-loader-matrix > span,
  [data-page-stage] :is(.hero > .content, .about-sticky, .case-sticky, .home-projects, .about-main, .case-main, .footer > *, .utility-page-wrap, .protected-wrap) {
    animation: none;
  }
}