/* The reference interaction: expand, reveal the image, and open the copy panel. */
.process-cards_wrap {
  --card-ease: cubic-bezier(.22, .68, 0, 1);
  --card-duration: 800ms;
}
.process-cards_wrap .process-cards_card {
  min-height: 0;
  transition: flex-grow var(--card-duration) var(--card-ease), background-color 250ms ease;
}
.process-cards_wrap .process-cards_media {
  transition: clip-path var(--card-duration) var(--card-ease);
}
.process-cards_wrap .process-cards_panel {
  background-color: transparent;
  transition: width var(--card-duration) var(--card-ease), background-color 250ms ease;
}
.process-cards_wrap .process-cards_card.is-active .process-cards_panel {
  background-color: #fff;
  width: 61.83%;
}
.process-cards_wrap .process-cards_title,
.process-cards_wrap .process-cards_number {
  transition: font-size var(--card-duration) var(--card-ease);
}
.process-cards_wrap .process-cards_copy-wrap {
  display: grid;
  grid-template-rows: 0fr;
  height: auto;
  opacity: 0;
  transition: grid-template-rows var(--card-duration) var(--card-ease), opacity 300ms ease;
}
.process-cards_wrap .process-cards_card.is-active .process-cards_copy-wrap {
  grid-template-rows: 1fr;
  opacity: 1;
}
.process-cards_copy-clip { min-height: 0; overflow: hidden; }
.process-cards_wrap .process-cards_copy { max-width: 100%; }
.process-cards_wrap .process-cards_head { gap: .75rem; }
.process-cards_wrap .process-cards_card:focus-visible { outline-offset: -3px; }

/* Deliberate, small loops illustrate the problem described directly below. */
.icon-animated .narrative-problem-icon {
  display: block;
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.narrative-problem-icon .icon-ink { fill: currentColor; stroke: none; }
.icon-audience-person { animation: audience-drift 4.8s ease-in-out infinite; }
.icon-audience-person--left { --audience-drift: -7px; animation-delay: -.25s; }
.icon-audience-person--middle { --audience-drift: 0px; animation-delay: -.55s; }
.icon-audience-person--right { --audience-drift: 7px; animation-delay: -.85s; }
.icon-signal { stroke-dasharray: 1; animation: missed-signal 4.8s ease-in-out infinite; }
@keyframes audience-drift {
  0%, 12%, 100% { transform: translate(0, 0); opacity: 1; }
  46%, 70% { transform: translate(var(--audience-drift), 4px); opacity: .18; }
}
@keyframes missed-signal {
  0%, 8%, 85%, 100% { stroke-dashoffset: 1; opacity: 0; }
  30%, 60% { stroke-dashoffset: 0; opacity: 1; }
  72% { stroke-dashoffset: -1; opacity: 0; }
}
.icon-route-guide { opacity: .16; }
.icon-search-channel { opacity: .6; }
.icon-search-decline { stroke-dasharray: 1; animation: search-traffic-declines 6s ease-in-out infinite; }
.icon-new-route, .icon-new-route-arrow, .icon-customer-reached { stroke: var(--narrative-blue); }
.icon-new-route { stroke-dasharray: 1; animation: youtube-route-opens 6s ease-in-out infinite; }
.icon-new-route-arrow, .icon-customer-reached { animation: youtube-reaches-customer 6s ease-in-out infinite; }
@keyframes search-traffic-declines {
  0%, 6% { stroke-dashoffset: 1; opacity: .8; }
  32%, 50% { stroke-dashoffset: 0; opacity: .8; }
  72%, 92% { stroke-dashoffset: 0; opacity: .2; }
  98%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes youtube-route-opens {
  0%, 30% { stroke-dashoffset: 1; opacity: 0; }
  35% { stroke-dashoffset: 1; opacity: 1; }
  60%, 88% { stroke-dashoffset: 0; opacity: 1; }
  98%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes youtube-reaches-customer {
  0%, 54% { opacity: 0; }
  65%, 88% { opacity: 1; }
  98%, 100% { opacity: 0; }
}
.icon-attribution-dot { animation: attribution-stops 4.8s ease-in-out infinite; }
.icon-attribution-question { animation: attribution-question 4.8s ease-in-out infinite; }
@keyframes attribution-stops {
  0%, 8%, 100% { transform: translate(0, 0); opacity: 0; }
  15% { transform: translate(0, 0); opacity: 1; }
  35% { transform: translate(0, 17px); opacity: 1; }
  55%, 70% { transform: translate(13px, 17px); opacity: 1; }
  82% { transform: translate(13px, 17px); opacity: 0; }
}
@keyframes attribution-question {
  0%, 18%, 100% { opacity: .35; }
  50%, 78% { opacity: 1; }
}
@media (max-width: 991px) {
  .process-cards_wrap { min-height: 720px; }
  .process-cards_wrap .process-cards_card.is-active .process-cards_panel { width: 90%; }
}
@media (prefers-reduced-motion: reduce) {
  .process-cards_wrap *, .icon-animated * { animation: none !important; transition: none !important; }
  .icon-signal { stroke-dashoffset: 0; opacity: .4; }
  .icon-attribution-dot { opacity: 0; }
  .icon-search-decline { stroke-dashoffset: 0; opacity: .45; }
  .icon-new-route { stroke-dashoffset: 0; }
  .icon-new-route-arrow, .icon-customer-reached { opacity: 1; }
}