/*
 * style.css - サイト全体のメインスタイル（レイアウト、カラー、タイポグラフィ）
 *
 * CSS変数（カスタムプロパティ）でカラーやサイズを一元管理する。
 * 変更したい時は :root の値を変えるだけで全体に反映される。
 */

/* ============================================
   CSS変数（デザイントークン）
   :root はHTMLのルート要素を指す。ここで定義した変数はサイト全体で使える。
   変数名は --プレフィックス-名前 の形式。
   使う時は var(--変数名) と書く。
   ============================================ */
:root {
  /* --- カラーパレット --- */
  --color-bg-primary: #0a0a0f;        /* メイン背景: ほぼ黒に近い深いダーク */
  --color-bg-secondary: #12121a;      /* セクション背景: 少しだけ明るいダーク */
  --color-text-primary: #e8e8e8;      /* メインテキスト: 明るいグレー（真っ白だと目が疲れる） */
  --color-text-secondary: #8888a0;    /* 補助テキスト: 控えめなグレー */
  --color-accent-cyan: #00e5ff;       /* アクセント1: シアン（目を引く水色） */
  --color-accent-purple: #b366ff;     /* アクセント2: パープル（シアンとの組み合わせでサイバー感） */
  --color-accent-gradient: linear-gradient(135deg, #00e5ff, #b366ff);  /* グラデーション */

  /* --- タイポグラフィ --- */
  --font-family-main: 'Inter', 'Noto Sans JP', sans-serif;  /* 本文用フォント */
  --font-family-heading: 'Space Grotesk', 'Inter', sans-serif;  /* 見出し用フォント */
  --font-size-hero-name: clamp(2.5rem, 6vw, 5rem);  /* Hero名前: 画面幅に応じて自動調整 */
  --font-size-hero-title: clamp(1.2rem, 3vw, 2rem); /* Hero肩書き */
  --font-size-section-heading: clamp(2rem, 4vw, 3rem);  /* セクション見出し */
  --font-size-body: 1rem;             /* 本文 */

  /* --- スペーシング --- */
  --section-padding: clamp(4rem, 10vh, 8rem) clamp(1.5rem, 5vw, 4rem);  /* セクション内余白 */
}

/*
 * Google Fonts の読み込みは index.html の <link> タグで行っている。
 * <link> タグの方が @import より高速（並列読み込みが可能なため）。
 * さらに preconnect でフォントサーバーへの接続を事前に確立している。
 */

/* ============================================
   ベーススタイル
   ============================================ */
body {
  font-family: var(--font-family-main);
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  cursor: none;  /* デフォルトカーソルを非表示（カスタムカーソルに置き換え） */
}

/* ============================================
   カスタムカーソル
   デフォルトのマウスカーソルを消して、独自のカーソルを表示する。
   2つの円で構成:
   - cursor-dot: 小さい円（マウスにぴったり追従）
   - cursor-outline: 大きい円（少し遅れて追従 = 慣性感）
   ============================================ */

/* 共通: 画面上の固定位置に配置、マウスイベントを透過 */
.cursor-dot,
.cursor-outline {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  /* pointer-events: none でこの要素自体がクリックを妨げないようにする */
  pointer-events: none;
  /* 最前面に表示（他のどの要素より手前） */
  z-index: 9999;
  /* transform で位置を制御するのでGPUアクセラレーションを有効化 */
  will-change: transform;
}

/* 内側の小さな円: マウス位置の中心を示す */
.cursor-dot {
  width: 6px;
  height: 6px;
  background-color: var(--color-accent-cyan);
  /* ホバー時のサイズ変化を滑らかにする */
  transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease;
}

/* 外側の大きな円: マウスに遅れて追従する */
.cursor-outline {
  width: 36px;
  height: 36px;
  border: 2px solid rgba(0, 229, 255, 0.5);
  /* ホバー時のサイズ・色変化を滑らかにする */
  transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

/* リンクやボタンにホバーした時: カーソルが大きくなる */
.cursor-hover .cursor-dot {
  width: 10px;
  height: 10px;
  background-color: var(--color-accent-purple);
}

.cursor-hover .cursor-outline {
  width: 50px;
  height: 50px;
  border-color: rgba(179, 102, 255, 0.5);
  background-color: rgba(179, 102, 255, 0.08);
}

/* 各セクション共通: フルスクリーン表示 + 中央寄せ */
section {
  min-height: 100vh;
  padding: var(--section-padding);
  position: relative;
  overflow: hidden;
  /* マウス座標のCSS変数（JSから動的に設定される） */
  --mouse-x: -9999px;
  --mouse-y: -9999px;
}

/*
 * マウス追従グラデーション背景
 *
 * ::after 疑似要素でセクション全体に透明なレイヤーを重ね、
 * マウス位置を中心としたradial-gradient（円形グラデーション）を描画する。
 * JSがCSS変数 --mouse-x, --mouse-y を更新するとグローが動く。
 *
 * --mouse-x: -9999px のとき（マウスがセクション外）はグローが画面外に飛ぶので見えない。
 */
section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* radial-gradient: 中心から外側に向かって色が変化する円形グラデーション */
  /* circle 300px: 半径300pxの円形 */
  /* at var(--mouse-x) var(--mouse-y): マウス位置を中心に */
  background: radial-gradient(
    circle 300px at var(--mouse-x) var(--mouse-y),
    rgba(0, 229, 255, 0.06),   /* 中心: 薄いシアン */
    transparent                 /* 外側: 完全に透明 */
  );
  pointer-events: none;  /* クリックを透過 */
  z-index: 0;            /* コンテンツより背面 */
}

/* セクション見出し共通スタイル */
.section-heading {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-section-heading);
  font-weight: 700;
  margin-bottom: 3rem;
  background: var(--color-accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* ::afterのグローより前面に表示 */
  position: relative;
  z-index: 1;
}

/* セクション内の主要コンテンツコンテナを ::after より前面に配置 */
.about-content,
.skills-grid,
.contact-links {
  position: relative;
  z-index: 1;
}

/* ============================================
   Hero セクション
   ============================================ */
#hero {
  display: flex;
  align-items: center;        /* 縦方向の中央揃え */
  justify-content: center;    /* 横方向の中央揃え */
  background-color: var(--color-bg-primary);
}

/* パーティクル用Canvas: セクション全体に重ねて表示 */
#particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;                /* 背面に配置 */
}

/* Heroのコンテンツ: Canvasより前面に表示 */
.hero-content {
  position: relative;
  z-index: 1;                /* Canvasの前面 */
  text-align: center;
}

/* ロゴ画像 */
.hero-logo {
  width: clamp(120px, 20vw, 200px);
  height: auto;
  margin: 0 auto 2rem;
  /* ダーク背景でロゴを見やすくするための反転フィルタ + ほんのりドロップシャドウ */
  filter: invert(1) drop-shadow(0 0 15px rgba(0, 229, 255, 0.3));
  animation: fade-in-up 1s ease-out;
}

/* 名前: 大きく太く + ネオングロー */
.hero-name {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-hero-name);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-text-primary);
  /* text-shadow: ネオンのように文字の周りに光の層を重ねる */
  /* 複数のshadowをカンマ区切りで重ね、ぼかし半径を段階的に広げて光の拡散を表現 */
  text-shadow:
    0 0 10px rgba(0, 229, 255, 0.3),   /* 近い光（シアン、薄め） */
    0 0 40px rgba(0, 229, 255, 0.1);   /* 遠い光（シアン、さらに薄め） */
  /* フェードインしながら少し上に浮き上がるアニメーション（animations.cssで定義） */
  animation: fade-in-up 1s ease-out;
}

/* 肩書き（タイピングアニメーション対象） */
.hero-title {
  font-size: var(--font-size-hero-title);
  color: var(--color-accent-cyan);
  min-height: 2em;
  margin-top: 0.5rem;
  /* ネオングロー: 名前より控えめな発光 */
  text-shadow: 0 0 20px rgba(0, 229, 255, 0.4);
}

/* タイピングカーソル: 点滅する縦棒 */
.typing-cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  background-color: var(--color-accent-cyan);
  margin-left: 4px;
  vertical-align: text-bottom;
  /* 点滅アニメーション（animations.cssで定義） */
  animation: blink-cursor 0.8s step-end infinite;
}

/* キャッチコピー */
.hero-catchcopy {
  font-size: 1.1rem;
  color: var(--color-text-secondary);
  margin-top: 1.5rem;
  letter-spacing: 0.1em;
  animation: fade-in-up 1s ease-out 0.5s both;  /* 0.5秒遅れてフェードイン */
}

/* ============================================
   About セクション
   ============================================ */
#about {
  display: flex;
  flex-direction: column;     /* 縦方向に積む */
  justify-content: center;
  background-color: var(--color-bg-secondary);
}

.about-content {
  max-width: 700px;
  font-size: 1.1rem;
  color: var(--color-text-secondary);
  line-height: 1.8;
}

/* About内の段落間にスペースを空ける（最後の段落には付けない） */
.about-content p + p {
  margin-top: 1.5rem;
}

/* ============================================
   Skills セクション
   ============================================ */
#skills {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--color-bg-primary);
}

/* スキルカードのグリッドレイアウト */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
  max-width: 1100px;  /* カードが横に広がりすぎないよう制限 */
}

/*
 * スキルカード: グラスモーフィズムスタイル
 *
 * グラスモーフィズムとは:
 * すりガラス風のデザイン手法。半透明の背景 + ぼかし(blur) + 薄いボーダーで
 * 「ガラスの板越しに背景が透けて見える」ような見た目を作る。
 */
.skill-card {
  /* 半透明の白背景（rgba の最後の数値 0.05 が透明度） */
  background: rgba(255, 255, 255, 0.05);
  /* すりガラス効果: カードの背景にある要素を10pxぼかす */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);  /* Safari対応 */
  /* 薄い白のボーダーでカードの輪郭を出す */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;       /* 角を丸くする */
  padding: 2rem;
  /* ホバー時のトランジション（滑らかな変化） */
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/*
 * スキルカード ホバーエフェクト
 *
 * マウスを乗せた時に:
 * 1. カードが少し浮き上がる（translateY）
 * 2. シアン色のグロー（光の影）が出る（box-shadow）
 * 3. ボーダーがシアンに光る（border-color）
 */
.skill-card:hover {
  transform: translateY(-8px);  /* 8px上に浮き上がる */
  /* box-shadowを重ねてネオングロー風の光を作る */
  box-shadow:
    0 10px 40px rgba(0, 229, 255, 0.15),   /* 広く薄い影（ふんわり光る） */
    0 0 15px rgba(0, 229, 255, 0.1);        /* カード周囲の近い光 */
  border-color: rgba(0, 229, 255, 0.3);     /* ボーダーもシアンに */
}

/* ホバー時にリストのドットも少し光らせる */
.skill-card:hover .skill-card-list li::before {
  /* box-shadowでドットの周りにも小さなグロー */
  box-shadow: 0 0 6px rgba(0, 229, 255, 0.6);
}

/* スキルカードのタイトル */
.skill-card-title {
  font-family: var(--font-family-heading);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  /* タイトルにグラデーション文字を適用 */
  background: var(--color-accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* スキルカードのリスト */
.skill-card-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;               /* 各項目間のスペース */
}

.skill-card-list li {
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  /* 各項目の左にシアンのドットを付ける */
  padding-left: 1rem;
  position: relative;
}

/* リスト項目の左のドット（疑似要素で作成） */
.skill-card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);  /* 縦方向の中央に配置 */
  width: 5px;
  height: 5px;
  border-radius: 50%;           /* 正円にする */
  background-color: var(--color-accent-cyan);
}

/* ============================================
   Contact セクション
   ============================================ */
#contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--color-bg-secondary);
}

.contact-links {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

/*
 * 連絡先リンクアイテム
 *
 * アイコン + テキストを縦に積んだカード風のリンク。
 * ホバーでシアンに光り、少し浮き上がる。
 */
.contact-link-item {
  display: flex;
  flex-direction: column;     /* アイコンとテキストを縦に積む */
  align-items: center;
  gap: 0.8rem;
  padding: 2rem 2.5rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text-secondary);
  transition: transform 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-link-item:hover {
  transform: translateY(-5px);
  color: var(--color-accent-cyan);
  border-color: rgba(0, 229, 255, 0.3);
  box-shadow: 0 8px 30px rgba(0, 229, 255, 0.15);
}

/* SVGアイコンのサイズ */
.contact-icon {
  width: 32px;
  height: 32px;
}

/* リンクテキスト */
.contact-link-item span {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ============================================
   スクロール進捗バー
   ページ最上部に固定表示される細いバー。
   スクロール量に応じて左から右に伸びる。
   ============================================ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;  /* JSで動的に更新 */
  background: var(--color-accent-gradient);
  z-index: 9998;  /* カーソルの直下 */
  transition: width 0.1s linear;
}

/* ============================================
   トップに戻るボタン
   画面右下に固定表示。スクロールが進むと表示される。
   ============================================ */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(10, 10, 15, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--color-accent-cyan);
  cursor: none;               /* カスタムカーソルを使っているため */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  /* 初期状態: 非表示（下に隠れている） */
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;       /* 非表示時はクリック不可 */
  transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* JSから .is-visible が付与されると表示 */
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;       /* クリック可能に */
}

.back-to-top:hover {
  border-color: rgba(0, 229, 255, 0.4);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.2);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

/* ============================================
   レスポンシブ対応
   ============================================ */

/*
 * タッチデバイス向け:
 * hover: none = マウスホバーが使えないデバイス（スマホ・タブレット）
 * pointer: coarse = 指での操作（精密なマウスポインタではない）
 *
 * カスタムカーソルはマウス前提の機能なので、
 * タッチデバイスでは非表示にし、デフォルトカーソルに戻す。
 */
@media (hover: none) and (pointer: coarse) {
  body {
    cursor: auto;
  }

  .cursor-dot,
  .cursor-outline {
    display: none;
  }

  .back-to-top {
    cursor: pointer;
  }
}

/*
 * タブレット以下（768px以下）
 *
 * - セクションの最小高さを auto にして、コンテンツ量に応じた高さにする
 * - 余白を詰めてモバイル画面を有効活用
 * - スキルカードの最小幅を下げて1カラム表示に対応
 * - コンタクトリンクを縦並びに変更
 */
@media (max-width: 768px) {
  /* セクション:
     min-height: 100vh だとモバイルのアドレスバーで見切れる問題が起きるため、
     Heroだけ画面いっぱい、他のセクションは auto にする */
  section {
    min-height: auto;
    padding: 4rem 1.5rem;
  }

  /* Heroセクションだけはフルスクリーン維持
     100svh = Small Viewport Height: アドレスバーが表示されている時の高さ
     非対応ブラウザ用に 100vh をフォールバックとして先に書く */
  #hero {
    min-height: 100vh;
    min-height: 100svh;
  }

  /* セクション見出しの下余白を縮小 */
  .section-heading {
    margin-bottom: 2rem;
  }

  /* Heroのキャッチコピー */
  .hero-catchcopy {
    font-size: 0.95rem;
  }

  /* スキルグリッド:
     minmax(250px, ...) だと320px端末で1カラムに収まらない場合がある。
     200pxに下げて小さい画面でもグリッドが機能するようにする */
  .skills-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
  }

  /* スキルカードの内部余白を縮小 */
  .skill-card {
    padding: 1.5rem;
  }

  /* コンタクトリンク: 横並びから縦並びに変更 */
  .contact-links {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  /* コンタクトリンクのアイテム: 横幅を広げてタップしやすくする */
  .contact-link-item {
    flex-direction: row;
    width: 100%;
    max-width: 300px;
    padding: 1.2rem 1.5rem;
  }

  /* 戻るボタン: 少し小さく、画面端に寄せる */
  .back-to-top {
    bottom: 1rem;
    right: 1rem;
    width: 42px;
    height: 42px;
  }
}

/*
 * 小さいスマホ（480px以下）
 * さらに余白を詰める
 */
@media (max-width: 480px) {
  section {
    padding: 3rem 1rem;
  }

  /* スキルグリッドを完全に1カラムにする */
  .skills-grid {
    grid-template-columns: 1fr;
  }
}