<style>
  /* Preloader overlay */
  #arnis-preloader {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: #0d1117; /* dark backdrop */
    z-index: 9999;
  }

  /* Keep the SVG small and crisp */
  #arnis-preloader svg {
    width: 120px;
    height: 120px;
    display: block;
  }

  /* Stick swinging animation */
  .stick {
    transform-origin: 50% 80%;
    animation: swing 0.9s ease-in-out infinite;
  }
  .stick.left { animation-delay: -0.15s; }
  .stick.right { animation-delay: 0.15s; }

  @keyframes swing {
    0%   { transform: rotate(-18deg); }
    30%  { transform: rotate(18deg); }
    60%  { transform: rotate(-6deg); }
    100% { transform: rotate(-18deg); }
  }

  /* Flash at the impact point */
  .impact {
    transform-origin: center;
    animation: flash 0.9s linear infinite;
    opacity: 0.0;
  }
  @keyframes flash {
    0%   { opacity: 0; transform: scale(0.7); }
    30%  { opacity: 1; transform: scale(1.15); }
    45%  { opacity: 0.7; transform: scale(0.95); }
    100% { opacity: 0; transform: scale(0.7); }
  }

  /* subtle glow for sticks */
  .stick-shade {
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.6));
  }

  /* optional small pulsing text */
  #arnis-preloader .label {
    margin-top: 12px;
    color: #cbd5e1;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 13px;
    letter-spacing: 0.06em;
    opacity: 0.9;
    animation: pulse 1.6s ease-in-out infinite;
  }
  @keyframes pulse {
    0%   { opacity: 0.6; transform: translateY(0); }
    50%  { opacity: 1; transform: translateY(-3px); }
    100% { opacity: 0.6; transform: translateY(0); }
  }
</style>