@charset "UTF-8";

/**
 * FV 共通部品（トップ・24h・パーソナル・カフェ）
 * - スクロール表示 .vision-scroll-cue（英字＋縦線に黄色が流れる。トップの形が正本）
 * - 動画前の読み込み画面 .vision-fv-loading（黒地＋中央に白ロゴ）
 * 見た目だけをここに置く。置き場所（position・bottom・left）と表示/非表示は各ページの CSS。
 * 読込は functions.php の vision24_enqueue_fv_common()。読み込み画面の切替は assets/js/shared/fv-loading.js。
 *
 * ページごとの差は変数で変える:
 *   --scroll-cue-color（文字）/ --scroll-cue-track（線の地）/ --scroll-cue-flow（流れる線）/ --scroll-cue-line-h（線の長さ）
 *   --fv-loading-justify / --fv-loading-align / --fv-loading-pad（ロゴの位置）/ --fv-loading-logo-w（ロゴの幅）
 */

/* ── スクロール表示 ── */
.vision-scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 12px 0;
  color: var(--scroll-cue-color, #FFFFFF);
  text-decoration: none;
}

.vision-scroll-cue__label {
  font-family: var(--f-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  line-height: 1;
}

.vision-scroll-cue__line {
  position: relative;
  display: block;
  width: 1px;
  height: var(--scroll-cue-line-h, 56px);
  overflow: hidden;
  background: var(--scroll-cue-track, rgba(255, 255, 255, .35));
}

.vision-scroll-cue__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scroll-cue-flow, #FEE801);
  transform: translateY(-100%);
  animation: vision-scroll-cue 2s cubic-bezier(.65, 0, .35, 1) infinite;
}

@keyframes vision-scroll-cue {
  0%   { transform: translateY(-100%); }
  50%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

@media (min-width: 960px) {
  .vision-scroll-cue__label { font-size: 12px; }
  .vision-scroll-cue__line { height: var(--scroll-cue-line-h-pc, var(--scroll-cue-line-h, 72px)); }
}

@media (prefers-reduced-motion: reduce) {
  .vision-scroll-cue__line::after {
    animation: none;
    transform: none;
  }
}

/* ── 動画前の読み込み画面 ── */
.vision-fv-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: var(--fv-loading-align, center);
  justify-content: var(--fv-loading-justify, center);
  padding: var(--fv-loading-pad, 0);
  background: #000000;
}

.vision-fv-loading__logo {
  display: block;
  width: var(--fv-loading-logo-w, 200px);
  max-width: 60%;
  height: auto;
}

/* 再生が始まるまで動画を隠す（is-fv-waiting は fv-loading.js が付け外し。JS が動かなければ動画をそのまま出す）。
   各ページの動画の表示指定（24h の .is-ready など）より優先させるため !important */
.is-fv-waiting video {
  opacity: 0 !important;
}
[data-fv-loading-scope] video {
  transition: opacity .4s ease;
}

/* 待ち状態でないときは読み込み画面そのものを消す（再生後・JS が動かないとき）。
   動画が通常の並び（position なし）のページ＝カフェでも、黒地が動画の上に残らないように */
[data-fv-loading-scope]:not(.is-fv-waiting) .vision-fv-loading {
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility 0s linear .4s;
}