:root {
  --ease-anim: cubic-bezier(.22, 1, .36, 1);
  --anim-shift: 30px;
  --anim-shift-sm: 20px;
  --anim-side: 24px;
  --anim-dur: .72s;
}

@keyframes heroInSm {
  from { opacity: 0; transform: translateY(15px); }
}

@keyframes heroIn {
  from { opacity: 0; transform: translateY(25px); }
}

.hero__content > * {
  animation: heroIn .74s var(--ease-anim) backwards;
}

.hero__logo,
.hero__eyebrow {
  animation-name: heroInSm;
  animation-delay: 0s;
}

.hero__title   { animation-delay: .15s; }
.hero__text    { animation-delay: .3s; }
.hero__cta     { animation-delay: .45s; }
.hero__support { animation-name: heroInSm; animation-delay: .6s; }

@keyframes revealUp {
  from { opacity: 0; transform: translateY(var(--anim-shift)); }
}

@keyframes revealUpSm {
  from { opacity: 0; transform: translateY(var(--anim-shift-sm)); }
}

@keyframes revealLeft {
  from { opacity: 0; transform: translateX(calc(var(--anim-side) * -1)) scale(.985); }
}

@keyframes revealRight {
  from { opacity: 0; transform: translateX(var(--anim-side)); }
}

.reveal,
.reveal-left,
.reveal-right {
  opacity: 0;
  transform: none;
  transition: none;
}

.reveal-seq > * { opacity: 0; }

.reveal.is-visible {
  opacity: 1;
  animation: revealUp var(--anim-dur) var(--ease-anim) backwards;
}

.reveal-left.is-visible {
  opacity: 1;
  animation: revealLeft .82s var(--ease-anim) backwards;
}

.reveal-right.is-visible {
  opacity: 1;
  animation: revealRight .82s var(--ease-anim) backwards;
}

.reveal-seq.is-visible > * {
  opacity: 1;
  animation: revealUpSm .66s var(--ease-anim) backwards;
}

.reveal-seq.is-visible > *:nth-child(2) { animation-delay: .12s; }
.reveal-seq.is-visible > *:nth-child(3) { animation-delay: .24s; }
.reveal-seq.is-visible > *:nth-child(4) { animation-delay: .36s; }
.reveal-seq.is-visible > *:nth-child(5) { animation-delay: .48s; }

.cta__inner.is-visible .cta__support { animation-delay: .36s; }
.cta__inner.is-visible .btn { animation-delay: .5s; }

.faq > .reveal:nth-child(2) { animation-delay: .07s; }
.faq > .reveal:nth-child(3) { animation-delay: .14s; }
.faq > .reveal:nth-child(4) { animation-delay: .21s; }

@media (min-width: 641px) {
  .grid--3 > .reveal:nth-child(2) { animation-delay: .08s; }
  .grid--3 > .reveal:nth-child(3) { animation-delay: .16s; }
  .grid--3 > .reveal:nth-child(4) { animation-delay: .24s; }
  .grid--3 > .reveal:nth-child(5) { animation-delay: .32s; }
  .grid--3 > .reveal:nth-child(6) { animation-delay: .4s; }
}

@media (min-width: 761px) {
  .grid--2 > .reveal:nth-child(2) { animation-delay: .08s; }
  .grid--2 > .reveal:nth-child(3) { animation-delay: .16s; }
  .grid--2 > .reveal:nth-child(4) { animation-delay: .24s; }
}

.card,
.step,
.feature {
  transition:
    transform .3s var(--ease-anim),
    border-color .3s var(--ease-anim),
    box-shadow .3s var(--ease-anim);
}

.card__icon,
.step__icon {
  transition: transform .3s var(--ease-anim);
}

@media (hover: hover) {
  .card:hover,
  .step:hover {
    transform: translateY(-4px);
    border-color: rgba(100, 35, 43, .28);
    box-shadow: 0 2px 4px rgba(16, 16, 18, .04), 0 20px 34px -24px rgba(16, 16, 18, .45);
  }

  .feature:hover {
    transform: translateY(-4px);
    border-color: rgba(251, 248, 245, .28);
  }

  .card:hover .card__icon,
  .step:hover .step__icon {
    transform: scale(1.05);
  }

  .btn:hover .btn__icon,
  .hero__cta:hover .hero__cta-icon {
    transform: translateX(3px);
  }
}

.hero__cta,
.cta .btn {
  position: relative;
}

.hero__cta::after,
.cta__inner.is-visible .btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--c-copper);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  animation: ctaHalo 3.4s var(--ease-anim) 3;
}

.hero__cta::after { animation-delay: 1.4s; }
.cta__inner.is-visible .btn::after { animation-delay: 1s; }

@keyframes ctaHalo {
  0%        { opacity: .45; transform: scale(1); }
  55%, 100% { opacity: 0;   transform: scale(1.05); }
}

.footer__link-text,
.chip__text {
  position: relative;
}

.footer__link-text::after,
.chip__text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s var(--ease-anim);
}

@media (hover: hover) {
  .footer__link:hover .footer__link-text::after,
  .chip--link:hover .chip__text::after {
    transform: scaleX(1);
  }
}

@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }

  .faq__item::details-content {
    height: 0;
    overflow: hidden;
    transition: height .38s var(--ease-anim), content-visibility .38s allow-discrete;
  }

  .faq__item[open]::details-content { height: auto; }
}

@media (max-width: 900px) {
  .reveal-left.is-visible,
  .reveal-right.is-visible {
    animation-name: revealUp;
    animation-duration: .7s;
  }
}

@media (max-width: 640px) {
  :root {
    --anim-shift: 18px;
    --anim-shift-sm: 14px;
    --anim-side: 16px;
    --anim-dur: .6s;
  }

  .reveal-left.is-visible,
  .reveal-right.is-visible { animation-duration: .66s; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__content > *,
  .reveal.is-visible,
  .reveal-left.is-visible,
  .reveal-right.is-visible,
  .reveal-seq.is-visible > * {
    animation: none !important;
  }

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-seq > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero__cta::after,
  .cta__inner.is-visible .btn::after {
    animation: none !important;
    opacity: 0 !important;
  }

  .faq__item::details-content { transition: none !important; }
}