/*
  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;
 
}

.rainbow-frame {
    position: relative;
    display: inline-block;
    padding: 10px 25px;
    z-index: 1;
    border-radius: 50px;
    color: #333;
    text-decoration: none;
    /* 背景を透明にして、擬似要素の白板を見せる */
    background: transparent;
    /* ホバー時の文字色変化（必要に応じて） */
    transition: color 0.3s;
}

/* 1層目：虹色の土台（アニメーションする） */
.rainbow-frame::before {
    content: '';
    position: absolute;
    /* 白い板より少しだけ大きく（0pxにすると隠れる） */
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -2;
    background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff);
    border-radius: 50px;
    
    /* 初期状態：下側に隠す */
    clip-path: inset(100% 0 0 0); 
    transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2層目：前面の白い板（アニメーションせず固定） */
.rainbow-frame::after {
    content: '';
    position: absolute;
    /* 虹色の線を出したい太さ分だけ内側に入れる（例: 2px） */
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    z-index: -1;
    background: #fff;
    border-radius: 48px;
    /* アニメーション関連を削除し、常時表示（clip-pathなし） */
}

/* ホバー時：虹色の板だけをせり上げさせる */
.rainbow-frame:hover::before {
    clip-path: inset(0 0 0 0);
}

.rainbow-frame:hover {
    /* 虹に合わせて文字色も少しおしゃれにするなら */
    color: #000;
}