/* Rose and cream move behind the lettering while the content stays still. */
.hero-copy.ambient-hearts {
  overflow: hidden;
}
.hero-copy.ambient-hearts::before {
  content: "";
  position: absolute;
  inset: -8%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 14% 20%, #fff7eddb 0, #fff3e933 41%, transparent 67%),
    radial-gradient(ellipse at 89% 79%, #e9a9ba8c 0, #edb7c133 44%, transparent 70%),
    radial-gradient(ellipse at 64% 8%, #ffd9e380 0, transparent 55%);
  transform: translate3d(-2%, -1%, 0) scale(1.04);
  animation: hero-rose-drift 19s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.hero-copy.ambient-hearts.is-in-view::before {
  animation-play-state: running;
}
@keyframes hero-rose-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1.04); }
  to { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

.hero-copy .flavor-sweet {
  --flavor-ink: #9a3155;
  --flavor-halo: #9a315580;
}
.hero-copy .flavor-delicious {
  --flavor-ink: #704581;
  --flavor-halo: #70458180;
}
.hero-copy .flavor-buttery {
  --flavor-ink: #87521c;
  --flavor-halo: #87521c80;
}
.hero-copy .sugar-fall { color: var(--flavor-ink); }
.hero-copy .sugar-fleck {
  width: var(--sugar-size, 3px);
  height: var(--sugar-size, 3px);
  background: currentColor;
  border-radius: 50%;
  clip-path: none;
  box-shadow: 0 0 2px #fff9f3, 0 0 5px var(--flavor-halo);
  animation: hero-sugar-shimmer var(--sugar-duration, 3.4s) linear infinite;
  animation-delay: var(--sugar-delay, 0s);
  animation-play-state: paused;
}
.hero-copy .sugar-fleck:nth-child(4n + 1) {
  border-radius: 0;
  clip-path: polygon(50% 0, 61% 37%, 100% 50%, 61% 63%, 50% 100%, 39% 63%, 0 50%, 39% 37%);
}
.hero-copy .sugar-fleck:nth-child(7n) {
  border-radius: 1px;
  height: calc(var(--sugar-size, 3px) * 1.45);
}
.hero-copy.is-in-view .sugar-fleck { animation-play-state: running; }
@keyframes hero-sugar-shimmer {
  0%, 7% { opacity: 0; transform: translate3d(0, -5px, 0) rotate(0) scale(.35); }
  17% { opacity: .95; transform: translate3d(0, 2px, 0) rotate(17deg) scale(1); }
  32% { opacity: .65; }
  44% { opacity: 1; }
  62% { opacity: .78; }
  78% { opacity: .9; }
  100% { opacity: 0; transform: translate3d(var(--sugar-drift), 48px, 0) rotate(112deg) scale(.45); }
}

body.motion-paused .hero-copy::before,
body.modal-open .hero-copy::before,
body.motion-paused .hero-copy .sugar-fleck,
body.modal-open .hero-copy .sugar-fleck {
  animation-play-state: paused !important;
}
html.motion-reduced .hero-copy::before {
  animation: none;
  transform: none;
}
html.motion-reduced .hero-copy .sugar-fall { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-copy.ambient-hearts::before { animation: none; transform: none; }
  .hero-copy .sugar-fall { display: none; }
  .hero-copy .sugar-fleck { animation: none; }
}

/* The hero opens the order builder directly. */
.hero .hero-actions .hero-order-button {
  min-height: 60px;
  min-width: 210px;
  padding: 16px 25px;
  gap: 26px;
  font-size: 16px;
  box-shadow: 0 4px 0 #6e2d41, 0 9px 20px #8a3f551f;
}
.hero .hero-note { font-size: 13px; margin-top: 19px; color: var(--berry); line-height: 1.6; }
@media (max-width: 760px) {
  .hero-actions { width: 100%; gap: 18px; }
  .hero .hero-actions .hero-order-button { width: 100%; justify-content: space-between; }
  .hero-actions .text-link { font-size: 13px; }
  .hero .hero-note { font-size: 12px; }
}