.wordmark,
.wordmark span,
.nav-links a,
.footer-links a,
.button,
.button span,
.feature-tags li,
.avenly-carousel,
.phone,
.feature-slide > .phone,
.carousel-controls > button,
.carousel-dots button::after,
.partner h2 em {
  transition-duration: 320ms;
  transition-property: color, background-color, border-color, box-shadow, transform, letter-spacing, opacity;
  transition-timing-function: var(--ease-out);
}

.nav-links a,
.footer-links a,
.button {
  position: relative;
}

.nav-links a::after,
.footer-links a::after {
  position: absolute;
  right: .5rem;
  bottom: .45rem;
  left: .5rem;
  height: 1px;
  background: var(--lava-orange);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 320ms var(--ease-out);
}

.button {
  overflow: hidden;
  isolation: isolate;
}

.button::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: currentColor;
  content: "";
  opacity: .09;
  transform: translateY(102%);
  transition: transform 380ms var(--ease-out);
}

.hero-label,
.hero h1,
.hero-summary,
.hero .button,
.hero-meta {
  animation: hero-enter 820ms var(--ease-out) both;
}

.hero h1 {
  animation-delay: 90ms;
}

.hero-summary {
  animation-delay: 180ms;
}

.hero .button {
  animation-delay: 250ms;
}

.hero-meta {
  animation-delay: 360ms;
}

.hero-picture img {
  animation: hero-drift 18s ease-in-out infinite alternate;
  transform: scale(1.04);
  transform-origin: 62% 46%;
  will-change: transform;
}

.hero-picture::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: radial-gradient(ellipse at 70% 31%, rgba(255, 88, 33, .2), rgba(255, 74, 28, .07) 14%, transparent 34%);
  content: "";
  mix-blend-mode: screen;
  pointer-events: none;
  animation: crest-breathe 9s ease-in-out infinite alternate;
}

.motion-ready [data-reveal] {
  opacity: 0;
  filter: blur(0);
  transition:
    opacity 700ms var(--ease-out),
    transform 900ms cubic-bezier(.16, .82, .24, 1),
    filter 850ms var(--ease-out),
    clip-path 900ms cubic-bezier(.16, .82, .24, 1);
  will-change: opacity, transform, filter, clip-path;
}

.motion-ready [data-reveal="line"] {
  transform: translate3d(-42px, 0, 0) scaleX(.96);
  transform-origin: left center;
}

.motion-ready [data-reveal="clip-up"] {
  filter: blur(7px);
  transform: translate3d(0, 64px, 0);
}

.motion-ready [data-reveal="clip-up"] > * {
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, 28px, 0);
  transition:
    clip-path 900ms cubic-bezier(.16, .82, .24, 1),
    transform 900ms cubic-bezier(.16, .82, .24, 1);
}

.motion-ready [data-reveal="clip-up"] > :nth-child(2) {
  transition-delay: 120ms;
}

.motion-ready [data-reveal="clip-up"].is-visible > * {
  clip-path: inset(0 0 0 0);
  transform: translate3d(0, 0, 0);
}

.motion-ready [data-reveal="fly-left"] {
  filter: blur(4px);
  transform: translate3d(-76px, 24px, 0);
}

.motion-ready [data-reveal="tilt-right"] {
  filter: blur(4px);
  transform: perspective(1200px) translate3d(96px, 28px, 0) rotateY(-8deg) rotateZ(1deg) scale(.95);
  transform-origin: right center;
}

.motion-ready [data-reveal="diagonal"] {
  filter: blur(3px);
  transform: translate3d(58px, 54px, 0) rotate(1.5deg);
}

.motion-ready [data-reveal="footer"] {
  transform: translate3d(0, 34px, 0);
}

.motion-ready [data-reveal].is-visible {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}

.motion-ready .avenly-copy[data-reveal] > * {
  opacity: 0;
  transform: translate3d(-20px, 18px, 0);
  transition: opacity 560ms var(--ease-out), transform 700ms var(--ease-out);
}

.motion-ready .avenly-copy.is-visible > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.motion-ready .avenly-copy.is-visible > :nth-child(1) {
  transition-delay: 100ms;
}

.motion-ready .avenly-copy.is-visible > :nth-child(2) {
  transition-delay: 160ms;
}

.motion-ready .avenly-copy.is-visible > :nth-child(3) {
  transition-delay: 220ms;
}

.motion-ready .avenly-copy.is-visible > :nth-child(4) {
  transition-delay: 280ms;
}

.motion-ready .avenly-copy.is-visible > :nth-child(5) {
  transition-delay: 340ms;
}

.motion-ready .avenly-copy.is-visible > :nth-child(6) {
  transition-delay: 400ms;
}

.motion-ready .avenly-copy.is-visible > :nth-child(7) {
  transition-delay: 460ms;
}

.belief-statement.is-visible,
.avenly-carousel.is-visible,
.partner-action.is-visible {
  transition-delay: 90ms;
}

.belief-credit.is-visible {
  transition-delay: 180ms;
}

.status-badge i {
  animation: status-pulse 2.4s ease-in-out infinite;
}

.avenly-slide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 620ms ease, transform 720ms cubic-bezier(.18, .76, .22, 1);
}

.avenly-slide.is-active {
  z-index: 4;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
}

.avenly-slide.is-leaving {
  z-index: 3;
  opacity: 0;
  transform: translate3d(-15%, 3%, 0) rotate(-2.5deg) scale(.95);
}

.partner::before {
  position: absolute;
  z-index: -1;
  width: min(52vw, 780px);
  height: min(52vw, 780px);
  top: -55%;
  right: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 91, 34, .19), rgba(255, 91, 34, 0) 68%);
  content: "";
  animation: lava-glow 10s ease-in-out infinite alternate;
}

@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(26px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-drift {
  from {
    transform: translate3d(0, 0, 0) scale(1.04);
  }

  to {
    transform: translate3d(-1.4%, -.7%, 0) scale(1.075);
  }
}

@keyframes crest-breathe {
  from {
    opacity: .28;
    transform: translate3d(0, 0, 0) scale(.98);
  }

  to {
    opacity: .62;
    transform: translate3d(-1%, .5%, 0) scale(1.04);
  }
}

@keyframes status-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(51, 183, 177, .35);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(51, 183, 177, 0);
  }
}

@keyframes lava-glow {
  from {
    opacity: .6;
    transform: translate3d(0, -3%, 0) scale(.94);
  }

  to {
    opacity: 1;
    transform: translate3d(-8%, 8%, 0) scale(1.08);
  }
}

@media (hover: hover) and (pointer: fine) {
  .wordmark:hover {
    letter-spacing: -.035em;
    transform: translateY(-1px);
  }

  .wordmark:hover span {
    color: #ff7c4f;
    text-shadow: 0 0 18px rgba(255, 91, 34, .45);
  }

  .nav-links a:hover,
  .footer-links a:hover {
    color: var(--white);
    transform: translateY(-2px);
  }

  .nav-links a:hover::after,
  .footer-links a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .button:hover {
    letter-spacing: .105em;
    transform: translateY(-3px);
  }

  .button:hover::before {
    transform: translateY(0);
  }

  .button:hover span {
    transform: translate3d(5px, -2px, 0);
  }

  .feature-tags li:hover {
    background: #dce7ff;
    box-shadow: 0 8px 22px rgba(41, 101, 204, .14);
    transform: translateY(-4px) rotate(-1deg);
  }

  .motion-ready .avenly-carousel.is-visible:hover {
    border-color: rgba(41, 101, 204, .18);
    box-shadow: 0 42px 110px rgba(30, 41, 59, .21);
    transform: translateY(-6px);
  }

  .feature-slide:hover > .phone {
    transform: translateY(-8px);
  }

  .carousel-controls > button:hover {
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(30, 41, 59, .2);
    transform: translateY(-3px) scale(1.05);
  }

  .carousel-dots button:hover::after {
    background: var(--avenly-blue);
    transform: translate(-50%, -50%) scale(1.3);
  }

  .partner:hover h2 em {
    color: #ff784a;
    text-shadow: 0 0 34px rgba(255, 91, 34, .2);
    transform: translateX(.04em);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .hero-picture,
  .motion-ready [data-reveal],
  .motion-ready [data-reveal].is-visible {
    opacity: 1;
    clip-path: none;
    filter: none;
    transform: none;
  }

  .hero-picture img,
  .hero-picture::after {
    animation: none !important;
    transform: none !important;
  }

  .motion-ready .avenly-copy[data-reveal] > *,
  .motion-ready .avenly-copy.is-visible > *,
  .motion-ready [data-reveal="clip-up"] > *,
  .motion-ready [data-reveal="clip-up"].is-visible > * {
    opacity: 1;
    clip-path: none;
    transform: none;
  }

  .avenly-slide {
    transition: none;
  }
}
