/* ============================================================
   SWEETS — base grafica dei dolci SVG (biscotti, ciambelle,
   macaron, canditi) + cascata CSS di riserva quando GSAP manca
   + zucchero a velo di sfondo. Caricato su tutte le pagine che
   mostrano dolci (home, banner cookie, pagine legali).
   ============================================================ */

.sweet-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ogni pezzo animabile ruota/scale attorno al proprio centro */
.sweet-svg [data-part],
.sweet-svg [data-sweet],
.sweet-svg [data-bite] circle {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.sweet-svg [data-part="aura"] { will-change: opacity; }

/* alone morbido sotto il dolce in primo piano */
.sweet-stage { position: relative; }
.sweet-stage::after {
  content: "";
  position: absolute; left: 50%; bottom: -4%;
  width: 62%; height: 16%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255, 46, 136, .28), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}

/* morso: le celle della maschera partono chiuse se c'è JS+GSAP */
.sweet-svg [data-bite] circle { transform: scale(1); }
.sweet-svg.is-bitten { filter: drop-shadow(0 0 14px rgba(255, 46, 136, .28)); }

/* ------------------------------------------------------------
   RISERVA SENZA GSAP: i pezzi compaiono in cascata e poi
   respirano. Con prefers-reduced-motion resta tutto fermo e
   visibile (nessuna opacità intermedia).
   ------------------------------------------------------------ */
@keyframes sweet-pop {
  from { opacity: 0; transform: scale(.35) rotate(-24deg); }
  60%  { opacity: 1; transform: scale(1.06) rotate(4deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes sweet-float {
  from { transform: translateY(-4px) rotate(-1.2deg); }
  to   { transform: translateY(5px) rotate(1.2deg); }
}
@keyframes sweet-twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .3; transform: scale(.55); }
}
@keyframes sugar-rise {
  0%   { transform: translate3d(0, 0, 0) scale(.7); opacity: 0; }
  18%  { opacity: .65; }
  100% { transform: translate3d(var(--drift, 0), -70px, 0) scale(1.05); opacity: 0; }
}

.sweets-css [data-sweet] { animation: sweet-float 4.6s ease-in-out infinite alternate; }
.sweets-css [data-part] { animation: sweet-pop .7s cubic-bezier(.22, 1.2, .36, 1) both; }
.sweets-css [data-part="sparkle"] { animation: sweet-twinkle 2.2s ease-in-out infinite; }
.sweets-css [data-part="aura"] { animation: none; }

/* ritardo a cascata: 12 fasce, poi si ripete (basta per qualunque dolce) */
.sweets-css [data-sweet] > :nth-child(1)  { animation-delay: .00s; }
.sweets-css [data-part]:nth-of-type(2n)   { animation-delay: .10s; }
.sweets-css [data-part]:nth-of-type(3n)   { animation-delay: .18s; }
.sweets-css [data-part]:nth-of-type(5n)   { animation-delay: .26s; }
.sweets-css [data-part]:nth-of-type(7n)   { animation-delay: .34s; }
.sweets-css [data-part="chip"]            { animation-delay: .30s; }
.sweets-css [data-part="icing"]           { animation-delay: .46s; }
.sweets-css [data-part="candied"]         { animation-delay: .54s; }
.sweets-css [data-part="sprinkle"]        { animation-delay: .62s; }
.sweets-css [data-part="shine"]           { animation-delay: .74s; }
.sweets-css [data-part="sparkle"]         { animation-delay: .82s; }

/* zucchero a velo di sfondo (HTML) */
.sugar-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sugar-dot {
  position: absolute; border-radius: 50%;
  background: rgba(246, 199, 216, .55);
  box-shadow: 0 0 8px rgba(255, 46, 136, .35);
  animation: sugar-rise var(--dur, 9s) linear var(--delay, 0s) infinite;
}
.sugar-dot:nth-child(3n) { background: rgba(255, 246, 234, .5); }
.sugar-dot:nth-child(5n) { background: rgba(255, 46, 136, .45); }
.sugar-static .sugar-dot { animation: none; opacity: .35; }

/* ------------------------------------------------------------
   REDUCED MOTION — dolce integro e leggibile, zero movimento
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .sweets-css [data-sweet],
  .sweets-css [data-part],
  .sweets-css [data-part="sparkle"],
  .sugar-dot { animation: none !important; }
  .sweets-css [data-part] { opacity: 1; transform: none; }
  .sweet-stage::after { filter: none; }
}