/* ========== ベースリセット & 変数 ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* カラーパレット */
  --primary-bg: #0a0a0f;
  --secondary-bg: #131318;
  --accent-bg: #1a1a24;
  --card-bg: rgba(19, 19, 24, 0.8);
  --primary-color: #64ffda;
  --secondary-color: #ff6b6b;
  --accent-color: #4ecdc4;
  --text-primary: #ffffff;
  --text-secondary: #a8b2d1;
  --text-muted: #6b7688;
  --border-color: rgba(100, 255, 218, 0.2);

  /* グラデーション */
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-secondary: linear-gradient(135deg, #ff6b6b 0%, #ffa500 100%);
  --gradient-accent: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
  --gradient-bg: linear-gradient(135deg, #0a0a0f 0%, #1a1a24 100%);

  /* フォント */
  --font-main: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* アニメーション */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  background: var(--primary-bg);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

/* パーティクル背景 */
#particles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: var(--gradient-bg);
}

#particles-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
  radial-gradient(circle at 20% 50%, rgba(100, 255, 218, 0.1) 0%, transparent 50%),
  radial-gradient(circle at 80% 20%, rgba(255, 107, 107, 0.1) 0%, transparent 50%),
  radial-gradient(circle at 40% 80%, rgba(78, 205, 196, 0.1) 0%, transparent 50%);
  animation: float 20s ease-in-out infinite;
}

/* キーフレームアニメーション */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-20px) rotate(1deg); }
      66% { transform: translateY(-10px) rotate(-1deg); }
      }

      @keyframes blink {
        0%, 50% { opacity: 1; }
          51%, 100% { opacity: 0; }
          }

          @keyframes typeWriter {
            to { opacity: 1; }
            }

            @keyframes scrollBounce {
              0%, 20%, 50%, 80%, 100% { transform: translateY(0) rotate(45deg); }
                40% { transform: translateY(-10px) rotate(45deg); }
                  60% { transform: translateY(-5px) rotate(45deg); }
                  }

                  @keyframes orbit {
                    from { transform: translate(-30px, -150px) rotate(0deg) translate(150px) rotate(0deg); }
                      to { transform: translate(-30px, -150px) rotate(360deg) translate(150px) rotate(-360deg); }
                      }

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

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