/* Independent decorative layers; packaging and readable copy do not sway. */
.hero-floating-layer {
  position:absolute;
  inset:0;
  z-index:7;
  pointer-events:none;
}
.hero-floating-ingredient {
  position:absolute;
  display:block;
  pointer-events:none;
}
.hero-floating-ingredient img {
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  transform-origin:50% 55%;
  filter:drop-shadow(0 8px 8px #27100638);
  animation:hero-ingredient-sway var(--sway-duration,6s) ease-in-out infinite;
  animation-delay:var(--sway-phase,0s);
  animation-play-state:paused;
}
.hero-floating-coconut {
  --sway-duration:6.4s;
  --sway-phase:-1.2s;
  --sway-angle:-16deg;
  --sway-distance:7px;
}
.hero-floating-granola {
  --sway-duration:7.2s;
  --sway-phase:-3.6s;
  --sway-angle:18deg;
  --sway-distance:9px;
}
html[data-hero-motion='running'] .hero-floating-ingredient img { animation-play-state:running; }
@keyframes hero-ingredient-sway {
  0%,100% { transform:translate3d(0,0,0) rotate(var(--sway-angle)); }
  50% { transform:translate3d(3px,calc(-1 * var(--sway-distance)),0) rotate(calc(var(--sway-angle) + 5deg)); }
}
@media (min-width:701px) {
  .hero-floating-coconut {
    width:calc(var(--hero-height) * .15);
    left:calc(100% - var(--hero-height) * 1.12962963 - var(--hero-height) * .12);
    top:81%;
  }
  .hero-floating-granola {
    width:calc(var(--hero-height) * .18);
    left:calc(100% - var(--hero-height) * 1.12962963 + var(--hero-height) * .14);
    top:1%;
  }
}
@media (min-width:701px) and (max-width:1100px) {
  .hero-floating-coconut {
    left:calc(100% - var(--hero-height) * 1.12962963 + var(--hero-height) * .08);
    top:83%;
    width:calc(var(--hero-height) * .12);
  }
  .hero-floating-granola {
    left:calc(100% - var(--hero-height) * 1.12962963);
    top:1%;
    width:calc(var(--hero-height) * .17);
  }
}
@media (max-width:700px) {
  .hero-floating-layer {
    width:min(100%,460px);
    left:50%;
    right:auto;
    transform:translateX(-50%);
  }
  .hero-floating-coconut {
    width:clamp(48px,15vw,66px);
    left:5%;
    top:calc(52px + min(100vw - 8px,440px) * .69);
    --sway-distance:4px;
    --sway-angle:-25deg;
  }
  .hero-floating-granola {
    width:clamp(65px,20vw,88px);
    left:43%;
    top:56px;
    --sway-distance:5px;
    --sway-angle:15deg;
  }
}
html[data-motion='reduced'] .hero-floating-ingredient img { animation:none; transform:rotate(var(--sway-angle)); }
@media (prefers-reduced-motion:reduce) {
  .hero-floating-ingredient img { animation:none; transform:rotate(var(--sway-angle)); }
}