/*
  Skin Name: おしゃれでかっこいいスキン
  Description: スキン自作の際にひな型となるスキンです。スタイルは何も入っていません。
  Skin URI: https://wp-cocoon.com/
  Author: iwaki-3D
  Author URI: https://nelog.jp/
  Screenshot URI: https://iwaki-3d.com/wp-content/uploads/2026/02/初めての３D完成品.jpg
  Version: 1.0.2
  Priority: 9999000000
*/
/*以下にスタイルシートを記入してください*/

.header-container {
  
  /* 虹色グラデーション */
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  background-size: 400% 400%;
  animation: rainbowAnimation 8s ease infinite;
}

@keyframes rainbowAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 文字を読みやすくするための装飾 */
.site-name-text { font-weight: 900; font-size: 2rem; letter-spacing: 2px; }
nav a { color: white; text-decoration: none; margin-left: 20px; font-weight: bold; }

/* ★光専用のレイヤー */
.header-container::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  /* JSから渡される座標を使う */
  background: radial-gradient(circle 150px at var(--mouse-x, -1000px) var(--mouse-y, -1000px), rgba(255, 255, 255, 0.6), transparent);
  pointer-events: none; /* マウスイベントを邪魔しない */
  z-index: 1;
}

/* 文字が光の下に隠れないように */
.site-name-text, nav {
  position: relative;
  z-index: 2;
  color: white; /* 文字色 */

  /* 1. text-strokeを使用する場合 */
	/*
  -webkit-text-stroke: 2px black; 縁取りの太さと色 
  text-stroke: 2px black;          標準 (まだ完全ではない) 
*/
  /* 2. text-shadowで代用する場合 */

  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
 
}