/* Storto — scena moka nella hero (approvata da Marco 2026-10-21) */
.moka-scene {
  position: relative;
  display: block;
}
.moka-scene .hero-mug { display: block; width: 100%; height: auto; }

/* superficie della bevanda sull'apertura (geometria foto frontale) */
.moka-surface {
  position: absolute;
  left: 30%; top: 19.1%;
  width: 40%; height: 5.2%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 42%, #4a2c1a 0%, #3a2317 62%, #2c1a10 100%);
  opacity: 0;
  transform: scaleY(.25) translateY(55%);
  transform-origin: 50% 100%;
  transition: opacity .3s ease, transform 2.6s linear;
  pointer-events: none;
}
.moka-scene.is-full .moka-surface { opacity: 1; transform: scaleY(1) translateY(0); }

/* gruppo moka + getto: ruota sul beccuccio */
.moka-group {
  position: absolute;
  left: 40%; top: -4%;
  width: 38%;
  opacity: 0;
  transform: translate(-26%, -55%) rotate(0deg);
  transform-origin: 19% 26%;
  transition: transform 1s ease, opacity .8s ease;
  pointer-events: none;
}
.moka-scene.is-in .moka-group { opacity: 1; transform: translate(0, 0) rotate(0deg); }
.moka-scene.is-pour .moka-group { transform: translate(0, 0) rotate(-33deg); transition: transform .8s ease; }
.moka-pot { display: block; width: 100%; height: auto; }

/* getto di caffe: parte dal beccuccio, contro-ruotato per cadere dritto */
.moka-stream {
  position: absolute;
  left: 18.4%; top: 25%;
  width: 3px; height: 40%;
  border-radius: 3px;
  background: linear-gradient(#5a3620, #3a2317);
  transform-origin: 50% 0;
  transform: rotate(20deg) scaleY(0);
  transition: transform .25s ease;
}
.moka-scene.is-stream .moka-stream { transform: rotate(20deg) scaleY(1); }

/* vapore */
.moka-steam { position: absolute; left: 41%; top: 2%; width: 18%; height: 16%; pointer-events: none; }
.moka-steam i {
  position: absolute; bottom: 0;
  width: 26%; height: 62%;
  border-radius: 50%;
  background: #fff;
  filter: blur(7px);
  opacity: 0;
}
.moka-steam i:nth-child(1) { left: 6%; }
.moka-steam i:nth-child(2) { left: 38%; height: 78%; }
.moka-steam i:nth-child(3) { left: 68%; }
.moka-scene.is-hot .moka-steam i { animation: mokaSteam 2.3s ease-in-out infinite; }
.moka-scene.is-hot .moka-steam i:nth-child(2) { animation-delay: .5s; }
.moka-scene.is-hot .moka-steam i:nth-child(3) { animation-delay: 1s; }
@keyframes mokaSteam {
  0% { opacity: 0; transform: translateY(26%) scale(.72); }
  35% { opacity: .75; }
  100% { opacity: 0; transform: translateY(-52%) scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  .moka-group, .moka-stream, .moka-steam { display: none; }
  .moka-surface { transition: none; }
}