/* Keep fixed layers opaque on touch devices: blurring the moving page beneath
   them was expensive. Small icon animations remain defined in refinements.css. */
@media (hover: none) and (pointer: coarse) {
  .topbar { background: #0b0b0d; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mobile-dock { background: linear-gradient(180deg, #212018, #111112); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .phone-badge, .lp-float-label { background: #19191b; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hero .hero-film-light { animation: none !important; transform: none; opacity: .65; }
  /* Keep the full-height SVG artwork static; animate tiny light particles instead. */
  .hero .energy-travel path, .hero .energy-stars { animation: none !important; }
  .hero .energy-travel { stroke-dashoffset: 0; }
  .solution-grid article.motion-active:before { animation: none; }
}
.mobile-energy-particle { display: none; }
@media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  .hero .hero-film-light {
    inset: auto; top: 18%; right: 4%; width: 140px; height: 140px;
    background: radial-gradient(circle, #ffcd3840, #ffcd3812 45%, transparent 70%);
    opacity: .65;
    animation: mobile-light-drift 9s ease-in-out infinite alternate !important;
    animation-play-state: paused !important;
  }
  .hero.motion-active .hero-film-light { animation-play-state: running !important; }
  .mobile-energy-particle {
    display: block; position: absolute; top: 30%; right: 8%; width: 5px; height: 5px;
    border-radius: 50%; background: #ffe28b; box-shadow: 0 0 10px 3px #ffd04255;
    pointer-events: none; animation: mobile-particle-flow 8s ease-in-out infinite;
    animation-play-state: paused;
  }
  .mobile-energy-particle:nth-of-type(2) { top: 48%; right: 17%; animation-delay: -3s; }
  .mobile-energy-particle:nth-of-type(3) { top: 66%; right: 6%; animation-delay: -5s; }
  .hero.motion-active .mobile-energy-particle { animation-play-state: running; }
  /* Replace only shadow animation on icon containers; retain the original inner
     SVG pulses, tracing, scanning, rings and bars, all limited to visible cards. */
  .motion-active .card-energy, .motion-active .step-icon { animation: mobile-icon-lift 5s ease-in-out infinite; }
  .button.primary:after { left: -65%; animation: mobile-button-shine 8s ease-in-out infinite; }
  @keyframes mobile-light-drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-18px,14px,0); } }
  @keyframes mobile-icon-lift { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-3px,0); } }
  @keyframes mobile-particle-flow {
    0% { transform: translate3d(-95px,120px,0); opacity: 0; }
    15% { opacity: .85; }
    85% { opacity: .85; }
    100% { transform: translate3d(25px,-70px,0); opacity: 0; }
  }
  @keyframes mobile-button-shine {
    0%,65% { transform: translate3d(0,0,0) skewX(-25deg); }
    90%,100% { transform: translate3d(650%,0,0) skewX(-25deg); }
  }
  /* Do not pause icon details or entrance effects during scrolling. */
  html.touch-scrolling .hero.motion-active .hero-film-light,
  html.touch-scrolling .hero .mobile-energy-particle,
  html.touch-scrolling .hero .device,
  html.touch-scrolling .hero .lp-browser,
  html.touch-scrolling .hero .lp-phone,
  html.touch-scrolling .strategy-panel { animation-play-state: paused !important; }
  html.page-hidden *, html.page-hidden *:before, html.page-hidden *:after { animation-play-state: paused !important; }
}