html.motion [data-page="home"] .hero-inner h1,
html.motion [data-page="home"] .hero-lede,
html.motion [data-page="home"] .hero-meta,
html.motion [data-page="home"] .hero-cta .hero-btn,
html.motion [data-page="home"] .hero-controls {
  opacity: 0;
}

html.motion [data-page="home"] .hero-line {
  display: block;
  will-change: transform, opacity;
}

html.motion [data-page="home"] .hero-bg {
  will-change: transform;
}

html.motion [data-page="home"] .mission-quote .quote-card,
html.motion [data-page="home"] .mission-body .eyebrow,
html.motion [data-page="home"] .mission-body h2,
html.motion [data-page="home"] .mission-body > p,
html.motion [data-page="home"] .mission-cta,
html.motion [data-page="home"] .pillar {
  opacity: 0;
}

html.motion [data-page="home"] .quote-card .tape {
  opacity: 0;
}

html.motion [data-page="home"] .action-head .eyebrow,
html.motion [data-page="home"] .action-head h2,
html.motion [data-page="home"] .action-head p {
  opacity: 0;
}

html.motion [data-page="home"] .home-impact-head {
  opacity: 0;
}
html.motion [data-page="home"] .impact-card {
  opacity: 0;
  will-change: transform, opacity;
}

html.motion [data-page="home"] .program-card {
  opacity: 0;
  will-change: transform, opacity;
}

html.motion [data-page="home"] .join-card {
  opacity: 0;
  will-change: transform, opacity;
}
html.motion [data-page="home"] .join-card .pin {
  opacity: 0;
}

html.motion [data-page="home"] .program-card,
html.motion [data-page="home"] .join-card {
  transform-origin: 50% 15%;
}

html.motion [data-page="home"] .motion-done {
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  html.motion [data-page="home"] .hero-inner h1,
  html.motion [data-page="home"] .hero-lede,
  html.motion [data-page="home"] .hero-meta,
  html.motion [data-page="home"] .hero-cta .hero-btn,
  html.motion [data-page="home"] .hero-controls,
  html.motion [data-page="home"] .mission-quote .quote-card,
  html.motion [data-page="home"] .mission-body .eyebrow,
  html.motion [data-page="home"] .mission-body h2,
  html.motion [data-page="home"] .mission-body > p,
  html.motion [data-page="home"] .mission-cta,
  html.motion [data-page="home"] .pillar,
  html.motion [data-page="home"] .quote-card .tape,
  html.motion [data-page="home"] .action-head .eyebrow,
  html.motion [data-page="home"] .action-head h2,
  html.motion [data-page="home"] .action-head p,
  html.motion [data-page="home"] .home-impact-head,
  html.motion [data-page="home"] .impact-card,
  html.motion [data-page="home"] .program-card,
  html.motion [data-page="home"] .join-card,
  html.motion [data-page="home"] .join-card .pin {
    opacity: 1 !important;
  }
}