/* dropicon — alcohol tracker's mark: on a slow loop the bottle tilts and
   pours, the glass fills, and then the glass itself tips back and drinks.
   terracotta on near-black, matching the shipped app icon. inline svg. */
.dropicon{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;background:linear-gradient(160deg,#151210,#0D0B09);border:1px solid rgba(224,100,60,.28);border-radius:24%;box-shadow:0 6px 22px -8px rgba(224,100,60,.45)}
.dropicon svg{width:80%;height:80%;display:block;overflow:visible}
.dp-glass,.dp-bottle{fill:#E0643C}
.dp-label{fill:#0D0B09}
/* one 7.5s ritual — every part keyed to the same clock */
.dp-bottle{transform-box:view-box;transform-origin:58.75% 52.5%;animation:dp-tilt 7.5s var(--ease-smooth,ease-in-out) infinite}
@keyframes dp-tilt{0%,8%{transform:translate(0,0) rotate(0deg)}17%,44%{transform:translate(-6px,-14px) rotate(-32deg)}54%,100%{transform:translate(0,0) rotate(0deg)}}
.dp-stream{fill:#EE8560;transform-box:fill-box;transform-origin:top;transform:scaleY(0);opacity:0;animation:dp-streamk 7.5s linear infinite}
@keyframes dp-streamk{0%,18%{transform:scaleY(0);opacity:0}21%,42%{transform:scaleY(1);opacity:1}46%,100%{transform:scaleY(0);opacity:0}}
.dp-pour{fill:#C24F2C;opacity:.92;animation:dp-fill 7.5s var(--ease-smooth,ease-in-out) infinite}
@keyframes dp-fill{0%,18%{transform:translateY(16px)}46%,78%{transform:translateY(7px)}88%{transform:translateY(15px)}100%{transform:translateY(16px)}}
.dp-glass{transform-box:view-box;transform-origin:29.2% 83%;animation:dp-cheers 7.5s var(--ease-strike,cubic-bezier(.2,.9,.3,1.2)) infinite}
@keyframes dp-cheers{0%,76%{transform:rotate(0deg)}81%{transform:rotate(-13deg)}86%{transform:rotate(3deg)}90%,100%{transform:rotate(0deg)}}
.dp-drip{fill:#EE8560;opacity:0;animation:dp-dripk 7.5s ease-in infinite}
@keyframes dp-dripk{0%,45%{transform:translateY(0);opacity:0}47%{opacity:1}53%{transform:translateY(34px);opacity:0}54%,100%{transform:translateY(0);opacity:0}}
/* the spark pops when the glass drinks */
.dp-spark{position:absolute;top:-6%;right:-6%;font-style:normal;color:#D99A2B;text-shadow:0 0 12px rgba(217,154,43,.75);animation:dp-twinkle 7.5s ease-in-out infinite}
@keyframes dp-twinkle{0%,74%{opacity:.3;transform:scale(.82) rotate(-8deg)}80%{opacity:1;transform:scale(1.28) rotate(14deg)}88%{opacity:.55;transform:scale(.95)}100%{opacity:.3;transform:scale(.82) rotate(-8deg)}}
.dropicon.breathe{animation:dp-breathe 7.5s var(--ease-smooth,ease-in-out) infinite}
@keyframes dp-breathe{0%,16%,58%,100%{transform:scale(1)}30%{transform:scale(1.03)}80%{transform:scale(1.035)}}
/* sizes */
.dropicon.sm{width:34px;height:34px;border-width:1px}
.dropicon.sm .dp-spark{font-size:11px}
.dropicon.lg{width:76px;height:76px}
.dropicon.lg .dp-spark{font-size:19px}
.dropicon.xl{width:104px;height:104px}
.dropicon.xl .dp-spark{font-size:25px}
@media (prefers-reduced-motion:reduce){.dp-bottle,.dp-stream,.dp-pour,.dp-glass,.dp-drip,.dp-spark,.dropicon.breathe{animation:none}.dp-pour{transform:translateY(12px)}}