/*
Theme Name: Lightning Child
Theme URI: 
Template: lightning
Description: 
Author: 
Tags: 
Version: 0.6.0
*/
/* =====================================================
  メインビジュアル左側 固定ナビゲーション（Scroll誘導）
  対象：Lightningテーマ / トップMV
   ===================================================== */

/* MV全体の基準（absolute配置の基点） */
.mv-wrap {
  position: relative;
}

/* -----------------------------------------------------
  左側固定ユニット本体
  ・MVの左側に縦配置
  ・上下中央に配置
----------------------------------------------------- */
.mv-side {
  position: absolute;
  left: -52px;
  /* ←ここで左右調整 */
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  pointer-events: none;
}

/* 中身を縦方向に整列 */
.mv-side__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  /* 各要素の縦間隔 */
}

/* -----------------------------------------------------
  縦書き英文コピー
----------------------------------------------------- */
.mv-side__copy {
  writing-mode: vertical-rl;
  /* 縦書き（右→左） */
  text-orientation: mixed;
  letter-spacing: 0.14em;
  font-size: 12px;
  color: #fff;
  opacity: 0.9;
  pointer-events: auto;
}

/* -----------------------------------------------------
  Scroll誘導リンク全体
----------------------------------------------------- */
.mv-side__scroll {
  writing-mode: vertical-rl;
  /* Scrollも縦書き */
  text-decoration: none;
  color: #fff;
  opacity: 0.9;
  pointer-events: auto;
}

/* Scroll文字 */
.mv-side__scrollText {
  font-size: 11px;
  letter-spacing: 0.2em;
  position: relative;
  /* 矢印配置の基準 */
  display: inline-block;
  padding-bottom: 14px;
  /* 矢印分の余白 */
}

/* Scroll文字の下に表示する矢印 */
.mv-side__scrollText::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 7px;
  height: 7px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  opacity: 0.9;
}

/* -----------------------------------------------------
  縦ライン（Scroll誘導用）
----------------------------------------------------- */
.mv-side__scrollLine {
  display: inline-block;
  width: 1px;
  height: 64px;
  /* 線の長さ */
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.9);
  position: relative;
  /* 丸アニメの基準 */
  overflow: visible;
  /* 丸が端で切れないように */
}

/* 縦ライン上を上下する丸（スクロール誘導） */
.mv-side__scrollLine::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 8px;
  height: 8px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #fff;
  animation: mvDot 1.6s ease-in-out infinite;
}

/* 丸の上下アニメーション */
@keyframes mvDot {
  0% {
    top: 0;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    top: calc(100% - 8px);
    opacity: 0;
  }
}

/* -----------------------------------------------------
スマホでは非表示（邪魔にならないように）
----------------------------------------------------- */
@media (max-width: 767px) {
  .mv-side {
    display: none;
  }
}

/* =====================================================
  VKスライダー内 テキスト／ロゴのアニメーション制御
  ・スライドがアクティブになるたびに毎回発火
  ・表示順：見出し → ロゴ → 段落
   ===================================================== */

/* -----------------------------------------------------
  見出し（最初に表示）
  ・スライド切替時に即アニメ開始
----------------------------------------------------- */
.swiper-slide-active .mv-title {
  animation: mvSlideInLeft 1s ease both;
}

/* -----------------------------------------------------
  ロゴ（見出しの後に表示）
  ・1秒遅らせて、見出しの余韻を作る
----------------------------------------------------- */
.swiper-slide-active .mv-logo {
  animation: mvSlideInLeft 1s ease both;
  animation-delay: 1s;
  /* ← 表示タイミング調整 */
}

/* -----------------------------------------------------
  段落テキスト（最後に表示）
  ・ロゴのさらに後に出して情報を整理
----------------------------------------------------- */
.swiper-slide-active .mv-text {
  animation: mvSlideInLeft 1s ease both;
  animation-delay: 2s;
  /* ← 全体の間をとりたい場合はここを調整 */
}

/* -----------------------------------------------------
  アニメーション定義
  ・左からしっかり入ってくる
  ・少しだけ縮小状態から開始して奥行きを出す
----------------------------------------------------- */
@keyframes mvSlideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100px) scale(0.98);
    /* ← 動きのキモ */
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}