/* The Webflow export hides .cursor-wrap (the smoke-cursor canvas + dot)
   below 991px, which is every phone. smoke-cursor.js now drives the effect
   off touch drags too, so re-enable the wrapper on those breakpoints. */
@media screen and (max-width: 991px) {
  .cursor-wrap {
    display: block;
    /* mix-blend-mode: difference on a fixed-position wrapper around a
       GPU-composited WebGL canvas is a known iOS/WebKit compositor bug —
       Safari renders the whole blended layer invisible instead of blending
       it, even though the WebGL simulation itself runs correctly (confirmed
       via on-device console: context/shaders/listeners all initialize with
       no errors, nothing paints). Chrome/Android isn't affected. Normal
       blending trades the invert-against-background look for actually
       being visible on iOS. */
    mix-blend-mode: normal;
  }

  /* Safari is known to fail to composite an absolutely-positioned WebGL
     canvas correctly unless it's explicitly forced onto its own GPU
     compositor layer. This is the standard fix for "canvas renders fine per
     WebGL calls but is invisible on screen" on iOS. */
  .cursor-canvas {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}