/* Keep the moving ember field smooth on phones without losing its colour. */
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  body::before {
    inset: -10vh -18vw;
    filter: blur(22px) saturate(138%) contrast(106%);
    opacity: .84;
    animation-duration: 28s;
  }

  body::after { display: none; }

  .homepage #work .work-stack .project {
    transform: scale(.94);
    transition: opacity .34s ease, transform .38s cubic-bezier(.22,.7,.25,1);
  }

  .homepage #work .work-stack .project.is-current { transform: scale(1); }
}

@media (max-width: 650px) {
  .homepage #work .work-stack { --slide-height: 380px; }
  .homepage #work .work-stack .project { gap: 12px; padding-inline: 4px; }
  .homepage #work .work-stack .work-desktop img { max-height: 190px; }
  .homepage #work .work-stack .work-mobile { width: 20%; }
  .homepage #work .work-stack-controls { gap: 12px; margin-top: 14px; }
}

@media (max-width: 380px) {
  .homepage #work .work-stack { --slide-height: 368px; }
  .homepage #work .work-stack .work-desktop img { max-height: 176px; }
}