@unocss all;

/* Ultra-modern glass morphism theme */
:root {
  color-scheme: dark;
  /* Base - Pure black for maximum contrast */
  --bg-base: #000000;
  --bg-soft: #050505;
  --bg-mute: #0a0a0b;
  --text-base: #ffffff;
  --text-soft: #e4e4e7;
  --text-mute: #a1a1aa;
  --brand-primary: #ffffff;
  --brand-accent: #00ff88;
  --border-color: rgba(255, 255, 255, 0.05);

  /* Glass morphism tokens - Optimized for performance */
  --glass-bg: rgba(255, 255, 255, 0.02);
  --glass-border: rgba(255, 255, 255, 0.05);
  --glass-blur: 8px;  /* Optimized for performance */
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);  /* Performance optimized */
  --glass-border-width: 1px;

  --glow-primary: #00ff88;
  --glow-secondary: #4444ff;
  --glow-accent: #ff0088;
  --glow-cyan: #22d3ee;
  --glow-violet: #a78bfa;
  --ring-shadow: 0 0 20px rgba(0, 255, 136, 0.06);  /* Reduced glow for performance */

  /* Gradient text */
  --grad-text: linear-gradient(135deg, #ffffff 0%, #4444ff 50%, #00ff88 100%);
  --grad-hero: linear-gradient(135deg, #4444ff 0%, #00ff88 100%);

  /* Z-index層の定義 */
  --z-background: -4; /* 最背面の背景 */
  --z-particles: -3; /* パーティクル層 */
  --z-parallax: -2; /* パララックス要素 */
  --z-decorative: -1; /* 装飾的要素 */
  --z-base: 0; /* 基本コンテンツ */
  --z-elevated: 1; /* 軽く浮いた要素 */
  --z-dropdown: 10; /* ドロップダウン */
  --z-sticky: 50; /* 固定ヘッダー */
  --z-modal: 100; /* モーダル */
  --z-tooltip: 1000; /* ツールチップ */
  --z-cursor: 9999; /* カーソル効果（最前面） */
}

html, body, #app {
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  width: 100%;
  overscroll-behavior: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-smooth: always;
}

html {
  background: var(--bg-base);
}

body {
  background: var(--bg-base);
  color: var(--text-base);
  font-family:
    "Noto Sans JP",
    ui-sans-serif,
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    "Apple Color Emoji",
    "Segoe UI Emoji";
  width: 100%;
  overflow-x: hidden;
  min-width: 100%;
}

/* Headings - より大きく、インパクトのあるタイポグラフィ */
h1, h2, h3, h4 {
  font-family:
    "JetBrains Mono",
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    monospace;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* container utility - フルワイド対応 */
.container {
  margin-inline: auto;
  padding-inline: 2rem;
  max-width: 100%;
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    padding-inline: 2.5rem;
  }
}

@media (min-width: 768px) {
  .container {
    padding-inline: 3rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding-inline: 4rem;
  }
}

@media (min-width: 1280px) {
  .container {
    padding-inline: 5rem;
  }
}

@media (min-width: 1536px) {
  .container {
    padding-inline: 6rem;
  }
}

@media (min-width: 1920px) {
  .container {
    padding-inline: 8rem;
  }
}

@media (min-width: 2560px) {
  .container {
    padding-inline: 10rem;
  }
}

/* ---------- Markdown(Prose) - Ultra glass style ---------- */
.prose {
  max-width: 78ch;
  margin-inline: auto;
  padding-inline: 1rem;
}
.prose h1, .prose h2, .prose h3, .prose h4 {
  letter-spacing: -0.02em;
  line-height: 1.15;
  background: linear-gradient(180deg, #fff, #cfcfcf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.05));
}
.prose h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 2.2rem 0 1rem;
}
.prose h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 1.8rem 0 0.9rem;
}
.prose h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  margin: 1.4rem 0 0.6rem;
}

.prose p {
  color: var(--text-soft);
  line-height: 1.9;
  margin: 0.9rem 0;
}

.prose pre {
  position: relative;
  overflow: auto;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.prose code {
  background: rgba(17, 24, 39, 0.55);
  padding: 0.2rem 0.45rem;
  border-radius: 0.5rem;
  border: 1px solid var(--glass-border);
  color: var(--brand-accent);
}

/* テーブル */
.prose table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: var(--ring-shadow);
}
.prose thead th {
  background: color-mix(in oklab, var(--bg-soft) 70%, black);
}
.prose th, .prose td {
  border-bottom: 1px solid var(--border-color);
  padding: 0.6rem 0.8rem;
}

/* 引用 */
.prose blockquote {
  background: linear-gradient(
    180deg,
    rgba(17, 24, 39, 0.45),
    rgba(17, 24, 39, 0.25)
  );
  padding: 1rem 1.2rem;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  box-shadow: var(--ring-shadow);
}

/* 画像キャプション */
.prose figure figcaption {
  color: var(--text-mute);
  font-size: 0.85rem;
  text-align: center;
  margin-top: 0.35rem;
}

/* HR */
.prose hr {
  border-color: var(--border-color);
}

/* Ultra gradient background with animated orbs */
.gradient-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: var(--z-background);
}

.gradient-bg::before,
.gradient-bg::after,
.gradient-bg .orb-1,
.gradient-bg .orb-2,
.gradient-bg .orb-3,
.gradient-bg .orb-4,
.gradient-bg .orb-5,
.gradient-bg .orb-6 {
  content: "";
  position: absolute;
  border-radius: 50%;
  /* mix-blend-mode: screen; */ /* Performance optimization */
  filter: blur(80px);
  animation: floatOrb 20s ease-in-out infinite;
  will-change: auto;
  contain: layout style paint;
}

.gradient-bg::before {
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    rgba(68, 68, 255, 0.35) 0%,
    transparent 70%
  );
  top: -300px;
  left: -300px;
}

.gradient-bg::after {
  width: 800px;
  height: 800px;
  background: radial-gradient(
    circle,
    rgba(0, 255, 136, 0.35) 0%,
    transparent 70%
  );
  bottom: -400px;
  right: -400px;
  animation-delay: -10s;
  animation-duration: 30s;
}

/* 追加のorb要素 */
.gradient-bg .orb-1 {
  width: 900px;
  height: 900px;
  background: radial-gradient(
    circle,
    rgba(255, 0, 136, 0.25) 0%,
    transparent 70%
  );
  top: 100vh;
  left: -450px;
  animation: floatOrbVertical 40s ease-in-out infinite -5s;
}

.gradient-bg .orb-2 {
  width: 1200px;
  height: 1200px;
  background: radial-gradient(
    circle,
    rgba(34, 211, 238, 0.2) 0%,
    transparent 70%
  );
  top: 50vh;
  right: -600px;
  animation: floatOrbDiagonal 45s ease-in-out infinite -15s;
}

.gradient-bg .orb-3 {
  width: 800px;
  height: 800px;
  background: radial-gradient(
    circle,
    rgba(167, 139, 250, 0.3) 0%,
    transparent 70%
  );
  top: 150vh;
  left: 50%;
  transform: translateX(-50%);
  animation: floatOrbCircle 35s ease-in-out infinite -20s;
}

.gradient-bg .orb-4 {
  width: 1000px;
  height: 1000px;
  background: radial-gradient(
    circle,
    rgba(255, 165, 0, 0.2) 0%,
    transparent 70%
  );
  top: 200vh;
  right: -200px;
  animation: floatOrbAlt 50s ease-in-out infinite -8s;
}

/* さらに下部に配置されるorb */
.gradient-bg .orb-5 {
  width: 1100px;
  height: 1100px;
  background: radial-gradient(
    circle,
    rgba(68, 68, 255, 0.25) 0%,
    transparent 70%
  );
  top: 300vh;
  left: -300px;
  animation: floatOrbVertical 55s ease-in-out infinite -25s;
}

.gradient-bg .orb-6 {
  width: 900px;
  height: 900px;
  background: radial-gradient(
    circle,
    rgba(0, 255, 136, 0.2) 0%,
    transparent 70%
  );
  top: 250vh;
  right: 10%;
  animation: floatOrbDiagonal 60s ease-in-out infinite -30s;
}

@keyframes floatOrb {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
  33% {
    transform: translate3d(100px, -100px, 0) scale3d(1.1, 1.1, 1);
  }
  66% {
    transform: translate3d(-50px, 50px, 0) scale3d(0.9, 0.9, 1);
  }
}

/* 追加のアニメーションパターン */
@keyframes floatOrbAlt {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
  25% {
    transform: translate3d(-80px, 60px, 0) scale3d(1.15, 1.15, 1);
  }
  50% {
    transform: translate3d(60px, -40px, 0) scale3d(0.95, 0.95, 1);
  }
  75% {
    transform: translate3d(-40px, -80px, 0) scale3d(1.05, 1.05, 1);
  }
}

@keyframes floatOrbCircle {
  0% {
    transform: rotate(0deg) translateX(100px) rotate(0deg) scale3d(1, 1, 1);
  }
  100% {
    transform: rotate(360deg) translateX(100px) rotate(-360deg) scale3d(1, 1, 1);
  }
}

/* 垂直移動アニメーション */
@keyframes floatOrbVertical {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
  50% {
    transform: translate3d(50px, -300px, 0) scale3d(1.2, 1.2, 1);
  }
}

/* 斜め移動アニメーション */
@keyframes floatOrbDiagonal {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
  25% {
    transform: translate3d(-200px, -150px, 0) scale3d(1.1, 1.1, 1);
  }
  50% {
    transform: translate3d(-100px, -300px, 0) scale3d(0.9, 0.9, 1);
  }
  75% {
    transform: translate3d(100px, -100px, 0) scale3d(1.15, 1.15, 1);
  }
}

.gradient-noise::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: var(--z-base);
}

/* Grid background with vignette like sample */
.gradient-noise::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image:
    radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0) 40%,
      rgba(0, 0, 0, 0.25)
    ),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: auto, 50px 50px, 50px 50px;
  pointer-events: none;
  z-index: var(--z-base);
}

/* スムーズスクロール */
html {
  scroll-behavior: auto; /* JSでscrollIntoViewを使用 */
}

/* Ultra hero section styles - sample/markdown inspired */
.hero-text {
  font-size: clamp(3rem, 10vw, 8rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.06em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 30px rgba(0, 255, 136, 0.35));
  position: relative;
  text-rendering: optimizeLegibility;
}

.hero-text::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: var(--z-decorative);
  background: linear-gradient(135deg, #4444ff 0%, #00ff88 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: blur(20px);
  opacity: 0.5;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .hero-text {
    font-size: clamp(2rem, 10vw, 3.5rem);
    letter-spacing: -0.03em;
  }

  .btn-primary,
  .btn-secondary {
    padding: 0.6rem 1.5rem;
    font-size: 0.875rem;
  }

  /* モバイルではボタンを縦並びに */
  .mobile-flex-col {
    flex-direction: column;
    width: 100%;
  }

  .mobile-flex-col > * {
    width: 100%;
  }
}

/* パララックス要素 */
.parallax-element {
  /* will-changeは動的に適用 */
  transition: transform 0.1s ease-out;
}

/* フェードインアニメーションは削除 */

/* ガラス/ニューモーフィズム系 ボタン */
.btn-primary {
  position: relative;
  background: var(--glass-bg);
  color: var(--text-base);
  padding: 0.8rem 1.6rem;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  will-change: auto;
  box-shadow: var(--glass-shadow);
  transition:
    transform 0.15s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    0 0 30px rgba(34, 211, 238, 0.25),
    0 0 50px rgba(167, 139, 250, 0.12);
  opacity: 0.0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.btn-primary:hover {
  transform: translate3d(0, -1px, 0);
  border-color: rgba(255, 255, 255, 0.18);
}
.btn-primary:hover::after {
  opacity: 0.8;
}

.btn-secondary {
  position: relative;
  background: transparent;
  color: var(--text-soft);
  padding: 0.8rem 1.6rem;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: var(--ring-shadow);
  transition: transform 0.15s ease, box-shadow 0.3s ease, color 0.3s ease;
}
.btn-secondary:hover {
  color: var(--text-base);
  transform: translate3d(0, -1px, 0);
}

/* ネビゲーションのモバイル対応 */
@media (max-width: 768px) {
  nav {
    gap: 1rem !important;
    font-size: 0.875rem;
  }

  header .container {
    padding-block: 1rem;
  }
}

/* アクセシビリティ - フォーカススタイル */
*:focus {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

/* スクロールバーのカスタマイズ */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-base);
}

::-webkit-scrollbar-thumb {
  background: var(--bg-mute);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-mute);
}

/* =========== Ultra Glass Morphism Components =========== */

/* Base glass effect - Enhanced */
.glass-morphism {
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.03);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.glass-morphism::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.02) 50%,
    transparent 100%
  );
  pointer-events: none;
}

/* Animated glass shimmer effect */
.glass-morphism::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 70%
  );
  animation: shimmer 6s infinite;
  pointer-events: none;
}

@keyframes shimmer {
  0% {
    transform: translate3d(-100%, -100%, 0) rotate(45deg);
  }
  100% {
    transform: translate3d(100%, 100%, 0) rotate(45deg);
  }
}

/* Ultra header glass effect */
.glass-header {
  position: fixed; /* 画面上部に常時固定 */
  top: 8px; /* 天井から少し離して島状に */
  left: 0;
  right: 0;
  margin: 0 auto;
  width: min(1200px, 92vw); /* ヘッダー全体の幅を制限 */
  z-index: var(--z-tooltip);
  /* 背景とbackdrop-filterを削除し、.header-islandに一本化 */
  border: none;
  transition: top 0.25s ease;
  will-change: top;
}

/* .glass-header-inner のスタイルは .header-island に統合済み */

/* Ultra navigation items */
.glass-nav-item {
  position: relative;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  background: transparent;
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.7rem;
  font-weight: 500;
}

.glass-nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(0, 255, 136, 0.5);
  transform: translate3d(0, -2px, 0) scale(1.05);
  box-shadow:
    0 8px 20px rgba(0, 255, 136, 0.2),
    inset 0 0 10px rgba(0, 255, 136, 0.05);
}

.glass-nav-text {
  position: relative;
  z-index: var(--z-elevated);
  transition: color 0.3s ease;
}

.glass-nav-item:hover .glass-nav-text {
  color: #ffffff;
  text-shadow: 0 0 20px rgba(0, 255, 136, 0.8);
}

/* Active navigation state */
.glass-nav-item.active {
  background: linear-gradient(
    135deg,
    rgba(68, 68, 255, 0.2) 0%,
    rgba(0, 255, 136, 0.2) 100%
  );
  border-color: rgba(0, 255, 136, 0.8);
  box-shadow:
    0 8px 25px rgba(0, 255, 136, 0.3),
    inset 0 0 15px rgba(0, 255, 136, 0.1);
  transform: translate3d(0, -2px, 0) scale(1.05);
}

.glass-nav-item.active .glass-nav-text {
  color: #ffffff;
  text-shadow: 0 0 30px rgba(0, 255, 136, 1), 0 0 10px rgba(255, 255, 255, 0.8);
  font-weight: 600;
}

.glass-nav-item.active .glass-nav-glow {
  opacity: 0.8;
  animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.6;
    transform: scale3d(1, 1, 1);
  }
  50% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1);
  }
}

.glass-nav-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(
    circle at center,
    var(--glow-cyan) 0%,
    transparent 70%
  );
  filter: blur(20px);
  transition: opacity 0.3s ease;
}

.glass-nav-item:hover .glass-nav-glow {
  opacity: 0.3;
}

/* ヘッダーのソーシャルアイコン */
.glass-social-nav-icon {
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: transparent;
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  color: rgba(255, 255, 255, 0.8);
}

.glass-social-nav-icon:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  transform: translate3d(0, -2px, 0);
  box-shadow:
    0 8px 20px -8px rgba(68, 68, 255, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.glass-social-nav-icon .glass-nav-glow {
  position: absolute;
  inset: -50%;
  background: radial-gradient(
    circle,
    rgba(68, 68, 255, 0.4) 0%,
    transparent 70%
  );
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.glass-social-nav-icon:hover .glass-nav-glow {
  opacity: 1;
  transform: scale(1);
}

/* メインコンテンツ用ガラスパネル */
.glass-content-panel {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.2),
    inset 0 0 30px rgba(167, 139, 250, 0.02);
  position: relative;
}

.glass-content-panel::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 20%;
  right: 20%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--glow-violet) 50%,
    transparent 100%
  );
  filter: blur(4px);
  opacity: 0.6;
}

.glass-content-inner {
  background: rgba(17, 24, 39, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Ultra glass button */
.glass-button {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 1rem 2rem;
}

.glass-button:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translate3d(0, -2px, 0) scale(1.02);
  box-shadow:
    0 6px 16px rgba(34, 211, 238, 0.15),
    0 0 30px rgba(167, 139, 250, 0.1);
}

.glass-button-icon {
  font-size: 1.1rem;
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.5));
}

.glass-button-text {
  position: relative;
  z-index: var(--z-elevated);
}

.glass-button-glow {
  position: absolute;
  inset: -50%;
  background: radial-gradient(
    circle at center,
    rgba(34, 211, 238, 0.2) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: glowPulse 3s ease-in-out infinite;
}

.glass-button:hover .glass-button-glow {
  opacity: 1;
}

/* フッター用ガラス効果 */
.glass-footer {
  margin-top: 6rem;
  position: relative;
}

.glass-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
}

.glass-footer-inner {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.02) 0%,
    rgba(0, 0, 0, 0.5) 100%
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-footer-text {
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s ease;
}

.glass-footer-text:hover {
  color: rgba(255, 255, 255, 0.9);
}

.glass-tech-stack {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 500;
  filter: drop-shadow(0 0 20px rgba(167, 139, 250, 0.3));
}

/* アニメーション */
@keyframes glowPulse {
  0%, 100% {
    transform: scale3d(1, 1, 1) rotate(0deg);
  }
  50% {
    transform: scale3d(1.5, 1.5, 1) rotate(180deg);
  }
}

/* ガラスメイン背景エフェクト */
.glass-main {
  position: relative;
}

.glass-main::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(
      circle at 20% 80%,
      rgba(34, 211, 238, 0.05) 0%,
      transparent 50%
    ),
    radial-gradient(
    circle at 80% 20%,
    rgba(167, 139, 250, 0.05) 0%,
    transparent 50%
  ),
    radial-gradient(
    circle at 40% 40%,
    rgba(34, 211, 238, 0.03) 0%,
    transparent 50%
  );
  pointer-events: none;
  z-index: var(--z-particles);
}

/* 浮遊する光の粒子エフェクト */
@keyframes floatParticle {
  0% {
    transform: translate3d(0, 100vh, 0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translate3d(0, -100vh, 0) rotate(360deg);
    opacity: 0;
  }
}

.glass-particle {
  position: fixed;
  width: 4px;
  height: 4px;
  background: var(--glow-cyan);
  border-radius: 50%;
  filter: blur(2px);
  animation: floatParticle 20s linear infinite;
  pointer-events: none;
  z-index: var(--z-parallax);
  contain: layout style paint;
}


/* レスポンシブ調整 */
@media (max-width: 768px) {
  .glass-nav-item {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }

  .glass-content-panel {
    margin: 0 1rem;
  }

  .glass-footer-inner {
    padding: 2rem 1rem;
  }

  .glass-tech-stack {
    display: block;
    margin-top: 0.5rem;
  }
}

/* =========== インデックスページ用ガラスコンポーネント =========== */

/* ガラスヘディング */
.glass-heading {
  position: relative;
  display: block;
}

.glass-heading-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 30px rgba(167, 139, 250, 0.4));
  position: relative;
  z-index: var(--z-elevated);
}

.glass-heading-glow {
  position: absolute;
  inset: -50%;
  background: radial-gradient(
    ellipse at center,
    rgba(34, 211, 238, 0.15) 0%,
    transparent 70%
  );
  filter: blur(40px);
  opacity: 0.6;
  animation: headingGlow 4s ease-in-out infinite;
}

@keyframes headingGlow {
  0%, 100% {
    transform: scale3d(1, 1, 1) rotate(0deg);
  }
  50% {
    transform: scale3d(1.2, 1.2, 1) rotate(5deg);
  }
}

/* Ultra feature card */
.glass-feature-card {
  position: relative;
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(68, 68, 255, 0.2) 0%,
    rgba(0, 255, 136, 0.2) 100%
  );
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s ease-out;
  transform-style: preserve-3d;
  cursor: pointer;
}

.glass-feature-card:hover {
  background: linear-gradient(
    135deg,
    rgba(68, 68, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.08) 100%
  );
}

.glass-feature-inner {
  position: relative;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(15px) saturate(170%);
  -webkit-backdrop-filter: blur(15px) saturate(170%);
  border-radius: 23px;
  padding: 3rem 2rem;
  text-align: center;
  overflow: hidden;
}

.glass-feature-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
}

.glass-feature-number {
  font-size: 5rem;
  font-weight: 900;
  font-family: "JetBrains Mono", monospace;
  margin-bottom: 1.5rem;
  background: linear-gradient(
    135deg,
    #4444ff 0%,
    #00ff88 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 30px currentColor);
  animation: numberPulse 3s ease-in-out infinite;
  position: relative;
  display: inline-block;
}

.glass-feature-number::before {
  content: attr(data-number);
  position: absolute;
  left: 0;
  top: 0;
  z-index: var(--z-decorative);
  background: linear-gradient(135deg, #4444ff 0%, #00ff88 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: blur(20px);
  opacity: 0.5;
}

@keyframes numberPulse {
  0%, 100% {
    filter: drop-shadow(0 0 20px currentColor);
  }
  50% {
    filter: drop-shadow(0 0 40px currentColor);
  }
}

.glass-feature-card:hover .glass-feature-number {
  animation: numberFloat 1s ease-in-out;
}

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

.glass-feature-title {
  position: relative;
  z-index: var(--z-elevated);
  transition: color 0.3s ease;
}

.glass-feature-card:hover .glass-feature-title {
  color: var(--brand-accent);
}

.glass-feature-text {
  position: relative;
  z-index: var(--z-elevated);
  line-height: 1.8;
}

.glass-feature-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(34, 211, 238, 0.1) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  filter: blur(20px);
}

.glass-feature-card:hover .glass-feature-glow {
  opacity: 0.6;
  animation: featureGlow 2s ease-in-out infinite;
}

@keyframes featureGlow {
  0%, 100% {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}

/* 光の粒子エフェクト */
.glass-particle-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-parallax);
  overflow: hidden;
}

/* モバイルレスポンシブ */
@media (max-width: 768px) {
  .glass-feature-card {
    margin-bottom: 1rem;
  }

  .glass-feature-inner {
    padding: 2rem 1.5rem;
  }

  .glass-feature-number {
    font-size: 3rem;
    margin-bottom: 1rem;
  }

  .glass-heading-text {
    font-size: 3rem;
  }
}

/* =========== 追加のガラスコンポーネント =========== */

/* ヒーローセクション */
.glass-hero-badge {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 0.5rem 1.5rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.glass-hero-status {
  width: 8px;
  height: 8px;
  background: var(--glow-cyan);
  border-radius: 50%;
  display: inline-block;
  animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
  50% {
    opacity: 0.6;
    transform: scale3d(1.2, 1.2, 1);
  }
}

.glass-hero-name {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 800;
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    var(--glow-cyan) 50%,
    var(--glow-violet) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 40px rgba(34, 211, 238, 0.3));
}

/* ソーシャルアイコン */
.glass-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-soft);
  transition: all 0.3s ease;
}

.glass-social-icon:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-base);
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 8px 24px rgba(34, 211, 238, 0.15);
}

/* Ultra primary button */
.glass-button-primary {
  background: linear-gradient(
    135deg,
    rgba(68, 68, 255, 0.1) 0%,
    rgba(0, 255, 136, 0.1) 100%
  );
  border: 1px solid transparent;
  background-clip: padding-box;
  position: relative;
}

.glass-button-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, #4444ff, #00ff88);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.glass-button-primary:hover {
  background: linear-gradient(
    135deg,
    rgba(68, 68, 255, 0.2) 0%,
    rgba(0, 255, 136, 0.2) 100%
  );
  transform: translate3d(0, -2px, 0) scale(1.02);
  box-shadow:
    0 20px 40px rgba(0, 255, 136, 0.3),
    0 0 60px rgba(68, 68, 255, 0.2);
}

/* セカンダリボタン */
.glass-button-secondary {
  background: rgba(255, 255, 255, 0.02);
}

.glass-button-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* FPS表示 */
#fpsDisplay {
  cursor: default;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  user-select: none;
}

#fpsDisplay:hover {
  transform: none;
  box-shadow:
    0 8px 24px rgba(34, 211, 238, 0.2),
    0 0 60px rgba(167, 139, 250, 0.15);
}

#fpsDisplay .glass-button-icon {
  color: rgba(255, 255, 255, 0.9);
}

#fpsDisplay .glass-button-text {
  min-width: 3.5rem;
  text-align: center;
}

#fpsValue {
  display: inline-block;
  min-width: 2rem;
  text-align: right;
  font-weight: 700;
  color: #00ff88;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

/* スキルカテゴリー */
.glass-skill-category {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 2rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.1s ease-out;
  transform-style: preserve-3d;
}

.glass-skill-category:hover {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.glass-skill-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--text-base);
}

.glass-skill-item {
  margin-bottom: 0.5rem;
}

.glass-skill-name {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  color: var(--text-soft);
}

.glass-skill-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.glass-skill-progress {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--glow-cyan) 0%,
    var(--glow-violet) 100%
  );
  border-radius: 2px;
  position: relative;
  animation: skillProgress 1.5s ease-out;
}

@keyframes skillProgress {
  from {
    width: 0;
  }
}

/* プロジェクトカード */
.glass-project-card {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  overflow: hidden;
  transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s ease-out;
  transform-style: preserve-3d;
}

.glass-project-card:hover {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.glass-project-image {
  position: relative;
  height: 200px;
  background: rgba(17, 24, 39, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.glass-project-overlay {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: var(--z-elevated);
}

.glass-project-badge {
  background: rgba(34, 211, 238, 0.2);
  border: 1px solid rgba(34, 211, 238, 0.3);
  color: var(--glow-cyan);
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.glass-project-placeholder {
  opacity: 0.3;
}

.glass-project-content {
  padding: 1.5rem;
}

.glass-project-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.glass-tech-tag {
  background: rgba(255, 255, 255, 0.05);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  color: var(--text-soft);
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 8px;
}

/* 統計カード */
.glass-stat-card {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 3rem 2rem;
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.1s ease-out;
  transform-style: preserve-3d;
  white-space: nowrap;
}

.glass-stat-number {
  font-size: 3.5rem;
  font-weight: 800;
  font-family: "JetBrains Mono", monospace;
  background: linear-gradient(
    135deg,
    var(--glow-cyan) 0%,
    var(--glow-violet) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

.glass-stat-suffix {
  font-size: 2rem;
  font-weight: 600;
  color: var(--text-soft);
  display: inline-block;
  margin-left: 0.25rem;
}

.glass-stat-label {
  font-size: 0.875rem;
  color: var(--text-soft);
  margin-top: 0.5rem;
}

.glass-stat-glow {
  position: absolute;
  inset: -50%;
  background: radial-gradient(
    circle at center,
    rgba(34, 211, 238, 0.1) 0%,
    transparent 70%
  );
  opacity: 0;
  animation: statGlow 3s ease-in-out infinite;
}

@keyframes statGlow {
  0%, 100% {
    opacity: 0;
    transform: scale3d(0.8, 0.8, 1);
  }
  50% {
    opacity: 0.6;
    transform: scale3d(1.2, 1.2, 1);
  }
}

/* 推薦文カード */
.glass-testimonial-card {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 2rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.1s ease-out;
  transform-style: preserve-3d;
  min-height: 280px;
  display: flex;
  flex-direction: column;
}

.glass-testimonial-quote {
  position: absolute;
  top: 1rem;
  left: 1.5rem;
  font-size: 4rem;
  font-weight: 700;
  color: var(--glow-violet);
  opacity: 0.2;
  font-family: serif;
}

.glass-testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-testimonial-avatar {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ブログカード */
.glass-blog-card {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 2rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.1s ease-out;
  transform-style: preserve-3d;
  cursor: pointer;
}

.glass-blog-card:hover {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.glass-blog-date {
  font-size: 0.875rem;
  color: var(--glow-cyan);
  font-weight: 500;
  margin-bottom: 1rem;
}

.glass-blog-tag {
  background: rgba(255, 255, 255, 0.05);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  color: var(--text-soft);
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 8px;
  display: inline-block;
}

/* コンタクトフォーム */
.glass-contact-form {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  padding: 3rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.3),
    inset 0 0 60px rgba(167, 139, 250, 0.03);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.1s ease-out;
  transform-style: preserve-3d;
}

.glass-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  color: var(--text-base);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.glass-input:focus {
  outline: none;
  border-color: var(--glow-cyan);
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.2);
}

.glass-input::placeholder {
  color: var(--text-mute);
}

textarea.glass-input {
  resize: vertical;
  min-height: 120px;
}

/* クリックパーティクル */
.click-particle {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  z-index: var(--z-cursor);
  /* mix-blend-mode: screen; */ /* Performance optimization */
  filter: blur(1px);
  contain: layout style paint;
}

/* Scroll settings - 固定ヘッダー分のオフセットはここで一元管理 */
html {
  /* smooth は JS に統一 */
  scroll-padding-top: 48px; /* ヘッダーを8px下げ＋島に余白を持たせたため追従 */
}

/* スクロールスナップは無効化 */

/* アニメーション対象要素の初期状態 - フェードイン削除、常に表示 */
.hero-section,
.skills-section,
.projects-section,
.achievements-section,
.testimonials-section,
.blog-section,
.contact-section,
.skill-item,
.project-card,
.achievement-item,
.testimonial-card,
.blog-card {
  opacity: 1; /* 常に表示 */
  transform: translate3d(0, 0, 0); /* 移動なし */
  /* トランジションは削除 */
}

/* スクロール中の最適化 */
body.is-scrolling {
  pointer-events: none; /* スクロール中はポインターイベントを無効化 */
}

body.is-scrolling * {
  pointer-events: auto; /* 子要素は有効のまま */
}

/* スクロール中はカードのトランジションを高速化 */
body.is-scrolling .glass-project-card,
body.is-scrolling .glass-skill-category,
body.is-scrolling .glass-stat-card,
body.is-scrolling .glass-testimonial-card,
body.is-scrolling .glass-blog-card,
body.is-scrolling .glass-feature-card {
  transition: transform 0.05s linear !important; /* より高速なトランジション */
}

/* カードのバックフェイス非表示（ちらつき防止） */
.glass-project-card,
.glass-skill-category,
.glass-stat-card,
.glass-testimonial-card,
.glass-blog-card,
.glass-feature-card,
.glass-contact-form {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  opacity: 1 !important; /* 明示的に不透明度を設定 */
}

/* スクロールで表示された要素 - フェードイン関連のスタイルは削除済み */

/* スキルプログレスバーのトランジション */
.skill-progress {
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 3Dカードのホバー効果強化 */
.project-card {
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out;
}

/* カードの3D効果最適化 */
.glass-project-card,
.glass-skill-category,
.glass-stat-card,
.glass-testimonial-card,
.glass-blog-card,
.glass-feature-card {
  transition: transform 0.1s ease-out;
  transform-origin: center center;
  contain: layout style; /* レイアウト計算を最適化 */
}

/* パララックス要素のスムージング */
[data-parallax-depth] {
  transition: transform 0.1s linear;
  will-change: transform;
}
 
/* セクショントランジション */
section {
  position: relative;
  min-height: auto;
  padding: 5rem 0;
}

/* 固定ヘッダー分のオフセット（main先頭パディング） */
/* 固定ヘッダーが下がった分だけオフセットも増やす */
main {
  padding-top: 48px;
}

/* ヒーローセクションのみ最小高さ設定（モバイルのアドレスバー対策） */
.hero-section {
  min-height: 100svh; /* iOS Safariのアドレスバー変動に追従 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* フローティング要素の基本スタイル */
.floating-element {
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
  /* mix-blend-mode: screen; */ /* Performance optimization */
  pointer-events: none;
  contain: layout style paint;
  /* will-changeは削除してパフォーマンス向上 */
}

/* Dynamic header effects - transition は既にメインのスタイルで定義済み */

/* Header scroll effect - .header-islandに適用 */
.glass-header.scrolled .header-island {
  background: rgba(20, 24, 32, 0.44);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.48),
    0 0 24px rgba(0, 255, 136, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* スクロールインジケーター */
.scroll-indicator {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-modal);
  opacity: 0.9;
  transition: opacity 0.3s ease;
  animation: scrollBounce 2s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.08));
}

.scroll-indicator.hidden {
  opacity: 0;
}

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

/* カーソルグローの強化 */
.cursor-glow {
  /* mix-blend-mode: screen; */ /* Performance optimization */
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* パフォーマンス最適化 */
.parallax-bg-1,
.parallax-bg-2,
.parallax-bg-3 {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  contain: layout style paint;
}

/* GPUアクセラレーション */
.glass-morphism,
.glass-content-panel,
.glass-project-card,
.glass-skill-item,
.glass-testimonial-card,
.glass-blog-card {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}

/* Header island wrapper: 独立した浮遊感とセンタリング */
.header-island {
  max-width: min(1200px, 92vw);
  margin-inline: auto;
  /* 上下に空気層を作りフローティング表現 */
  border-radius: 16px;
  /* 左端の境界が目立つ環境があるため境界線は外す（影で輪郭を出す） */
  border: none;
  background: rgba(20, 24, 32, 0.22);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.36),
    0 0 24px rgba(0, 255, 136, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  margin-top: 0.5rem; /* ヘッダー内でさらに浮かせる */
  margin-bottom: 0.25rem;
  padding-inline: clamp(0.75rem, 2vw, 1rem);
  /* -webkit-mask-imageを削除 - 左右のぼかしの原因となっていた */
}

/* Safari専用の最適化 */
body.is-safari .glass-morphism,
body.is-safari .glass-header,
body.is-safari .glass-content-panel,
body.is-safari .glass-feature-card,
body.is-safari .glass-project-card,
body.is-safari .glass-skill-category,
body.is-safari .glass-stat-card,
body.is-safari .glass-testimonial-card,
body.is-safari .glass-blog-card,
body.is-safari .glass-contact-form {
  /* backdrop-filterを軽量化または無効化 */
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Safari iOS向けの最適化 */
@supports (-webkit-touch-callout: none) {
  /* iOS Safariでbackdrop-filterを完全に無効化 */
  .glass-morphism,
  .glass-content-panel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(20, 24, 32, 0.85) !important;
  }
}

/* Safariでのwill-change最適化 */
body.is-safari * {
  /* Safariではwill-changeを慎重に使用 */
  will-change: auto !important;
}

body.is-safari .glass-project-card:hover,
body.is-safari .glass-skill-category:hover,
body.is-safari .glass-feature-card:hover {
  will-change: transform !important;
}

/* Safariでのアニメーション簡略化 */
body.is-safari .floating-element {
  animation: none !important;
  transform: translateY(-10px);
}

body.is-safari .gradient-bg::before,
body.is-safari .gradient-bg::after,
body.is-safari .gradient-bg .orb-1,
body.is-safari .gradient-bg .orb-2,
body.is-safari .gradient-bg .orb-3,
body.is-safari .gradient-bg .orb-4,
body.is-safari .gradient-bg .orb-5,
body.is-safari .gradient-bg .orb-6 {
  animation-duration: 40s !important; /* アニメーションを遅く */
  filter: blur(60px) !important; /* blurを軽く */
}

/* Safari向けの3D transform最適化 */
body.is-safari .glass-project-card,
body.is-safari .glass-skill-category,
body.is-safari .glass-stat-card,
body.is-safari .glass-testimonial-card,
body.is-safari .glass-blog-card,
body.is-safari .glass-feature-card {
  transform: translateZ(0) !important; /* 初期状態を簡略化 */
  transform-style: flat !important; /* preserve-3dを無効化 */
}

/* Reduce Motion Support - アクセシビリティ向上とパフォーマンス最適化 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .gradient-bg::before,
  .gradient-bg::after,
  .gradient-bg .orb-1,
  .gradient-bg .orb-2,
  .gradient-bg .orb-3,
  .gradient-bg .orb-4,
  .gradient-bg .orb-5,
  .gradient-bg .orb-6,
  .floating-element,
  .glass-particle,
  .click-particle {
    animation: none !important;
  }
  
  .parallax-bg-1,
  .parallax-bg-2,
  .parallax-bg-3 {
    transform: none !important;
  }
  
  /* カーソルグローを無効化 */
  .cursor-glow {
    display: none !important;
  }
  
  /* スキルバーのアニメーションを即座に完了 */
  .glass-skill-progress {
    transition: none !important;
  }
  
  /* ホバー効果を簡略化 */
  .glass-project-card:hover,
  .glass-skill-category:hover,
  .glass-stat-card:hover,
  .glass-testimonial-card:hover,
  .glass-blog-card:hover,
  .glass-feature-card:hover {
    transform: none !important;
  }
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
  /* モバイルではパララックス背景を非表示に */
  .parallax-bg-1,
  .parallax-bg-2,
  .parallax-bg-3 {
    display: none !important;
  }

  .floating-element {
    animation: none;
  }
  
  /* モバイルでは重いエフェクトを簡略化 */
  .glass-morphism {
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
  }
  
  .glass-skill-progress {
    transition: width 0.8s ease !important;
  }
  
  /* アニメーション対象要素の初期状態 - フェードイン削除、常に表示 */
  .hero-section,
  .skills-section,
  .projects-section,
  .achievements-section,
  .testimonials-section,
  .blog-section,
  .contact-section,
  .skill-item,
  .project-card,
  .achievement-item,
  .testimonial-card,
  .blog-card {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .glass-header {
    top: 6px; /* モバイルは少し控えめ */
    width: min(100%, calc(100vw - 16px)); /* モバイルでは左右に余白を確保 */
    /* left, right, margin は既に親で定義済み */
  }

  .header-island {
    border-radius: 14px;
    margin-top: 0.5rem;
    padding-inline: 0.75rem;
  }

  main {
    padding-top: 56px;
  } /* モバイルはナビ高さが増えやすい */
  html {
    scroll-padding-top: 56px;
  }
}

/* =========== ドットナビゲーション =========== */

/* ドットナビゲーションコンテナ - 横幅を狭く */
.glass-dot-nav-container {
  padding: 1.5rem 0.5rem;
  border-radius: 24px;
  position: relative;
  background: rgba(20, 24, 32, 0.35);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow:
    0 15px 30px rgba(0, 0, 0, 0.25),
    0 0 40px rgba(34, 211, 238, 0.03),
    inset 0 0 20px rgba(167, 139, 250, 0.015);
  min-height: 400px; /* 最小高さを設定 */
  height: 60vh; /* ビューポートの60%の高さ */
  max-height: 500px; /* 最大高さを制限 */
}

/* 背景のライン */
.glass-dot-line {
  position: absolute;
  left: 50%;
  top: calc(1.5rem + 7px); /* 上部のドットの中心 */
  bottom: calc(1.5rem + 7px); /* 下部のドットの中心 */
  width: 2px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 2%,
    rgba(255, 255, 255, 0.15) 98%,
    transparent 100%
  );
  transform: translateX(-50%);
  pointer-events: none;
}

/* 進行状況を示すライン */
.glass-dot-progress-line {
  position: absolute;
  left: 50%;
  top: calc(1.5rem + 7px); /* 上部のドットの中心 */
  width: 3px;
  height: 0%;
  max-height: calc(100% - 3rem - 14px); /* 上下のドット分を除外 */
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.8) 100%
  );
  transform: translateX(-50%);
  pointer-events: none;
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  filter: blur(0.5px);
  box-shadow: 
    0 0 20px rgba(255, 255, 255, 0.8),
    0 0 40px rgba(255, 255, 255, 0.5),
    0 0 60px rgba(255, 255, 255, 0.3);
  animation: lineGlow 2s ease-in-out infinite;
}

@keyframes lineGlow {
  0%, 100% {
    opacity: 0.9;
    filter: blur(0.5px);
    box-shadow: 
      0 0 20px rgba(255, 255, 255, 0.8),
      0 0 40px rgba(255, 255, 255, 0.5),
      0 0 60px rgba(255, 255, 255, 0.3);
  }
  50% {
    opacity: 1;
    filter: blur(1px);
    box-shadow: 
      0 0 30px rgba(255, 255, 255, 1),
      0 0 50px rgba(255, 255, 255, 0.7),
      0 0 80px rgba(255, 255, 255, 0.4);
  }
}

/* ドットラッパー */
.glass-dot-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 上下のドットを両端に配置 */
  height: 100%;
  position: relative;
  z-index: var(--z-elevated);
}

/* ドットアイテム - サイズを縮小 */
.glass-dot-item {
  position: relative;
  display: none; /* デフォルトは非表示 */
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 最初と最後のドットアイテムのみ表示 */
.glass-dot-item:first-child,
.glass-dot-item:last-child {
  display: flex;
}

.glass-dot-item:hover {
  transform: scale(1.2);
}

/* ドット本体 - デフォルトは非表示 */
.glass-dot {
  display: none;
}

/* 最初と最後のドットのみ表示 */
.glass-dot-item:first-child .glass-dot,
.glass-dot-item:last-child .glass-dot {
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: var(--z-elevated);
}

/* 最初と最後のドットのホバー効果 */
.glass-dot-item:first-child:hover .glass-dot,
.glass-dot-item:last-child:hover .glass-dot {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 1);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
}

/* 最初と最後のドットのアクティブ状態 */
.glass-dot-item:first-child.active .glass-dot,
.glass-dot-item:last-child.active .glass-dot {
  width: 14px;
  height: 14px;
  background: #ffffff;
  border-color: rgba(255, 255, 255, 1);
  box-shadow:
    0 0 20px rgba(255, 255, 255, 1),
    0 0 35px rgba(255, 255, 255, 0.7);
}




/* グロー効果 - デフォルトは非表示 */
.glass-dot-glow {
  display: none;
}

/* 最初と最後のドットのグロー効果 */
.glass-dot-item:first-child .glass-dot-glow,
.glass-dot-item:last-child .glass-dot-glow {
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.3) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  filter: blur(6px);
}

.glass-dot-item:first-child:hover .glass-dot-glow,
.glass-dot-item:last-child:hover .glass-dot-glow {
  opacity: 0.6;
}

.glass-dot-item:first-child.active .glass-dot-glow,
.glass-dot-item:last-child.active .glass-dot-glow {
  opacity: 1;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 70%
  );
}




/* ツールチップ */
.glass-dot-tooltip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(20, 24, 32, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.9);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ツールチップの矢印 */
.glass-dot-tooltip::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: rgba(20, 24, 32, 0.9);
}

.glass-dot-item:hover .glass-dot-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(-6px);
}

/* アクティブ時のツールチップ */
.glass-dot-item.active .glass-dot-tooltip {
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* レスポンシブ - タブレット以下で非表示 */
@media (max-width: 1024px) {
  #dotNavigation {
    display: none !important;
  }
}

/* モバイルでFPS表示とトップへスクロールボタンのサイズを調整 */
@media (max-width: 768px) {
  /* FPS表示のサイズを20%縮小 */
  #fpsDisplay {
    padding: 0.6rem 1rem; /* 0.75rem * 0.8 = 0.6rem, 1.25rem * 0.8 = 1rem */
    font-size: 0.7rem; /* 0.875rem * 0.8 = 0.7rem */
  }
  
  #fpsDisplay .glass-button-icon svg {
    width: 13px; /* 16px * 0.8 = 12.8px ≈ 13px */
    height: 13px;
  }
  
  #fpsDisplay .glass-button-text {
    min-width: 2.8rem; /* 3.5rem * 0.8 = 2.8rem */
  }
  
  #fpsValue {
    min-width: 1.6rem; /* 2rem * 0.8 = 1.6rem */
    font-size: 0.7rem;
  }
  
  /* トップへスクロールボタンのサイズを20%縮小 */
  #scrollToTop {
    padding: 0.8rem 1.6rem; /* 1rem * 0.8 = 0.8rem, 2rem * 0.8 = 1.6rem */
  }
  
  #scrollToTop .glass-button-icon svg {
    width: 13px; /* 16px * 0.8 = 12.8px ≈ 13px */
    height: 13px;
  }
  
  #scrollToTop .glass-button-text {
    font-size: 0.6rem; /* 0.75rem * 0.8 = 0.6rem */
  }
  
  /* ボタンの位置も少し調整（画面端からの距離を縮小） */
  .fixed.bottom-6.left-6 {
    bottom: 1.2rem; /* 1.5rem * 0.8 = 1.2rem */
    left: 1.2rem;
  }
  
  .fixed.bottom-6.right-6 {
    bottom: 1.2rem;
    right: 1.2rem;
  }
}