/* =============================================
   WOW Effects for Lightning — wow-effects-lightning.css
   Lightning テーマの z-index・レイアウトに最適化
   ============================================= */

/* =============================================
   カーソル
   ============================================= */
#wowl-cursor {
  position: fixed;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999;          /* Lightning ヘッダー (#site-header z:100) より上 */
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, background 0.2s, box-shadow 0.2s;
  background:   var(--wowl-cursor, #0071ce);
  box-shadow: 0 0 18px 6px var(--wowl-cursor, #0071ce);
}

#wowl-cursor-ring {
  position: fixed;
  width: 40px;
  height: 40px;
  border: 1.5px solid rgba(0, 113, 206, 0.45);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999998;
  transform: translate(-50%, -50%);
  transition: width 0.25s, height 0.25s, border-color 0.2s;
}

.wowl-trail-dot {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999990;
  transform: translate(-50%, -50%);
  animation: wowlTrailFade 0.8s forwards;
}

@keyframes wowlTrailFade {
  0%   { opacity: 0.85; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0;    transform: translate(-50%,-50%) scale(0.1); }
}

/* =============================================
   パーティクルキャンバス
   Lightning の .l-content / .vk_pageHeader の下に配置
   ============================================= */
#wowl-particle-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;               /* コンテンツより下 */
  width: 100%;
  height: 100%;
}

/* =============================================
   スクロールアニメーション
   ============================================= */
.wow-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1),
              transform 0.85s cubic-bezier(0.16,1,0.3,1);
}

.wow-reveal.wow-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 遅延 */
.wow-reveal-delay-1 { transition-delay: 0.10s; }
.wow-reveal-delay-2 { transition-delay: 0.22s; }
.wow-reveal-delay-3 { transition-delay: 0.34s; }
.wow-reveal-delay-4 { transition-delay: 0.46s; }
.wow-reveal-delay-5 { transition-delay: 0.58s; }

/* Lightning カードへの自動スタガー
   JS が data-wowl-stagger="N" を付与 → CSSで遅延 */
[data-wowl-stagger="1"]  { transition-delay: 0.08s; }
[data-wowl-stagger="2"]  { transition-delay: 0.16s; }
[data-wowl-stagger="3"]  { transition-delay: 0.24s; }
[data-wowl-stagger="4"]  { transition-delay: 0.32s; }
[data-wowl-stagger="5"]  { transition-delay: 0.40s; }
[data-wowl-stagger="6"]  { transition-delay: 0.48s; }
[data-wowl-stagger="7"]  { transition-delay: 0.56s; }
[data-wowl-stagger="8"]  { transition-delay: 0.64s; }

/* =============================================
   クリック爆発パーティクル
   ============================================= */
.wowl-burst-particle {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999995;
  transform: translate(-50%, -50%);
  animation: wowlBurst var(--wowl-dur, 0.7s) cubic-bezier(0.2,0.8,0.4,1) forwards;
}

@keyframes wowlBurst {
  0%   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(
    calc(-50% + var(--wowl-tx, 0px)),
    calc(-50% + var(--wowl-ty, 0px))
  ) scale(0); }
}

.wowl-burst-ring {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999994;
  border: 2px solid rgba(255, 204, 0, 0.75);
  transform: translate(-50%, -50%);
  animation: wowlRingExpand 0.55s ease-out forwards;
}

@keyframes wowlRingExpand {
  0%   { width: 8px;   height: 8px;   opacity: 1; }
  100% { width: 180px; height: 180px; opacity: 0; }
}

.wowl-screen-flash {
  position: fixed;
  inset: 0;
  z-index: 999993;
  pointer-events: none;
  animation: wowlFlashOut 0.4s forwards;
}

@keyframes wowlFlashOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* =============================================
   Lightning ヘッダー・フッターとの干渉防止
   ============================================= */

/* Lightning の固定ヘッダー (.l-header--fixed, .vk-mobile-nav) の下にカーソルを重ねる必要はない
   → 念のためヘッダー要素には pointer-events を保持させる */
.l-header,
.vk-mobile-nav,
.site-header {
  position: relative;
  z-index: 100;   /* デフォルト値を明示 */
}

/* Lightning G3 の .vk_pageHeader は通常 z-index:1
   パーティクルが被らないよう position:relative を追加 */
.vk_pageHeader {
  position: relative;
  z-index: 1;
}

/* =============================================
   ショートコードボタン追加スタイル
   wow-explode クラスは Lightning の .btn に追記されるため
   既存デザインを壊さず光彩だけ上乗せ
   ============================================= */
.btn.wow-explode,
.vk_button-btn.wow-explode,
.wp-block-button__link.wow-explode {
  transition: transform 0.15s, box-shadow 0.2s;
}

.btn.wow-explode:hover,
.vk_button-btn.wow-explode:hover,
.wp-block-button__link.wow-explode:hover {
  transform: scale(1.04) translateY(-1px);
  box-shadow: 0 6px 24px rgba(0, 113, 206, 0.45) !important;
}

.btn.wow-explode:active,
.wp-block-button__link.wow-explode:active {
  transform: scale(0.97);
}