/*
 * 動くカード（js/motions.js・app.js の「動くカード」）。
 * カードの絵をカードと同じ 2:3 の額に入れ、中をカメラが動く。物語は額の下に一文ずつ浮かぶ。
 * カメラの値は app.js が CSS 変数（--cam-tx / --cam-ty / --cam-zoom / --cam-ms）で渡す。
 * --hush（0〜1）は静けさ。上がるほど暗く沈み、光の粒が減る。.is-warm は最後の一拍の、あたたかい光。
 */

.bp-motion {
  position: fixed;
  inset: 0;
  z-index: 40; /* 拡大表示（20）と開封画面の上 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 40%, rgba(30, 40, 78, 0.6), transparent 72%),
    #05070e;
  overflow: hidden;
}

/* 額：カードと同じ 2:3。画面の高さから、文字とボタンの分を引いた大きさに収める */
.bp-mv-frame {
  --cam-tx: 0%;
  --cam-ty: 0%;
  --cam-zoom: 1;
  --cam-ms: 0ms;
  --hush: 0;
  position: relative;
  width: min(100%, calc((100dvh - 250px) * 2 / 3), 500px);
  min-width: 200px;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(231, 191, 85, 0.35),
    0 24px 60px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.bp-motion.is-ssr .bp-mv-frame {
  box-shadow:
    0 0 0 1px rgba(240, 198, 80, 0.7),
    0 0 40px rgba(240, 190, 80, 0.18),
    0 24px 60px rgba(0, 0, 0, 0.6);
}

/* カメラ。translate は拡大前の絵の大きさに対する %（cameraTransform が絵の外を見せない範囲に収めている） */
.bp-mv-cam {
  position: absolute;
  inset: 0;
  transform: scale(var(--cam-zoom)) translate(var(--cam-tx), var(--cam-ty));
  transition: transform var(--cam-ms) cubic-bezier(0.45, 0.05, 0.35, 1);
  will-change: transform;
}

.bp-mv-art,
.bp-mv-subject,
.bp-mv-subject-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/* 静けさが深まるほど、絵の色と明るさが沈む。主役（浮かぶ本）は少しだけ沈みを弱め、目が向くようにする */
.bp-mv-art {
  filter: brightness(calc(1 - var(--hush) * 0.45)) saturate(calc(1 - var(--hush) * 0.55));
  transition: filter 2.4s ease;
}

.bp-mv-subject {
  /* 手前の層は、カメラの動きより少しだけ大きく動く（奥行き） */
  transform: translate(calc(var(--cam-tx) * 0.06), calc(var(--cam-ty) * 0.06)) scale(1.02);
  transition: transform var(--cam-ms) cubic-bezier(0.45, 0.05, 0.35, 1), filter 2.4s ease;
  filter: brightness(calc(1 - var(--hush) * 0.25)) saturate(calc(1 - var(--hush) * 0.3));
}

/* 主役はゆっくり上下に漂う */
.bp-mv-subject-img {
  animation: bp-mv-float 6s ease-in-out infinite;
}

@keyframes bp-mv-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.2%); }
}

/* 舞う光の粒。静けさが深まるほど減る */
.bp-mv-motes {
  position: absolute;
  inset: -10% 0 0;
  pointer-events: none;
  opacity: calc(0.85 - var(--hush) * 0.85);
  transition: opacity 2.4s ease;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 82%, rgba(255, 240, 200, 0.9), transparent),
    radial-gradient(1px 1px at 28% 64%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(2px 2px at 44% 90%, rgba(255, 230, 180, 0.8), transparent),
    radial-gradient(1px 1px at 61% 72%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 76% 86%, rgba(255, 240, 200, 0.9), transparent),
    radial-gradient(1px 1px at 90% 66%, rgba(255, 255, 255, 0.7), transparent);
  background-size: 100% 50%;
  animation: bp-mv-rise 14s linear infinite;
}

@keyframes bp-mv-rise {
  from { background-position: 0 0; }
  to { background-position: 0 -100%; }
}

/* 四隅から沈む影（静けさ） */
.bp-mv-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 35%, rgba(3, 4, 10, 0.92) 100%);
  opacity: calc(0.25 + var(--hush) * 0.75);
  transition: opacity 2.4s ease;
}

/* 最後の一拍：音の戻らない部屋に、あたたかい光がひとつ */
.bp-mv-warm {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 45% at 50% 58%, rgba(255, 196, 120, 0.42), transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 3.2s ease;
}

.bp-mv-frame.is-warm .bp-mv-warm {
  opacity: 1;
}

/* 終わりに、額の下に題名を出す */
.bp-mv-title {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 48px 16px 18px;
  background: linear-gradient(to top, rgba(5, 7, 14, 0.85), transparent);
  color: #f6ecd0;
  font-family: var(--font-mincho);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-align: center;
  text-shadow: 0 0 18px rgba(240, 190, 80, 0.35);
  animation: bp-mv-title-in 1.6s ease-out both;
}

@keyframes bp-mv-title-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 物語の一文。物語の表示（.bp-story）と同じく明朝で、行間を広く。高さは2行分を取っておき、文が変わっても額が上下しないようにする */
.bp-mv-caption {
  width: min(100%, 26em);
  min-height: 4em;
  margin: 0;
  color: #f1ead6;
  font-family: var(--font-mincho);
  font-size: 1.02rem;
  line-height: 2;
  letter-spacing: 0.05em;
  text-align: center;
  text-wrap: balance;
  word-break: auto-phrase; /* 日本語を文節で折り返す（対応していないブラウザでは普通に折り返す） */
}

.bp-mv-line {
  display: inline-block;
  animation: bp-mv-line-in 1.4s ease-out both;
}

@keyframes bp-mv-line-in {
  from { opacity: 0; transform: translateY(6px); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}

.bp-mv-hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--bp-muted);
}

.bp-mv-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* 音のボタン：鳴っているあいだは金の縁 */
.bp-mv-sound[aria-pressed="true"] {
  border-color: var(--bp-gold-b);
  color: var(--bp-gold-a);
}

.bp-mv-sound:disabled {
  opacity: 0.45;
  cursor: default;
}

/* 拡大表示の「動くカードで読む」 */
.bp-motion-btn {
  min-height: 44px;
}

/* 一時停止中は、漂う動きも止める */
.bp-mv-frame.is-paused .bp-mv-subject-img,
.bp-mv-frame.is-paused .bp-mv-motes {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .bp-mv-cam,
  .bp-mv-subject {
    transition: none;
  }

  .bp-mv-subject-img,
  .bp-mv-motes,
  .bp-mv-line,
  .bp-mv-title {
    animation: none;
  }
}