:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

.is-motion-pending {
  opacity: 0;
}

.hero__rule {
  transform-origin: left center;
}

/* Animate the content within each page instead of sliding the entire viewport. */
.slide {
  transform: none;
  transition: opacity .34s ease, visibility 0s .34s;
}

.slide.is-active {
  transition: opacity .34s ease, visibility 0s;
}

.slide:not(.is-active) .core-ring,
[data-motion-paused] .core-ring {
  animation-play-state: paused;
}

.policy-line,
.why-model,
.why-values > article,
.outcome-list > article,
.city-benefit,
.proof-metrics > div {
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.policy-line {
  color: inherit;
  text-decoration: none;
}

.policy-line__number,
.policy-line__arrow,
.outcome-list article > span,
.city-benefit > span,
.journey-step__number span:last-child {
  display: inline-block;
  transition: transform .3s var(--motion-ease), color .25s ease;
}

.journey-picture > img,
.proof-image,
.why-role img {
  transition: transform .65s var(--motion-ease);
}

.proof-item {
  overflow: hidden;
}

.source-card,
.overview__item,
.button,
.icon-button,
.text-button {
  transition: transform .25s var(--motion-ease), background-color .25s ease, border-color .25s ease, color .25s ease;
}

.button > span,
.text-button > span {
  display: inline-block;
  transition: transform .25s var(--motion-ease);
}

.policy-line:focus-visible,
.source-card:focus-visible,
.overview__item:focus-visible {
  outline: 2px solid var(--sea-deep);
  outline-offset: -2px;
  background-color: rgba(255, 255, 255, .75);
}

.hotspot button[aria-expanded="true"] {
  background: var(--coral);
  border-color: white;
}

@media (hover: hover) and (pointer: fine) {
  .policy-line:hover,
  .why-model:hover,
  .why-values > article:hover,
  .outcome-list > article:hover,
  .city-benefit:hover,
  .proof-metrics > div:hover {
    background-color: rgba(255, 255, 255, .6);
  }

  .policy-line:hover {
    box-shadow: none;
  }

  .policy-line:hover .policy-line__number,
  .outcome-list article:hover > span,
  .city-benefit:hover > span {
    transform: translateX(3px);
  }

  .policy-line:hover .policy-line__arrow {
    transform: translate(2px, -2px);
    color: var(--coral);
  }

  .journey-step:hover .journey-picture > img,
  .why-role figure:hover img {
    transform: scale(1.035);
  }

  .proof-item:hover .proof-image {
    transform: scale(1.015);
  }

  .journey-step:hover .journey-step__number span:last-child,
  .button:hover > span,
  .text-button:hover > span {
    transform: translateX(3px);
  }

  .icon-button:hover {
    background-color: rgba(127, 147, 145, .18);
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-motion-pending {
    opacity: 1;
  }

  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .button:hover,
  .source-card:hover,
  .overview__item:hover,
  .icon-button:hover,
  .hotspot button:hover,
  .policy-line:hover .policy-line__number,
  .policy-line:hover .policy-line__arrow,
  .outcome-list article:hover > span,
  .city-benefit:hover > span,
  .journey-step:hover .journey-picture > img,
  .why-role figure:hover img,
  .proof-item:hover .proof-image,
  .journey-step:hover .journey-step__number span:last-child,
  .button:hover > span,
  .text-button:hover > span {
    transform: none;
  }

  .atlas__backdrop {
    transform: none;
  }
}