/* Scroll-replayed focus entrance for the four homepage statistics. */
.js .stat-showcase[data-stats-focus] .stats-card {
  --stats-focus-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  opacity: 0;
  filter: blur(8px);
  transform: scale(1.25);
  transition-property: opacity, transform, filter, border-color, box-shadow;
  transition-duration: 800ms, 800ms, 800ms, 220ms, 220ms;
  transition-timing-function: var(--stats-focus-ease), var(--stats-focus-ease),
    var(--stats-focus-ease), ease, ease;
  transition-delay: calc(var(--i, 0) * 140ms), calc(var(--i, 0) * 140ms),
    calc(var(--i, 0) * 140ms), 0s, 0s;
}

.js .stat-showcase[data-stats-focus] .stats-card.in {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

.js .stat-showcase[data-stats-focus] .stats-icon {
  opacity: 0;
  transform: scale(0);
  animation: none;
  transition: opacity 500ms cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: calc(250ms + var(--i, 0) * 140ms);
}

.js .stat-showcase[data-stats-focus] .stats-card.in .stats-icon {
  opacity: 1;
  transform: scale(1);
}

.js .stat-showcase[data-stats-focus] .stats-rule::before {
  transform: scaleX(0);
  transition: transform 500ms var(--stats-focus-ease, cubic-bezier(0.2, 0.7, 0.2, 1));
  transition-delay: calc(500ms + var(--i, 0) * 140ms);
}

.js .stat-showcase[data-stats-focus] .stats-card.in .stats-rule::before {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .js .stat-showcase[data-stats-focus] .stats-card,
  .js .stat-showcase[data-stats-focus] .stats-card.in {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
    will-change: auto;
  }

  .js .stat-showcase[data-stats-focus] .stats-icon,
  .js .stat-showcase[data-stats-focus] .stats-card.in .stats-icon,
  .js .stat-showcase[data-stats-focus] .stats-rule::before,
  .js .stat-showcase[data-stats-focus] .stats-card.in .stats-rule::before {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.no-js .stat-showcase[data-stats-focus] .stats-card {
  opacity: 1;
  filter: none;
  transform: none;
}