/* ==========================================
   EFEK ANIMASI KHAS MODE NARUTO (CSS PURE)
   ================================---------- */

/* 1. SAGE MODE (Aura Oranye Terang & Stabil) */
.sage-mode-effect {
  border: 2px solid #ff9900;
  box-shadow: 0 0 15px rgba(255, 153, 0, 0.6), inset 0 0 10px rgba(255, 153, 0, 0.4);
  animation: sagePulse 3s infinite ease-in-out;
}

@keyframes sagePulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(255, 153, 0, 0.6), inset 0 0 10px rgba(255, 153, 0, 0.4);
  }
  50% {
    box-shadow: 0 0 30px rgba(255, 170, 0, 0.9), inset 0 0 20px rgba(255, 170, 0, 0.7);
  }
}

/* 2. KYUBI MODE / KURAMA LINK (Aura Api Merah-Oranye Ganas) */
.kyubi-mode-effect {
  position: relative;
  border: 2px solid #ff3300;
  background: linear-gradient(145deg, #1a0500, #0a0200);
  animation: kyubiFlame 2s infinite alternate ease-in-out;
}

@keyframes kyubiFlame {
  0% {
    box-shadow: 0 0 20px rgba(255, 50, 0, 0.7), 0 0 40px rgba(255, 100, 0, 0.4);
    transform: scale(1);
  }
  100% {
    box-shadow: 0 0 35px rgba(255, 0, 0, 0.9), 0 0 60px rgba(255, 80, 0, 0.7), inset 0 0 15px rgba(255, 200, 0, 0.5);
    transform: scale(1.01);
  }
}

/* 3. BARYON MODE (Mode Terkuat: Pusaran Energi Merah Keemasan & Bergetar) */
.baryon-mode-effect {
  position: relative;
  border: 2px solid #ff0055;
  background: linear-gradient(135deg, #2b0005, #050001);
  animation: baryonPower 0.8s infinite alternate ease-in-out, baryonVibrate 0.15s infinite linear;
  overflow: hidden;
}

/* Efek Kilat / Pusaran Energi Baryon */
.baryon-mode-effect::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(255, 0, 85, 0.3), rgba(255, 215, 0, 0.4), transparent 60%);
  animation: baryonSpin 4s linear infinite;
  pointer-events: none;
}

@keyframes baryonSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes baryonPower {
  0% {
    box-shadow: 0 0 25px rgba(255, 0, 68, 0.8), 0 0 50px rgba(255, 120, 0, 0.5);
  }
  100% {
    box-shadow: 0 0 45px rgba(255, 0, 0, 1), 0 0 80px rgba(255, 215, 0, 0.8), 0 0 100px rgba(255, 0, 128, 0.6);
  }
}

@keyframes baryonVibrate {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-1px, 1px); }
  40% { transform: translate(1px, -1px); }
  60% { transform: translate(-1px, -1px); }
  80% { transform: translate(1px, 1px); }
  100% { transform: translate(0, 0); }
}