/* Spin animation - using spin.js pattern */
/* When spin class is added (like spin.js does with #next), logo spins continuously */
/* Coin spinning effect - uses rotateY for 3D flip effect */
#dobble-page .main-container {
    perspective: 1000px;
    transform-style: preserve-3d;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  #dobbleLogo,
  #next,
  .dobble-logo-figure {
    transform-style: preserve-3d;
    backface-visibility: visible;
  }
  
  #dobbleLogo.spin,
  #next.spin,
  .dobble-logo-figure.spin {
    animation: spinCoin 0.6s linear !important;
    animation-duration: 0.6s !important;
    animation-iteration-count: 5 !important; /* 5 rotations in 3 seconds (0.6s * 5 = 3s) */
    transform-style: preserve-3d !important;
    transform-origin: center center !important;
    position: relative !important; /* Keep original position, don't move off-screen */
    top: auto !important;
    left: auto !important;
    opacity: 1 !important;
  }
  
  #dobbleLogo.spin figure,
  #dobbleLogo.spin img,
  #next.spin figure,
  #next.spin img,
  .dobble-logo-figure.spin figure,
  .dobble-logo-figure.spin img {
    transform-style: preserve-3d;
    backface-visibility: visible;
  }
  
  @keyframes spinCoin {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(360deg);
    }
  }
  /* Bounce - 3s max */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
  }
  
  .bounce,
  #next.bounce,
  #dobbleLogo.bounce,
  .dobble-logo-figure.bounce {
    animation: bounce 0.6s ease-in-out; /* one cycle 0.6s */
    transform-origin: center center;
  }
  
  /* Shake - 3s max */
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
  }
  
  .shake {
    animation: shake 0.3s ease-in-out; /* one cycle 0.3s */
  }
  
  /* Pulse - 3s max */
  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
  }
  
  .pulse {
    animation: pulse 0.6s ease-in-out; /* one cycle 0.6s */
  }
  
  /* Buzz - subtle rapid vibration */
  @keyframes buzz {
    0%   { transform: translateX(0) translateY(0) scale(1); }
    10%  { transform: translateX(-1px) translateY(-0.5px) scale(0.995); }
    20%  { transform: translateX(1px) translateY(0.5px) scale(1.005); }
    30%  { transform: translateX(-1px) translateY(0.5px) scale(0.998); }
    40%  { transform: translateX(1px) translateY(-0.5px) scale(1.002); }
    50%  { transform: translateX(-0.5px) translateY(0) scale(0.998); }
    60%  { transform: translateX(0.5px) translateY(0.5px) scale(1.002); }
    70%  { transform: translateX(-0.5px) translateY(-0.5px) scale(0.999); }
    80%  { transform: translateX(0.5px) translateY(0) scale(1.001); }
    90%  { transform: translateX(0) translateY(0.5px) scale(1); }
    100% { transform: translateX(0) translateY(0) scale(1); }
  }
  
  .buzz {
    animation: buzz 0.2s ease-in-out; /* one cycle 0.2s */
  }
  
  

  .buzz {
    animation: buzz 0.35s ease-in-out;
  }

  /* Dobble animation - JavaScript handles positioning and rotation */
  #dobbleLogo.dobble,
  #next.dobble {
    opacity: 1 !important;
    transform-style: preserve-3d;
    backface-visibility: visible;
  }

  /* Apply animation classes to #next, #dobbleLogo, and .dobble-logo-figure */
  #next.bounce,
  #next.shake,
  #next.pulse,
  #next.buzz,
  #next.dobble,
  #dobbleLogo.bounce,
  #dobbleLogo.shake,
  #dobbleLogo.pulse,
  #dobbleLogo.buzz,
  #dobbleLogo.dobble,
  .dobble-logo-figure.bounce,
  .dobble-logo-figure.shake,
  .dobble-logo-figure.pulse,
  .dobble-logo-figure.buzz,
  .dobble-logo-figure.dobble {
    transform-style: preserve-3d;
    backface-visibility: visible;
  }