/* ========================================
   アニメーション定義
   ======================================== */

/* 基本アニメーション */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from { 
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slide-in {
  from { opacity: 0; transform: translateX(-50px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

/* パルス系アニメーション */
@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(255, 193, 7, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
}

@keyframes pulse-button {
  0% { box-shadow: 0 10px 30px rgba(255, 193, 7, 0.4); }
  50% { box-shadow: 0 10px 50px rgba(255, 193, 7, 0.8); }
  100% { box-shadow: 0 10px 30px rgba(255, 193, 7, 0.4); }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 30px rgba(255, 193, 7, 0.3); }
  50% { box-shadow: 0 0 60px rgba(255, 193, 7, 0.6); }
}

@keyframes statusPulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7);
  }
  70% {
    transform: scale(1.2);
    box-shadow: 0 0 0 10px rgba(0, 255, 136, 0);
  }
}

/* アイコンアニメーション */
@keyframes icon-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

@keyframes icon-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* 特殊効果 */
@keyframes ray-scan {
  0% { opacity: 0; transform: scaleX(0) rotate(var(--rotation, 0deg)); }
  50% { opacity: 1; transform: scaleX(1.5) rotate(var(--rotation, 0deg)); }
  100% { opacity: 0; transform: scaleX(0) rotate(var(--rotation, 0deg)); }
}

@keyframes person-lurk {
  0%, 100% { transform: translateY(10px); opacity: 0.3; }
  50% { transform: translateY(0); opacity: 0.8; }
}

/* デバイス関連 */
@keyframes device-pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.1); opacity: 1; }
}

@keyframes deviceFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* マトリックス関連 */
@keyframes matrixFall {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

@keyframes matrixFlow {
  0% { transform: translateY(-100%) translateX(0); }
  100% { transform: translateY(100%) translateX(0); }
}

/* データフロー */
@keyframes dataFlow {
  0% { transform: translateY(-100%); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

/* スキャンライン */
@keyframes scanLine {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* 回転 */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 点滅 */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* タイプライター */
@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

/* フローティング */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@keyframes floatLogo {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}

/* ダークパルス */
@keyframes dark-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

/* カウンター */
@keyframes counter-blink {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

@keyframes ipChange {
  0% { content: '192.168.1.1'; opacity: 1; }
  25% { content: '10.0.0.5'; opacity: 0.8; }
  50% { content: '172.16.0.3'; opacity: 1; }
  75% { content: '192.168.0.1'; opacity: 0.8; }
  100% { content: '192.168.1.1'; opacity: 1; }
}

/* パーティクルフロー */
@keyframes particleFlow {
  0% { transform: translateY(-20px) translateX(0); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(20px) translateX(20px); opacity: 0; }
}

/* サジェスト表示 */
@keyframes appearSuggest {
  to { opacity: 1; transform: translateY(0); }
}

/* レスポンシブアニメーション */
@media (max-width: 768px) {
  @keyframes slide-in { from { transform: translateX(-30px); } }
}