@keyframes bgExpand {
  0% {
    inset: 50% auto auto 50%;
    width: min(20rem, 62vw);
    height: clamp(4.5rem, 9vw, 6.25rem);
    border-radius: 999px;
    transform: translate(-50%, -50%) scale(1);
    animation-timing-function: cubic-bezier(0.12, 0, 0.22, 1);
  }
  90% {
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    transform: none;
    animation-timing-function: cubic-bezier(0.05, 0.95, 0.2, 1);
  }
  100% {
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    transform: none;
  }
}

@keyframes glowReveal {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

@keyframes navDrop {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-140%);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes leftIngredientIn {
  0% {
    opacity: 0;
    transform: translate3d(0, -6rem, 0) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes rightIngredientIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 6rem, 0) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes phonePunchIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -45%) scale(0.32);
  }
  62% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes scrollHintPulse {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  50% {
    transform: translateY(6px);
    opacity: 0.72;
  }
}

@keyframes bottomRowIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero-bg,
  .topbar,
  .ingredient,
  .phone-wrap,
  .hero-glow {
    opacity: 1;
    transform: none;
  }

  .hero-copy {
    opacity: 1;
    transform: none;
  }

  .hero-copy p,
  .hero-cta {
    opacity: 1;
    transform: none;
  }

  .hero-bg {
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .phone-wrap {
    inset: 51% auto auto 50%;
    transform: translate(-50%, -50%);
  }

  .hero-scroll-hint {
    opacity: 1;
  }

  .hero-scroll-hint i {
    transform: none;
    opacity: 1;
  }
}