* { font-family: 'Vazirmatn', system-ui, sans-serif; }

body { margin: 0; }

.coffee-bg {
  background:
    radial-gradient(circle at 20% 10%, rgba(120, 72, 40, 0.55), transparent 45%),
    radial-gradient(circle at 85% 20%, rgba(70, 42, 22, 0.6), transparent 40%),
    linear-gradient(160deg, #3a2417 0%, #4a2f1c 40%, #2c1a0f 100%);
  background-attachment: fixed;
}

/* Steam animation on the header cup */
.cup-wrap { padding-top: 30px; }
.steam {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 40px; height: 30px;
}
.steam span {
  position: absolute;
  bottom: 0;
  width: 6px; height: 6px;
  background: rgba(255, 245, 230, 0.5);
  border-radius: 50%;
  filter: blur(2px);
  animation: rise 3s infinite ease-in-out;
}
.steam span:nth-child(1) { left: 4px; animation-delay: 0s; }
.steam span:nth-child(2) { left: 17px; animation-delay: 0.9s; }
.steam span:nth-child(3) { left: 30px; animation-delay: 1.7s; }

@keyframes rise {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  20%  { opacity: 0.8; }
  100% { transform: translateY(-26px) scale(2.2); opacity: 0; }
}

/* nicer range slider on webkit */
input[type="range"] { height: 8px; border-radius: 8px; }

::-webkit-scrollbar { height: 6px; width: 6px; }
::-webkit-scrollbar-thumb { background: rgba(255,235,210,0.25); border-radius: 8px; }