/*
Theme Name: Lightning Child
Template: lightning
*/

/* 粒子背景レイヤーの設定 */
#particles-js {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  background: transparent;
  pointer-events: none;
  will-change: transform, opacity;
}

#particles-js canvas {
  opacity: 1 !important;
}

/* 全体を上に表示させる */
body, html {
  background: transparent !important;
  overflow: visible !important;
  position: relative;
  z-index: 1;
}

/* Mainエリア */
main,
.site-content,
.wp-site-blocks {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

/* Lightningの各エリアも透明化 */
.vk-blocks,
.container,
.page-header,
.site-footer {
  background: transparent !important;
  position: relative;
  z-index: 1;
  overflow: visible !important;
}

/* 擬似要素を無効化 */
.vk-blocks::before,
.page-header::before,
.site-footer::before {
  background: transparent !important;
  display: none !important;
}

/*============================
  ホバーアニメーション（任意制御用）
============================*/
.hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover:hover {
  transform: translateY(-5px) scale(1.03); /* ← 上に5px＋拡大 */
  box-shadow: 0 8px 20px rgba(0, 255, 204, 0.3);
}

/* fade-in + hover 両方に対応する場合のみ */
.fade-in.hover:hover {
  transform: translateY(-5px) scale(1.03); /* ← 同様に追加 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 8px 20px rgba(0, 255, 204, 0.3);
}

/*============================
  アンダーライン（任意制御用）
============================*/
.underline {
  position: relative;
  text-decoration: none;
  color: inherit;
  opacity: 0;
  animation: fadeIn 1s ease 0.5s forwards;
}

.underline::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px; /* ← 太めにして目立たせる */
  width: 100%;
  background: linear-gradient(90deg, #ffffff, #00e5ff, #61c2ff, #00e5ff, #ffffff);
  background-size: 300% auto;
  animation: glowline 2s linear infinite;
  border-radius: 2px; /* 丸みで自然に */
}

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

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}