:root {

  --motion-ease-reveal:     cubic-bezier(0.16, 1, 0.3, 1);
  --motion-stagger-step:    70ms;
  --motion-duration-press:  100ms;
  --motion-duration-kenburns: 450ms;
  --motion-blur-reveal:     12px;
  --motion-reveal-rise:     var(--space-16);
}

@media (max-width: 767px) {
  :root {
    --motion-reveal-rise: var(--space-8);
  }
}

.motion-ready .reveal {
  opacity: 0;
  transform: translateY(var(--motion-reveal-rise));
  transition:
    opacity   var(--motion-duration-slow) var(--motion-ease-reveal),
    transform var(--motion-duration-slow) var(--motion-ease-reveal);
  transition-delay: calc(var(--i, 0) * var(--motion-stagger-step));
  will-change: opacity, transform;
}

.motion-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

.motion-ready .program-card__photo img,
.motion-ready .testimonial__photo,
.motion-ready .member-card__photo img,
.motion-ready .post-figure__photo {
  filter: blur(var(--motion-blur-reveal));
  transform: scale(1.03);
  opacity: 0;
  transition:
    filter    var(--motion-duration-slow) var(--motion-ease-reveal),
    transform var(--motion-duration-slow) var(--motion-ease-reveal),
    opacity   var(--motion-duration-base) var(--motion-ease-reveal);
}

.motion-ready .program-card__photo img.is-loaded,
.motion-ready .testimonial__photo.is-loaded,
.motion-ready .member-card__photo img.is-loaded,
.motion-ready .post-figure__photo.is-loaded {
  filter: none;
  transform: none;
  opacity: 1;
}

.btn-pill-filled:active        { background: var(--color-secondary-800); }
.btn-pill--filled-icon:active  { background: var(--color-secondary-800); }
.btn-pill-filled-solid:active  { background: var(--color-secondary-800); }
.btn-pill-outline-dark:active  { background: var(--color-primary-200); }
.btn-pill--outline:active      { background: var(--color-primary-200); }
.btn-pill-outline-light:active { background: color-mix(in srgb, var(--color-white), transparent 80%); }
.btn-pill-filled-blue:active   { background: var(--color-primary-950); }

.btn-pill-filled:active,
.btn-pill--filled-icon:active,
.btn-pill-filled-solid:active,
.btn-pill-outline-dark:active,
.btn-pill--outline:active,
.btn-pill-outline-light:active,
.btn-pill-filled-blue:active {
  transition-duration: var(--motion-duration-press);
}

.program-card-link:active .program-card {
  background: var(--color-neutral-100);
  transition-duration: var(--motion-duration-press);
}

.news-card-link:active .news-card__body {
  background: var(--color-neutral-100);
  transition-duration: var(--motion-duration-press);
}

html {
  scroll-padding-top: calc(var(--nav-height) + var(--space-16));
}
@media (max-width: 767px) {
  html {
    scroll-padding-top: calc(var(--nav-height-mobile) + var(--space-16));
  }
}

@media (hover: hover) and (pointer: fine) {

  .program-card-link:hover .program-card__photo img.is-loaded,
  .testimonial:hover .testimonial__photo.is-loaded,
  .member-card:hover .member-card__photo img.is-loaded {
    transform: scale(1.04);
    transition-duration: var(--motion-duration-kenburns);
  }

  .story__card-photo img {
    transform-origin: center;
    transition: transform var(--motion-duration-kenburns) var(--motion-ease-reveal);
  }
  .story__card:hover .story__card-photo img {
    transform: scale(1.04);
  }

  .news-card__photo {
    transform-origin: center;
    transition: transform var(--motion-duration-kenburns) var(--motion-ease-reveal);
  }
  .news-card-link:hover .news-card__photo {
    transform: scale(1.04);
  }

  .impact__tile--metric::before,
  .impact__tile--label::before {
    transform-origin: center;
    transition: transform var(--motion-duration-kenburns) var(--motion-ease-reveal);
  }
  .impact__tile--metric:hover::before,
  .impact__tile--label:hover::before {
    transform: scale(1.04);
  }
}

@media (hover: hover) and (pointer: fine) {
  .amount-tile:not(.amount-tile--selected):hover {
    background: var(--color-primary-200);
    transition: background var(--motion-duration-base) var(--motion-ease-reveal);
  }
}
.amount-tile:not(.amount-tile--selected):active {
  background: var(--color-primary-200);
  transition: background var(--motion-duration-press);
}

.accordion-item {
  interpolate-size: allow-keywords;
}
.accordion-item::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size         var(--motion-duration-slow) var(--motion-ease-reveal),
    content-visibility var(--motion-duration-slow) var(--motion-ease-reveal) allow-discrete;
}
.accordion-item[open]::details-content {
  block-size: auto;
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .reveal {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  .motion-ready .program-card__photo img,
  .motion-ready .testimonial__photo,
  .motion-ready .member-card__photo img,
  .motion-ready .post-figure__photo {
    filter: none;
    transform: none;
    opacity: 1;
  }

  .program-card-link:hover .program-card__photo img.is-loaded,
  .testimonial:hover .testimonial__photo.is-loaded,
  .member-card:hover .member-card__photo img.is-loaded,
  .story__card:hover .story__card-photo img,
  .news-card-link:hover .news-card__photo,
  .impact__tile--metric:hover::before,
  .impact__tile--label:hover::before {
    transform: none;
  }

  .accordion-item::details-content,
  .amount-tile:not(.amount-tile--selected):hover,
  .amount-tile:not(.amount-tile--selected):active {
    transition: none;
  }
}