/* MOGEOSH V4.3 — fluidity-first mobile animation layer.
   Small real-time changes stay compositor-friendly; offscreen work is suspended.
   No blanket CPU/GPU promotion: only a handful of visible organic surfaces. */
@media(max-width:860px){
  /* Fixed live-blur layers cause expensive full-viewport repaints on mobile Safari. */
  .m4-appbar,.m4-tabbar{
    background:rgba(248,244,239,.985);
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .m4-appbar{background:rgba(246,242,237,.985)}
  /* Keep overlapping liquid silhouettes but animate them by transform, not by
     re-rasterizing their large border-radius shapes on every frame. */
  .art-blob,.ideas-liquid,.closing-liquid,.detail-orb{
    animation-name:m5-liquid-translate;
    will-change:transform;
    backface-visibility:hidden;
  }
  .blob-a{animation-name:m5-liquid-main}
  .anomaly-stage::before{
    animation-name:m5-liquid-breath;
    will-change:transform;
  }
  .motion-asleep .art-blob,.motion-asleep .ideas-liquid,
  .motion-asleep .closing-liquid,.motion-asleep .detail-orb{
    will-change:auto;
  }
}
/* Offscreen sections consume no CSS-animation frames; the observer wakes them
   180px before entering the viewport so the animation feels continuous. */
.motion-asleep,
.motion-asleep *,
.motion-asleep::before,.motion-asleep::after,
.motion-asleep *::before,.motion-asleep *::after{
  animation-play-state:paused!important;
}
/* The variation comes from soft displacement and changing overlap, not
   repeatedly painting a large morphing border at 12 FPS. */
@keyframes m5-liquid-translate{
  0%{transform:translate3d(-7px,-8px,0) rotate(-3deg) scale(.97)}
  100%{transform:translate3d(9px,12px,0) rotate(4deg) scale(1.055)}
}
@keyframes m5-liquid-main{
  0%{transform:translate3d(var(--field-x,0px),var(--field-y,0px),0) rotate(-4deg) scale(.985)}
  100%{transform:translate3d(calc(var(--field-x,0px) + 10px),calc(var(--field-y,0px) - 14px),0) rotate(12deg) scale(1.045)}
}
@keyframes m5-liquid-breath{
  0%{transform:translate3d(-12px,9px,0) rotate(-12deg) scale(.84)}
  50%{transform:translate3d(16px,-19px,0) rotate(17deg) scale(1.18)}
  100%{transform:translate3d(-8px,20px,0) rotate(-15deg) scale(.83)}
}
@media(prefers-reduced-motion:reduce){
  .art-blob,.ideas-liquid,.closing-liquid,.detail-orb,.anomaly-stage::before{
    animation:none!important;will-change:auto!important;
  }
}
html[data-motion="off"] .art-blob,
html[data-motion="off"] .ideas-liquid,
html[data-motion="off"] .closing-liquid,
html[data-motion="off"] .detail-orb,
html[data-motion="off"] .anomaly-stage::before{
  animation:none!important;will-change:auto!important;
}