/* Mobile ESP illustrations: small, purposeful motion without moving the cards. */
@media (max-width: 800px) {
  #esp-method.esp-hub .esp-skill-check {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    animation: esp-mobile-skill-draw 3.8s ease-in-out infinite;
  }
  #esp-method.esp-hub .skills-widget .esp-compact-icon rect {
    transform-box: view-box;
    transform-origin: 24px 24px;
    animation: esp-mobile-skill-confirm 3.8s ease-in-out infinite;
  }
  #esp-method.esp-hub .esp-personality-spark {
    transform-box: view-box;
    transform-origin: 23px 19px;
    fill: #078c7910;
    animation: esp-mobile-personality-spark 4.4s ease-in-out -1.1s infinite;
  }
  #esp-method.esp-hub .esp-personality-ripple {
    transform-box: view-box;
    transform-origin: 23px 19px;
    fill: none;
    stroke-width: .9;
    opacity: 0;
    animation: esp-mobile-personality-ripple 4.4s ease-out -1.1s infinite;
  }
}

@keyframes esp-mobile-skill-draw {
  0% { stroke-dashoffset: 1; opacity: 0; }
  8% { stroke-dashoffset: 1; opacity: 1; }
  29%, 82% { stroke-dashoffset: 0; opacity: 1; }
  94% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes esp-mobile-skill-confirm {
  0%, 26%, 47%, 100% { transform: scale(1); }
  35% { transform: scale(1.045); }
}
@keyframes esp-mobile-personality-spark {
  0%, 100% { transform: rotate(-9deg) scale(.94); fill: #078c7908; }
  35% { transform: rotate(9deg) scale(1.08); fill: #078c7930; }
  66% { transform: rotate(0deg) scale(1); fill: #078c7910; }
}
@keyframes esp-mobile-personality-ripple {
  0%, 20% { transform: scale(.6); opacity: 0; }
  30% { transform: scale(.8); opacity: .42; }
  65%, 100% { transform: scale(1.65); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #esp-method.esp-hub .esp-skill-check,
  #esp-method.esp-hub .skills-widget .esp-compact-icon rect,
  #esp-method.esp-hub .esp-personality-spark,
  #esp-method.esp-hub .esp-personality-ripple {
    animation: none;
    transform: none;
  }
  #esp-method.esp-hub .esp-skill-check { stroke-dashoffset: 0; opacity: 1; }
  #esp-method.esp-hub .esp-personality-ripple { opacity: 0; }
}