/* =====================================================================
   MOTION LAYER — spice depth, tumble and parallax
   =====================================================================
   Decoration only. Every rule here is transform/opacity so it stays on the
   compositor, every animation stops under prefers-reduced-motion, and the
   whole layer is inert below the tablet breakpoint where the copy needs the
   width. Removing this file changes nothing structural.

   Why the markup is wrapped: a spice needs two independent transforms at
   once — a slow tumble (CSS keyframes) and a scroll parallax (JS variable).
   Both cannot live on one element, so the wrapper carries the parallax and
   the image inside it carries the tumble.
   ===================================================================== */

/* ---- Stage ----------------------------------------------------------
   This element is the whole decorative layer: it fills the hero, sits
   behind the copy, never takes a click, and clips anything drifting past
   the edge. */
.hero__spices {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  perspective: 1000px;
  perspective-origin: 70% 40%;
}

.spice-layer {
  position: absolute;
  display: block;
  transform: translate3d(0, calc(var(--sy, 0px) * var(--depth, 0)), 0);
  will-change: transform;
}

/* ---- The object itself ---------------------------------------------- */
.hero__spices .spice {
  position: static;
  display: block;
  width: var(--size);
  height: auto;
  opacity: var(--alpha, .95);
  transform-style: preserve-3d;
  /* Two shadows: a tight contact shadow anchoring the object and a wide
     ambient one. A single blur reads as a smudge rather than as weight. */
  filter:
    drop-shadow(0 3px 4px rgba(0, 0, 0, .40))
    drop-shadow(0 22px 30px rgba(0, 0, 0, .34));
  animation: spice-tumble var(--dur-drift, 18s) var(--ease) infinite alternate;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}

/* A slow turn on three axes, so a flat illustration reads as a solid object
   rotating in space rather than a sticker sliding around. */
@keyframes spice-tumble {
  0% {
    transform: rotate3d(1, .55, .25, calc(var(--rot, 0deg) - 6deg))
               translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: rotate3d(1, .55, .25, calc(var(--rot, 0deg) + 14deg))
               translate3d(0, -16px, 38px) scale(1.035);
  }
  100% {
    transform: rotate3d(1, .55, .25, calc(var(--rot, 0deg) + 26deg))
               translate3d(0, -6px, 0) scale(1);
  }
}

/* ---- Placement. Depth rises with apparent nearness, so the big objects
        in front travel further on scroll than the small ones behind. ---- */
.spice-layer--anise    { top: 11%;    right: 7%;  --depth: .18; }
.spice-layer--cinnamon { bottom: 12%; right: 11%; --depth: .15; }
.spice-layer--bay      { top: 58%;    right: 30%; --depth: .10; }
.spice-layer--cardamom { top: 40%;    right: 21%; --depth: .08; }
.spice-layer--pepper   { top: 22%;    right: 33%; --depth: .06; }
.spice-layer--clove    { bottom: 30%; right: 40%; --depth: .05; }

.spice--anise    { --size: clamp(120px, 13vw, 200px); --rot: -10deg; --dur-drift: 19s; }
.spice--cinnamon { --size: clamp(104px, 11vw, 168px); --rot: 16deg;  --dur-drift: 22s; --delay: -6s; }
.spice--bay      { --size: clamp(88px, 9vw, 140px);   --rot: -22deg; --dur-drift: 17s; --delay: -3s; --alpha: .9; }
.spice--cardamom { --size: clamp(72px, 7.5vw, 116px); --rot: 8deg;   --dur-drift: 15s; --delay: -9s; }
.spice--pepper   { --size: clamp(58px, 6vw, 96px);    --rot: 0deg;   --dur-drift: 20s; --delay: -12s; --alpha: .85; }
.spice--clove    { --size: clamp(52px, 5.5vw, 84px);  --rot: -14deg; --dur-drift: 16s; --delay: -5s; --alpha: .8; }

/* ---- Ground haze: a warm pool of light the objects sit in ------------ */
.hero__spices::after {
  content: '';
  position: absolute;
  right: 12%;
  bottom: 8%;
  width: min(34rem, 46%);
  aspect-ratio: 2 / 1;
  background: radial-gradient(ellipse at center,
              color-mix(in srgb, var(--gold-400) 15%, transparent) 0%, transparent 70%);
  filter: blur(6px);
  pointer-events: none;
}

/* ---- Spice dust: a handful of motes drifting through the light ------- */
.spice-dust {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.spice-dust i {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--d, 3px);
  height: var(--d, 3px);
  border-radius: 50%;
  background: var(--gold-200);
  opacity: 0;
  animation: dust-rise var(--t, 14s) linear infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes dust-rise {
  0%   { opacity: 0;   transform: translate3d(0, 0, 0) scale(.6); }
  12%  { opacity: .55; }
  70%  { opacity: .35; }
  100% { opacity: 0;   transform: translate3d(14px, -180px, 0) scale(1.1); }
}

/* ---- Section entrances: a shallow tilt as content settles into place -- */
.js .reveal.reveal-3d {
  opacity: 0;
  transform: perspective(900px) rotateX(6deg) translate3d(0, 26px, 0);
  transform-origin: 50% 100%;
  transition:
    opacity var(--dur-slow, .48s) var(--ease-out),
    transform var(--dur-slow, .48s) var(--ease-premium, cubic-bezier(.32, .72, 0, 1));
}
.js .reveal.reveal-3d.is-visible {
  opacity: 1;
  transform: perspective(900px) rotateX(0) translate3d(0, 0, 0);
}

/* ---- Cost control ---------------------------------------------------- */
/* Off screen, nothing animates: the observer in effects.js removes this. */
.hero__spices:not(.is-animating) .spice,
.hero__spices:not(.is-animating) .spice-dust i { animation-play-state: paused; }

@media (max-width: 1024px) {
  /* Fewer objects, no parallax: the copy needs the width and the phone
     needs the battery. */
  .spice-dust { display: none; }
  .spice-layer { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__spices .spice,
  .spice-dust i { animation: none; }
  .spice-layer { transform: none; }
  .js .reveal.reveal-3d { opacity: 1; transform: none; transition: none; }
}