/* MCD — Coffee Aroma Steam */
.mcd-steam-fixed{
  position: fixed;
  left: var(--mcd-steam-left, 40px);
  bottom: var(--mcd-steam-bottom, 40px);
  width: var(--mcd-steam-size, 260px);
  height: calc(var(--mcd-steam-size, 260px) * 1.3);
  z-index: 999;
  pointer-events: none;
  opacity: var(--mcd-steam-opacity, .9);
}
.mcd-steam-inline{
  display:inline-block;
  width: var(--mcd-steam-size, 260px);
  height: calc(var(--mcd-steam-size, 260px) * 1.3);
  pointer-events: none;
  opacity: var(--mcd-steam-opacity, .9);
}

.mcd-steam-svg{ width: 100%; height: 100%; overflow: visible; }

/* Steam strokes */
.mcd-steam{
  filter: url(#mcd-soft-blur);
  transform-origin: 50% 100%;
  animation: mcd-rise 6.5s ease-in infinite;
}
.mcd-steam.s1{ animation-delay: 0s; }
.mcd-steam.s2{ animation-delay: 1.2s; }
.mcd-steam.s3{ animation-delay: 2.1s; }

/* Rise keyframes (mobil & fallback) */
@keyframes mcd-rise{
  0%   { opacity: 0; transform: translateY(0px) scale(1) rotate(0deg); }
  10%  { opacity: .55; }
  50%  { opacity: .8;  transform: translateY(-12px) scale(1.02) rotate(0.2deg); }
  100% { opacity: 0;   transform: translateY(-28px) scale(1.03) rotate(-0.1deg); }
}

/* Desktop: parallax sway on mouse */
@media (pointer: fine){
  .mcd-steam-fixed:hover .mcd-steam,
  .mcd-steam-inline:hover .mcd-steam{
    transition: transform .08s linear;
    will-change: transform;
  }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .mcd-steam{ animation: none; opacity: .5; }
}

/* Subtle entrance */
.mcd-steam-wrap{
  animation: mcd-enter .6s cubic-bezier(.2,.9,.22,1) both;
}
@keyframes mcd-enter{
  from{ transform: translateY(6px); opacity: 0; }
  to  { transform: translateY(0);   opacity: 1; }
}