.ice-twin::after {
  content: "";
  position: absolute;
  z-index: -3;
  left: -35px;
  right: -35px;
  bottom: -18px;
  height: 85px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(220,246,255,.42), rgba(173,220,242,.12) 45%, transparent 72%);
  filter: blur(12px);
  animation: cold-mist 3.6s ease-in-out infinite;
}

@keyframes cold-mist {
  50% { transform: scale(1.18) translateY(-8px); opacity: .45; }
}

.photo-twin {
  position: relative;
  z-index: 4;
  width: 360px;
  height: 480px;
  background-repeat: no-repeat;
  background-size: 400% 200%;
  background-position: 0 0;
  border-radius: 22px;
  box-shadow: 0 30px 60px rgba(0,0,0,.38);
  transition: filter .15s, transform .15s;
  will-change: background-position;
}

.photo-twin.spinning {
  filter: brightness(1.08) saturate(1.05);
  transform: scale(1.015);
}

.viewer-badge {
  position: absolute;
  z-index: 6;
  right: 8%;
  bottom: 8%;
  display: flex;
  flex-direction: column;
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  background: rgba(9,5,26,.72);
  backdrop-filter: blur(10px);
  color: white;
}

.viewer-badge b { font: 700 15px "Space Grotesk"; color: var(--lime); }
.viewer-badge span { margin-top: 2px; font-size: 8px; letter-spacing: 1px; }

@media (max-width: 600px) {
  .photo-twin { width: 290px; height: 390px; }
}

/* Cinco escenas reales del tutorial: una pose completa por acción */
#chefMascot.chef-action {
  width: 560px;
  height: 560px;
  max-width: 92%;
  bottom: 12px;
  background-image: url("assets/capitan-nam-acciones.webp");
  background-size: 300% 200%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 26px 32px rgba(0,0,0,.42));
  transform: translateX(-50%);
  transition: background-position .18s, transform .45s, opacity .25s;
}

.video-stage.action-wash #chefMascot { background-position: 0 0; }
.video-stage.action-blend #chefMascot { background-position: 50% 0; }
.video-stage.action-sprinkle #chefMascot { background-position: 100% 0; }
.video-stage.action-pour #chefMascot { background-position: 0 100%; }
.video-stage.action-freeze #chefMascot { background-position: 50% 100%; }

.video-stage .action-prop { display: none; }
.video-stage.action-wash #chefMascot { animation: wash-action 1.2s ease-in-out infinite; }
.video-stage.action-blend #chefMascot { animation: blend-action .42s linear infinite; }
.video-stage.action-sprinkle #chefMascot { animation: sprinkle-action .9s ease-in-out infinite; }
.video-stage.action-pour #chefMascot { animation: pour-action 1.25s ease-in-out infinite; }
.video-stage.action-freeze #chefMascot { animation: freeze-action .3s linear infinite; }

.video-stage::after {
  content: "";
  position: absolute;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
}

.video-stage.action-wash::after {
  left: 17%; top: 24%; width: 26%; height: 48%; opacity: .8;
  background: repeating-linear-gradient(82deg, transparent 0 8px, rgba(135,224,255,.75) 9px 11px, transparent 12px 18px);
  filter: blur(1px); animation: water-flow .45s linear infinite;
}

.video-stage.action-blend::after {
  left: 29%; bottom: 18%; width: 115px; height: 115px; opacity: .7; border-radius: 50%;
  border: 4px dashed rgba(215,255,79,.7); animation: blender-spin .5s linear infinite;
}

.video-stage.action-sprinkle::after {
  right: 28%; top: 24%; width: 100px; height: 210px; opacity: .9;
  background-image: radial-gradient(circle, #281717 0 4px, transparent 5px), radial-gradient(circle, #7c452e 0 3px, transparent 4px);
  background-size: 29px 37px, 41px 31px; animation: toppings-fall .75s linear infinite;
}

.video-stage.action-pour::after {
  left: 39%; top: 39%; width: 22px; height: 190px; opacity: .75; border-radius: 50%;
  background: linear-gradient(#ffadc1,#f25c83); filter: blur(2px); transform: rotate(18deg); animation: pour-stream .8s ease-in-out infinite;
}

.video-stage.action-freeze::after {
  inset: 10%; opacity: .85;
  background-image: radial-gradient(circle,#fff 0 2px,transparent 3px),radial-gradient(circle,#8eeaff 0 3px,transparent 4px);
  background-size: 46px 46px,73px 73px; animation: snow-fall 2s linear infinite;
}

@keyframes wash-action { 50% { transform: translateX(-50%) rotate(1.5deg) scale(1.025); } }
@keyframes blend-action { 25% { transform: translateX(calc(-50% - 3px)); } 75% { transform: translateX(calc(-50% + 3px)); } }
@keyframes sprinkle-action { 50% { transform: translateX(-50%) translateY(-9px) rotate(-1.5deg); } }
@keyframes pour-action { 50% { transform: translateX(-50%) rotate(2deg) scale(1.015); } }
@keyframes freeze-action { 25% { transform: translateX(calc(-50% - 2px)); } 75% { transform: translateX(calc(-50% + 2px)); } }
@keyframes water-flow { to { background-position: 0 32px; } }
@keyframes blender-spin { to { transform: rotate(360deg); } }
@keyframes toppings-fall { to { background-position: 0 37px,0 31px; } }
@keyframes pour-stream { 50% { transform: rotate(18deg) scaleY(1.12); opacity: 1; } }
@keyframes snow-fall { to { background-position: 20px 92px,-18px 146px; } }

@media (max-width: 600px) {
  #chefMascot.chef-action { width: 420px; height: 420px; bottom: 12px; }
}

/* Reproductor de 20 fotogramas: cuatro fases naturales por acción */
#chefMascot.chef-action {
  background-size: 200% 200%;
  background-position: 0 0;
  background-image: url("assets/anim-lavar.webp");
  animation: none !important;
  border-radius: 22px;
}

.video-stage.playing #chefMascot.chef-action {
  box-shadow: 0 0 45px rgba(88,231,255,.12);
}

/* Interpolación visual entre fotogramas para eliminar saltos */
#chefMascot.chef-action {
  background-image: none !important;
  overflow: hidden;
  isolation: isolate;
}

.chef-frame {
  position: absolute;
  inset: 0;
  display: block;
  background-repeat: no-repeat;
  background-size: 200% 200%;
  background-position: 0 0;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity .15s cubic-bezier(.4,0,.2,1), transform .22s cubic-bezier(.2,.75,.25,1), filter .15s;
  will-change: opacity, transform, background-position;
  filter: saturate(.98) brightness(.98);
}

.chef-frame.active {
  opacity: 1;
  transform: scale(1);
  filter: saturate(1.03) brightness(1.02);
}

.chef-frame.enter-left { transform: translateX(-1.2%) scale(1.02); }
.chef-frame.enter-right { transform: translateX(1.2%) scale(1.02); }

.video-stage.action-blend .chef-frame.active { animation: natural-vibration .18s ease-in-out infinite alternate; }
.video-stage.action-wash .chef-frame.active { animation: natural-breathe 1.6s ease-in-out infinite; }
.video-stage.action-sprinkle .chef-frame.active { animation: natural-breathe 1.25s ease-in-out infinite; }
.video-stage.action-pour .chef-frame.active { animation: natural-pour 1.4s ease-in-out infinite; }
.video-stage.action-freeze .chef-frame.active { animation: natural-shiver .16s linear infinite alternate; }

@keyframes natural-breathe { 50% { transform: scale(1.012) translateY(-2px); } }
@keyframes natural-vibration { to { transform: translateX(1.5px) scale(1.004); } }
@keyframes natural-pour { 50% { transform: scale(1.01) rotate(.35deg); } }
@keyframes natural-shiver { to { transform: translateX(1.2px); } }

/* La secuencia fotográfica ya contiene el chorro; evita la línea artificial sobre el embudo. */
.video-stage.action-pour::after { display: none !important; }