.hero {
  animation: heroReveal 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.brand-line {
  animation: fadeUp 0.8s ease both;
}

.hero-copy h1 {
  animation: titleReveal 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

.hero-copy p {
  animation: fadeUp 0.9s ease 0.2s both;
}

.compare-button {
  animation: fadeUp 0.9s ease 0.32s both;
}

.micro-note {
  animation: fadeUp 0.9s ease 0.42s both;
}


@keyframes heroReveal {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

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


@keyframes titleReveal {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.975);
  }

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


@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

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


@keyframes ambientOne {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(45px, 30px);
  }
}


@keyframes ambientTwo {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-35px, -25px);
  }
}


@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}