.juicy{aspect-ratio:1/.86;--blob-a:#f3c86a;--blob-b:#e9b44c;--blob-c:#c8902c;width:100%;position:relative;overflow-x:clip;container-type:inline-size}.juicy--ember{--blob-a:#3a302a;--blob-b:#241e1a;--blob-c:#120f0d}.juicy--paprika{--blob-a:#b5532a;--blob-b:#8a3514;--blob-c:#5e220c}.juicy--crema{--blob-a:#fffbf4;--blob-b:#f5ede0;--blob-c:#e6d8bf}.juicy--rosso{--blob-a:#ff5a5f;--blob-b:#e71e26;--blob-c:#a8121a}.juicy__blob{background:radial-gradient(circle at 32% 26%, var(--blob-a), var(--blob-b) 55%, var(--blob-c));border-radius:58% 42% 55% 45%/48% 56% 44% 52%;position:absolute;inset:12% 10% 8%;box-shadow:0 30px 60px -30px #14110f8c}.juicy__blob--b{background:var(--blob-b);opacity:.28;box-shadow:none;border-radius:44% 56% 40% 60%/58% 42%;inset:6% 5% 3%}.juicy--glow .juicy__blob{box-shadow:none;background:radial-gradient(closest-side,#e71e269e,#a8121a4d 55%,#0000);border-radius:50%;inset:0 -6%}.juicy--glow .juicy__blob--b{opacity:1;background:radial-gradient(closest-side,#ff8a5a73,#0000);border-radius:50%;inset:18% 14%}.juicy__product{z-index:1;position:absolute;inset:10% 3% 6%}.juicy__product.is-cutout{filter:drop-shadow(0 22px 18px #14110f59)drop-shadow(0 4px 4px #14110f33)}.juicy--glow .juicy__product.is-cutout,.juicy--ember .juicy__product.is-cutout{filter:drop-shadow(0 26px 24px #0009)}.juicy__orbit{pointer-events:none;position:absolute;inset:0}.juicy__orbit--front{z-index:2}.juicy__float{width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);--push:1;transform:translate(calc(var(--x) * var(--push)), calc(var(--y) * var(--push))) rotate(var(--r));position:absolute;top:50%;left:50%}.juicy__bob{filter:drop-shadow(0 8px 8px #14110f4d);position:absolute;inset:0}@media (prefers-reduced-motion:no-preference){.juicy[data-armed] :is(.juicy__product,.juicy__float,.juicy__blob){transition:transform .95s cubic-bezier(.34,1.45,.64,1),opacity .5s ease-out}.juicy[data-armed] .juicy__float{transition:transform 1.05s cubic-bezier(.22, 1.7, .4, 1) calc(.22s + var(--i) * 70ms), opacity .35s ease-out calc(.22s + var(--i) * 70ms)}.juicy[data-armed]:not([data-on]) .juicy__product{opacity:0;transform:translate(-26cqw,14cqw)rotate(-18deg)scale(.55)}.juicy[data-armed]:not([data-on]) .juicy__float{opacity:0;transition-duration:.45s;transition-delay:0s;transform:translate(0)rotate(0)scale(.2)}.juicy[data-armed]:not([data-on]) .juicy__blob{opacity:0;transform:scale(.4)rotate(-40deg)}.juicy[data-on] .juicy__blob{animation:16s linear infinite juicy-wobble}.juicy[data-on] .juicy__blob--b{animation-duration:22s;animation-direction:reverse}.juicy[data-on] .juicy__bob{animation:3.4s ease-in-out infinite alternate juicy-bob;animation-delay:calc(var(--i) * -.9s)}.juicy[data-on] .juicy__product.is-cutout{animation:5s ease-in-out 1.1s infinite alternate juicy-breathe}.group:hover .juicy[data-on] .juicy__float,.group:focus-within .juicy[data-on] .juicy__float{--push:1.16;transition-duration:.6s;transition-delay:0s}@supports (animation-timeline:view()){.juicy[data-on] .juicy__orbit{animation:linear both juicy-drift;animation-timeline:view()}}}@keyframes juicy-wobble{to{transform:rotate(360deg)}}@keyframes juicy-bob{0%{transform:translateY(-7%)rotate(-8deg)}to{transform:translateY(8%)rotate(8deg)}}@keyframes juicy-breathe{0%{transform:translateY(0)rotate(0)}to{transform:translateY(-2.5%)rotate(-1.2deg)}}@keyframes juicy-drift{0%{transform:rotate(-7deg)translateY(4%)}to{transform:rotate(7deg)translateY(-4%)}}