.fact-card__accessible-value {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.fact-card__count {
  display: inline-block;
  min-width: 1.24em;
  font-variant-numeric: tabular-nums;
}

.fact-card__year {
  display: inline-flex;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .08em;
  margin-bottom: -.08em;
}

.fact-card__digit {
  display: inline-block;
  transform-origin: 50% 100%;
}

.fact-card__digit:nth-child(2) { --digit-delay: 85ms; }
.fact-card__digit:nth-child(3) { --digit-delay: 170ms; }
.fact-card__digit:nth-child(4) { --digit-delay: 255ms; }

.cards-motion [data-card-reveal] {
  --card-delay: 0ms;
  --card-ease: cubic-bezier(.16, 1, .3, 1);
}

.cards-motion [data-card-reveal]:not(.is-visible):not(:focus-within) {
  opacity: 0;
  transform: translateY(24px);
}

.cards-motion [data-card-reveal].is-visible {
  animation: card-arrive 900ms var(--card-ease) var(--card-delay) backwards;
}

.cards-motion :is(.fact-card, .engagement, .security-card)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, #38bdf814 47%, #bae6fd18 50%, transparent 64%);
  background-size: 280% 100%;
  background-position: 100% 0;
  opacity: 0;
}

.cards-motion :is(.fact-card, .engagement, .security-card).is-visible::after {
  animation: card-light 1500ms ease-in-out calc(var(--card-delay) + 200ms) backwards;
}

.cards-motion .is-visible :is(.fact-card__icon, .engagement__badge-icon, .security-card__icon) {
  animation: card-icon 1000ms var(--card-ease) calc(var(--card-delay) + 140ms) backwards;
}

.cards-motion .is-visible :is(.fact-card__label, .engagement h3, .security-card h3, .intro__statement) {
  animation: card-detail 750ms var(--card-ease) calc(var(--card-delay) + 170ms) backwards;
}

.cards-motion .is-visible :is(.engagement p, .security-card p, .intro__tagline, .fact-card__value--text) {
  animation: card-detail 800ms var(--card-ease) calc(var(--card-delay) + 240ms) backwards;
}

.cards-motion .is-visible :is(.engagement__foot, .security-card__guarantee) {
  animation: card-detail 800ms var(--card-ease) calc(var(--card-delay) + 340ms) backwards;
}

.cards-motion .is-visible :is(.engagement__featured-ribbon, .fact-card__plus, .security-card__check) {
  display: inline-block;
  animation: card-accent 950ms var(--card-ease) calc(var(--card-delay) + 460ms) backwards;
}

.cards-motion .is-visible .fact-card__digit {
  animation: card-digit 1100ms var(--card-ease) calc(var(--card-delay) + 230ms + var(--digit-delay, 0ms)) backwards;
}

@keyframes card-arrive {
  from { opacity: 0; transform: translateY(24px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@keyframes card-detail {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes card-icon {
  from { opacity: 0; transform: translateY(8px) scale(.8) rotate(-12deg); }
  65% { opacity: 1; transform: translateY(0) scale(1.04) rotate(2deg); }
  to { opacity: 1; transform: none; }
}

@keyframes card-digit {
  from { opacity: 0; transform: translateY(110%) rotateX(-35deg); }
  to { opacity: 1; transform: none; }
}

@keyframes card-accent {
  from { opacity: 0; transform: translateY(5px) scale(.88); }
  to { opacity: 1; transform: none; }
}

@keyframes card-light {
  0% { opacity: 0; background-position: 100% 0; }
  35% { opacity: 1; }
  100% { opacity: 0; background-position: 0% 0; }
}

.cards-motion [data-card-reveal]:focus-within,
.cards-motion [data-card-reveal]:focus-within * {
  animation: none !important;
  opacity: 1;
  transform: none;
}

.cards-motion [data-card-reveal].is-restored,
.cards-motion [data-card-reveal].is-restored *,
.cards-motion [data-card-reveal].is-restored::after {
  animation: none !important;
}

[data-motion="static"].cards-motion [data-card-reveal],
[data-motion="static"].cards-motion [data-card-reveal] *,
[data-motion="static"].cards-motion [data-card-reveal]::after {
  animation: none !important;
}

[data-motion="static"].cards-motion [data-card-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .cards-motion [data-card-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .cards-motion [data-card-reveal],
  .cards-motion [data-card-reveal] *,
  .cards-motion [data-card-reveal]::after {
    animation: none !important;
  }
}