/* Shared, slower entrance rhythm for every NEX page. */
:root {
  --reveal-opacity-duration:1.05s;
  --reveal-motion-duration:1.2s;
  --reveal-ease:cubic-bezier(.22,.61,.36,1);
}

body .reveal.reveal {
  opacity:0;
  transform:translate3d(0,24px,0);
  transition-duration:var(--reveal-opacity-duration),var(--reveal-motion-duration);
  transition-timing-function:var(--reveal-ease);
  will-change:opacity,transform;
}

body .reveal.reveal.is-visible {
  opacity:1;
  transform:translate3d(0,0,0);
}

/* High-specificity cards keep their own hover timing, so entrance uses a one-off animation. */
body .growth-method-page > .page-hero + .section .principle.reveal.is-visible,
body .agency-page > .page-hero + .section .summary-card.reveal.is-visible,
body .agency-page > .page-hero + .section .project-details.reveal.is-visible {
  animation:smooth-card-reveal var(--reveal-motion-duration) var(--reveal-ease) backwards;
}

body .growth-method-page > .page-hero + .section .principle.reveal:nth-child(2).is-visible,
body .agency-page > .page-hero + .section .project-details.reveal.is-visible {
  animation-delay:.1s;
}

body .growth-method-page > .page-hero + .section .principle.reveal:nth-child(3).is-visible {
  animation-delay:.2s;
}

@keyframes smooth-card-reveal {
  from {
    opacity:0;
    transform:translate3d(0,24px,0);
  }
  to {
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@media (prefers-reduced-motion:reduce) {
  body .reveal.reveal,
  body .reveal.reveal.is-visible {
    opacity:1;
    transform:none;
    transition:none;
    will-change:auto;
  }

  body .growth-method-page > .page-hero + .section .principle.reveal.is-visible,
  body .agency-page > .page-hero + .section .summary-card.reveal.is-visible,
  body .agency-page > .page-hero + .section .project-details.reveal.is-visible {
    animation:none;
  }
}