/* ==========================================
   MAYIM MV demo
   ・1920基準で可変
   ・動画2本クロスフェード（0.5s）
   ・横基準でファーストビュー全体
========================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #050d24;
}

.mv-demo {
  position: relative;
  width: 100%;
  height: 100svh;      /* モバイルアドレスバー変動に強い */
  min-height: 56.25vw; /* 1920x1080基準（16:9） */
  overflow: hidden;
  background: #050d24;
  isolation: isolate;
}

/* 背景動画レイヤー */
.mv-demo__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.mv-demo__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;         /* 画面全体に敷く */
  object-position: center center;
  opacity: 0;
  transition: opacity 0.5s linear; /* 切替0.5秒 */
  pointer-events: none;
}

.mv-demo__video.is-active {
  opacity: 1;
}

/* オーバーレイ全体（画像を前面に） */
.mv-demo__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none; /* 見せる用 */
}

/* ヘッダー画像（上部固定） */
.mv-demo__header-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  display: block;
}

/* 中央コピー画像（1920基準配置） */
.mv-demo__copy-img {
  position: absolute;
  left: 50%;
  top: 56.2%;
  transform: translate(-50%, -50%);
  width: 59.4375vw;   /* 930 / 1920 * 100 */
  min-width: 320px;
  height: auto;
  display: block;
}

/* PCで縦が短い時の安全調整 */
@media (max-aspect-ratio: 16/9) {
  .mv-demo {
    min-height: 100svh;
  }
}

/* SP */
@media screen and (max-width: 559px) {
  .mv-demo {
    min-height: 100svh;
  }

  .mv-demo__copy-img {
    width: 84vw;
    top: 56%;
    min-width: 0;
  }
}




/* ===== MV本体 ===== */
.mv-demo {
  position: relative;
  width: 100%;
  height: 100dvh;      /* ブラウザUI変動を反映した表示領域高 */
  min-height: 100dvh;  /* 余計な縦伸びを防ぐ */
  overflow: hidden;
  background: #050d24;
  isolation: isolate;
}

/* フォールバック（古い環境向け） */
@supports not (height: 100dvh) {
  .mv-demo {
    height: 100vh;
    min-height: 100vh;
  }
}

/* ===== 背景動画 ===== */
.mv-demo__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.mv-demo__video {
  position: absolute;
  left: 0;
  bottom: 0;           /* ← 下基準 */
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 画面を埋める */
  object-position: center bottom; /* ← 下を優先して上側をトリミング */
  opacity: 0;
  transition: opacity 0.5s linear;
  pointer-events: none;
}

.mv-demo__video.is-active {
  opacity: 1;
}

/* ===== オーバーレイ ===== */
.mv-demo__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* ヘッダー画像（上固定） */
.mv-demo__header-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  display: block;
}

/* 中央コピー画像（表示領域の縦中央） */
.mv-demo__copy-img {
  position: absolute;
  left: 50%;
  top: 50%;                     /* ← 常に中央 */
  transform: translate(-50%, -50%);
  width: 56.4375vw;             /* 930 / 1920 * 100 */
  min-width: 320px;
  height: auto;
  display: block;
}

/* SP */
@media screen and (max-width: 559px) {
  .mv-demo__copy-img {
    width: 84vw;
    min-width: 0;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}