/* Fondue motion tokens: "everything is liquid". Viscous, never bouncy-cartoon. */
:root{
  --fd-ease-viscous: cubic-bezier(.65,0,.15,1);   /* thick: slow start, long settle */
  --fd-ease-melt:    cubic-bezier(.33,0,.1,1);    /* enters fast, drips to rest */
  --fd-ease-surface: cubic-bezier(.2,.8,.2,1);    /* ripples, spreads */
  --fd-ease-out:     cubic-bezier(.2,.7,.1,1);
  --fd-dur-tick: 600ms;   /* number interpolation */
  --fd-dur-dip:  520ms;   /* hover/press dip */
  --fd-dur-melt: 900ms;   /* section and liquid transitions */
  --fd-dur-pool: 14s;     /* molten gradient drift loop */
  /* Spring for JS number/chart interpolation (viscous): stiffness .06, damping .82 per frame at 60fps */
  --fd-spring-k: .06; --fd-spring-damp: .82;
}
/* Molten surface: animated warm gradient (brass/ember on ink), not yellow */
.fd-molten{background:
  radial-gradient(60% 50% at var(--mx,30%) var(--my,40%),rgba(255,106,61,.22),transparent 60%),
  radial-gradient(50% 60% at 75% 70%,rgba(176,141,87,.20),transparent 65%),var(--fd-ink,#15171C);
  background-size:140% 140%;animation:fd-pool var(--fd-dur-pool) var(--fd-ease-viscous) infinite alternate}
@keyframes fd-pool{to{background-position:100% 60%,0% 30%,0 0}}
/* Dip interaction: press sinks, a ripple ring spreads (add class .fd-dip; JS sets --x/--y on pointerdown) */
.fd-dip{position:relative;overflow:hidden;transition:transform var(--fd-dur-dip) var(--fd-ease-viscous)}
.fd-dip:hover{transform:translateY(1px)}.fd-dip:active{transform:translateY(2px) scale(.985)}
.fd-dip::after{content:"";position:absolute;left:var(--x,50%);top:var(--y,50%);width:8px;height:8px;margin:-4px;border-radius:50%;
  border:1px solid rgba(176,141,87,.8);opacity:0;pointer-events:none}
.fd-dip.rippling::after{animation:fd-ripple 900ms var(--fd-ease-surface)}
@keyframes fd-ripple{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(28)}}
/* Liquid (metaball) blend: apply filter:url(#fd-goo) to a group of blurred-edge shapes */
.fd-goo{filter:url(#fd-goo)}
@media (prefers-reduced-motion:reduce){.fd-molten{animation:none}.fd-dip,.fd-dip:hover,.fd-dip:active{transform:none;transition:none}.fd-dip.rippling::after{animation:none}}