/* VITOD drying-method scenes (snippets/method-scene.liquid).
   Paused by default; runs only inside .is-in, pauses again inside .motion-paused.
   Only transform + opacity are animated. 9s loop for both scenes. */
.v-scene { display: block; width: 100%; height: auto; overflow: visible; }
.v-scene .ms-l { vector-effect: non-scaling-stroke; }
.v-scene .ms-a {
  transform-box: fill-box;
  transform-origin: center;
  animation-duration: 9s;
  animation-timing-function: cubic-bezier(.45, 0, .25, 1);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-delay: var(--d, 0s);
  animation-play-state: paused;
}
.is-in .v-scene .ms-a { animation-play-state: running; }
.motion-paused .v-scene .ms-a,
.is-in .motion-paused .v-scene .ms-a,
.motion-paused .is-in .v-scene .ms-a { animation-play-state: paused; }

/* ---------- Freeze-drying ---------- */
/* 0-2s freeze: frost rim + thermometer drops. 2-3s vacuum: needle falls.
   3-7.5s sublimation: ice leaves as vapour (never liquid). 6-8.4s dried, pale, crisp. 8.4-9s reset. */
.ms-f-frost { animation-name: ms-f-frost; }
@keyframes ms-f-frost {
  0%, 6% { opacity: 0; }
  20%, 56% { opacity: 1; }
  80%, 100% { opacity: 0; }
}
.ms-f-dry { opacity: 0; animation-name: ms-f-dry; }
@keyframes ms-f-dry {
  0%, 46% { opacity: 0; }
  80%, 98% { opacity: 1; }
  100% { opacity: 0; }
}
.ms-f-batch { animation-name: ms-f-batch; }
@keyframes ms-f-batch {
  0% { opacity: 0; }
  4%, 92% { opacity: 1; }
  98%, 100% { opacity: 0; }
}
.v-scene .ms-f-needle { transform-origin: 50% 100%; animation-name: ms-f-needle; }
@keyframes ms-f-needle {
  0%, 20% { transform: rotate(112deg); }
  34%, 92% { transform: rotate(-118deg); }
  100% { transform: rotate(112deg); }
}
.v-scene .ms-f-merc { transform-origin: 50% 100%; }
.ms-f-cold { animation-name: ms-f-cold; }
.ms-f-merc.ms-f-cold { animation-name: ms-f-merc; }
@keyframes ms-f-merc {
  0%, 4% { transform: scaleY(1); }
  20%, 92% { transform: scaleY(.22); }
  100% { transform: scaleY(1); }
}
@keyframes ms-f-cold {
  0%, 4% { opacity: 1; }
  20%, 92% { opacity: .55; }
  100% { opacity: 1; }
}
.ms-f-flake { animation-name: ms-f-flake; }
@keyframes ms-f-flake {
  0%, 8% { opacity: 0; transform: scale(.6) rotate(-30deg); }
  20%, 90% { opacity: 1; transform: scale(1) rotate(0deg); }
  98%, 100% { opacity: 0; transform: scale(.6) rotate(-30deg); }
}
/* Ice crystal lifts off the frozen slice, then is gone: vapour wisp rises and fades. */
.ms-f-ice { animation-name: ms-f-ice; }
@keyframes ms-f-ice {
  0%, 33% { opacity: 0; transform: translateY(2px) scale(.7); }
  37% { opacity: 1; transform: translateY(0) scale(1); }
  44% { opacity: .8; transform: translateY(-8px) scale(.8); }
  48%, 100% { opacity: 0; transform: translateY(-12px) scale(.3); }
}
.ms-f-wisp { animation-name: ms-f-wisp; animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
@keyframes ms-f-wisp {
  0%, 42% { opacity: 0; transform: translateY(-4px) scaleY(.5); }
  47% { opacity: .9; transform: translateY(-12px) scaleY(1); }
  58%, 100% { opacity: 0; transform: translateY(-34px) scaleY(1.2); }
}

/* ---------- Natural (air/sun) drying ---------- */
.ms-n-rays { animation-name: ms-n-rays; animation-timing-function: linear; }
@keyframes ms-n-rays { to { transform: rotate(30deg); } }
.ms-n-air { animation-name: ms-n-air; animation-duration: 4.5s; animation-timing-function: linear; }
@keyframes ms-n-air {
  0% { opacity: 0; transform: translateX(-24px); }
  30%, 65% { opacity: .75; }
  100% { opacity: 0; transform: translateX(56px); }
}
.v-scene .ms-n-fruit { transform-origin: 50% 70%; animation-name: ms-n-fruit; }
@keyframes ms-n-fruit {
  0%, 6% { transform: scale(1); }
  80%, 88% { transform: scale(.9); }
  100% { transform: scale(1); }
}
.ms-n-deep { opacity: 0; animation-name: ms-n-deep; }
@keyframes ms-n-deep {
  0%, 6% { opacity: 0; }
  80%, 88% { opacity: .5; }
  100% { opacity: 0; }
}

/* ---------- Reduced motion: static frames that still explain the process ---------- */
@media (prefers-reduced-motion: reduce) {
  .v-scene .ms-a { animation: none !important; }
  .v-scene .ms-f-frost { opacity: 1; }
  .v-scene .ms-f-dry { opacity: 0; }
  .v-scene .ms-f-batch { opacity: 1; }
  .v-scene .ms-f-needle { transform: rotate(-118deg); }
  .v-scene .ms-f-merc { transform: scaleY(.22); }
  .v-scene .ms-f-cold { opacity: .55; }
  .v-scene .ms-f-ice { opacity: .9; transform: translateY(-6px); }
  .v-scene .ms-f-wisp { opacity: .7; transform: translateY(-22px); }
  .v-scene g:nth-of-type(even) > .ms-f-ice { opacity: 0; }
  .v-scene .ms-n-air { opacity: .6; }
  .v-scene .ms-n-fruit { transform: scale(.95); }
  .v-scene .ms-n-deep { opacity: .2; }
}