/* --- Page basics --- */
:root {
  --bg: #f7f3ed;
  --text: #2b2b2b;
  --accent: #7c3e2d;   /* coffee */
  --sugar: #fff6d9;    /* sugar (light beige) */
  --cup: #e8e6e3;      /* cup body */
  --rim: #cfcac4;      /* rim/shadow */
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

header, footer {
  text-align: center;
  padding: 16px 24px;
}

header h1 {
  margin: 0 0 4px;
}

header nav a {
  color: #5b5b5b;
  text-decoration: none;
  margin-right: 12px;
  font-size: 0.95rem;
}

/* --- Layout for the demo area --- */
.demo {
  display: grid;
  place-items: center;
  min-height: 60vh;
  padding: 24px;
}

.controls {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.btn {
  border: 0;
  background: #333;
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}
.btn.secondary {
  background: #777;
}
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* --- Cup drawing --- */
.cup-wrap {
  position: relative;
  width: 220px;
  height: 220px;
  display: grid;
  place-items: end center;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.15));
}

.cup {
  position: relative;
  width: 180px;
  height: 160px;
  background: var(--cup);
  border-radius: 0 0 24px 24px;
  overflow: hidden; /* contain the liquids */
  border-top: 10px solid var(--rim);
}

/* Handle */
.cup::after {
  content: "";
  position: absolute;
  right: -36px;
  top: 42px;
  width: 60px;
  height: 60px;
  border: 10px solid var(--cup);
  border-radius: 50%;
  box-shadow: inset 0 0 0 10px var(--bg);
  background: transparent;
}

/* Coffee base layer */
.coffee {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 55%; /* starting coffee level */
  background: linear-gradient(180deg, #8b4b35 0%, var(--accent) 100%);
}

/* Sugar layer that rises */
.sugar {
  position: absolute;
  bottom: 55%; /* sits on top of coffee start level */
  left: 0;
  width: 100%;
  height: 0%; /* starts empty; JS will increase this */
  background: linear-gradient(180deg, #fffaf0 0%, var(--sugar) 100%);
  transition: height 0.2s ease; /* smooth-ish step between JS ticks */
}

/* Decorative sugar sprinkles (CSS-only animation) */
.sprinkle {
  position: absolute;
  top: -24px;
  left: 50%;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  animation: sprinkle 1.2s linear infinite;
}
.sprinkle:nth-child(2) { left: 40%; animation-delay: 0.2s; }
.sprinkle:nth-child(3) { left: 60%; animation-delay: 0.4s; }
.sprinkle:nth-child(4) { left: 45%; animation-delay: 0.6s; }
.sprinkle:nth-child(5) { left: 55%; animation-delay: 0.8s; }

@keyframes sprinkle {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(190px) scale(0.8); opacity: 0; }
}

/* Helper text */
.caption {
  text-align: center;
  margin-top: 10px;
  color: #555;
  font-size: 0.95rem;
}