/*!
 * Путь: /wp-content/themes/sml-theme/assets/css/motion.css
 * Описание: Премиальные микро-анимации для меню и overlay. Без дешёвого fade. Учитывает prefers-reduced-motion.
 * Версия: 1.0.0
 * Автор: Nuvren.com
 */

@media (prefers-reduced-motion: reduce){
  .sml-overlay__panel,
  .sml-overlay__menu li,
  .sml-overlay__block{
    animation: none !important;
  }
}

@keyframes smlFloatIn {
  0%   { transform: translate3d(0, 10px, 0) scale(0.985); filter: blur(2px); opacity: 0.001; }
  100% { transform: translate3d(0, 0, 0) scale(1); filter: blur(0); opacity: 1; }
}

@keyframes smlPanelIn {
  0%   { transform: translate3d(26px, 0, 0); opacity: 0.001; }
  100% { transform: translate3d(0, 0, 0); opacity: 1; }
}

/* Включается JS-ом через класс .sml-motion-ready на html */
html.sml-motion-ready .sml-overlay.is-open .sml-overlay__panel{
  animation: smlPanelIn 420ms var(--sml-ease) both;
}

html.sml-motion-ready .sml-overlay.is-open .sml-overlay__menu li{
  animation: smlFloatIn 520ms var(--sml-ease) both;
}

html.sml-motion-ready .sml-overlay.is-open .sml-overlay__menu li:nth-child(1){ animation-delay: 40ms; }
html.sml-motion-ready .sml-overlay.is-open .sml-overlay__menu li:nth-child(2){ animation-delay: 90ms; }
html.sml-motion-ready .sml-overlay.is-open .sml-overlay__menu li:nth-child(3){ animation-delay: 140ms; }
html.sml-motion-ready .sml-overlay.is-open .sml-overlay__menu li:nth-child(4){ animation-delay: 190ms; }
html.sml-motion-ready .sml-overlay.is-open .sml-overlay__menu li:nth-child(5){ animation-delay: 240ms; }
html.sml-motion-ready .sml-overlay.is-open .sml-overlay__menu li:nth-child(6){ animation-delay: 290ms; }

html.sml-motion-ready .sml-overlay.is-open .sml-overlay__block{
  animation: smlFloatIn 560ms var(--sml-ease) both;
  animation-delay: 120ms;
}