/* Keep the photographed smoke in its natural 3:2 proportions around the cup. */
.hero-smoke {
  inset: auto;
  left: 50%;
  bottom: calc(24px + clamp(540px, 62svh, 720px) * 0.46);
  width: min(860px, 90vw);
  height: auto;
  aspect-ratio: 3 / 2;
  translate: -50% 50%;
  transform-origin: 50% 50%;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, rgba(0, 0, 0, 0.88) 62%, transparent 79%);
  mask-image: radial-gradient(ellipse at center, #000 40%, rgba(0, 0, 0, 0.88) 62%, transparent 79%);
}

.hero-smoke img {
  object-fit: contain;
  object-position: center;
}

.hero-smoke-a {
  filter: saturate(1.12) brightness(1.04);
  animation: compact-smoke-front 18s cubic-bezier(0.45, 0, 0.55, 1) -6s infinite alternate;
}

.hero-smoke-b {
  filter: blur(10px) saturate(1.2);
  animation: compact-smoke-depth 27s cubic-bezier(0.45, 0, 0.55, 1) -13s infinite alternate-reverse;
}

@keyframes compact-smoke-front {
  0% {
    opacity: 0.66;
    transform: translate3d(-1%, 1%, 0) scale(0.97) rotate(-2deg);
  }
  52% {
    opacity: 0.82;
    transform: translate3d(0.7%, -1.4%, 0) scale(1.025) rotate(1deg);
  }
  100% {
    opacity: 0.74;
    transform: translate3d(1%, 0.4%, 0) scale(1) rotate(-0.5deg);
  }
}

@keyframes compact-smoke-depth {
  0% {
    opacity: 0.22;
    transform: translate3d(2%, 1.5%, 0) scale(0.94) rotate(4deg);
  }
  48% {
    opacity: 0.36;
    transform: translate3d(-1.8%, -1%, 0) scale(1.06) rotate(-3deg);
  }
  100% {
    opacity: 0.28;
    transform: translate3d(0.8%, 1%, 0) scale(0.99) rotate(1deg);
  }
}

@media (max-width: 840px) {
  .hero-smoke {
    bottom: calc(24px + clamp(430px, 54svh, 640px) * 0.46);
    width: min(700px, 126vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-smoke {
    animation: none !important;
    opacity: 0.74;
    transform: none;
  }

  .hero-smoke-b {
    display: none;
  }
}