/* ジャーナル記事のアニメ解説（js/jr-movie.js）
   既定（JS なし・動きを減らす設定）は、全シーンを並べた絵コンテ。html.jr-movie-js のときだけ重ねて再生する。
   動きは transform と opacity だけ。各要素の素の状態が最終状態で、keyframes は from 側だけを書く。 */

.jr-movie {
  --mv-bg: radial-gradient(120% 90% at 20% 0%, #2f5877 0%, #1f3c53 45%, #152c3d 100%);
  max-width: 880px;
  margin: 2.75rem auto 0;
  padding: 0 16px;
}

/* ---------- 絵コンテ（既定） ---------- */
.jr-movie-scenes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jr-scene {
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--mv-bg);
  box-shadow: 0 12px 30px -18px rgba(24, 50, 68, .55);
}
.jr-scene-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font); }
.jr-scene-svg * { --d: 0s; transform-box: fill-box; transform-origin: center; }
.jr-scene-cap {
  margin: 0;
  padding: .75rem 1rem .9rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: #e8f4f6;
  font-size: .9375rem;
  line-height: 1.6;
}
.mv-out { opacity: 0; }

/* ---------- 再生（JS あり） ---------- */
.jr-movie-js .jr-movie-scenes {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 20px;
  background: var(--mv-bg);
  box-shadow: 0 30px 60px -30px rgba(24, 50, 68, .7), inset 0 0 0 1px rgba(134, 211, 220, .16);
  cursor: pointer;
}
.jr-movie-js .jr-movie-scenes::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 40% at 50% 110%, rgba(134, 211, 220, .18), transparent 70%);
  pointer-events: none;
}
.jr-movie-js .jr-movie-scenes:focus-visible { outline: 3px solid var(--aqua-strong); outline-offset: 3px; }
.jr-movie-js .jr-scene {
  position: absolute;
  inset: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.jr-movie-js .jr-scene.is-active { opacity: 1; visibility: visible; transition: opacity .5s ease; }
/* jr-movie.js が読めなかったとき、ステージを空にせずシーン1を見せる（:has() 非対応だとこの行だけ無視される） */
.jr-movie-js .jr-movie-scenes:not(:has(.is-active)) .jr-scene:first-child { opacity: 1; visibility: visible; }
.jr-movie-js .jr-scene-svg { height: 100%; }
.jr-movie-js .jr-scene-cap { display: none; }
.jr-movie.is-paused .jr-scene * { animation-play-state: paused !important; }

.jr-movie-cap {
  min-height: 3.3em;
  margin: 1rem .25rem 0;
  color: var(--navy);
  font-size: clamp(1rem, 2.2vw, 1.125rem);
  font-weight: 700;
  line-height: 1.65;
}
.jr-movie-controls { display: flex; align-items: center; gap: .9rem; margin: .5rem .25rem 0; }
.jr-movie-play {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 40px;
  padding: 0 1rem 0 .8rem;
  border: 0;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font: inherit;
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
}
.jr-movie-play::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.jr-movie-play[data-state=playing]::before { width: 10px; height: 12px; border-width: 0 3px; border-color: currentColor; }
.jr-movie-play[data-state=ended]::before { width: 10px; height: 10px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
.jr-movie-play:focus-visible, .jr-movie-dot:focus-visible { outline: 3px solid var(--aqua-strong); outline-offset: 2px; }
.jr-movie-progress { flex: 1; height: 4px; overflow: hidden; border-radius: 2px; background: var(--line); }
.jr-movie-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--aqua-strong), var(--aqua)); transform: scaleX(0); transform-origin: left; }
.jr-movie-dots { display: flex; gap: .15rem; }
.jr-movie-dot { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.jr-movie-dot::before { content: ""; display: block; width: 8px; height: 8px; margin: auto; border-radius: 50%; background: #c5d4dc; transition: transform .2s ease, background-color .2s ease; }
.jr-movie-dot[aria-current]::before { background: var(--aqua-strong); transform: scale(1.35); }

/* ---------- アニメの共通クラス（再生中のシーンだけで動く） ---------- */
.jr-movie-js .jr-scene.is-active .mv-fade    { animation: jr-mv-fade .7s ease var(--d, 0s) both; }
.jr-movie-js .jr-scene.is-active .mv-up      { animation: jr-mv-up .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) both; }
.jr-movie-js .jr-scene.is-active .mv-down    { animation: jr-mv-down .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) both; }
.jr-movie-js .jr-scene.is-active .mv-left    { animation: jr-mv-left .8s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) both; }
.jr-movie-js .jr-scene.is-active .mv-right   { animation: jr-mv-right .8s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) both; }
.jr-movie-js .jr-scene.is-active .mv-pop     { animation: jr-mv-pop .6s cubic-bezier(.3, 1.5, .5, 1) var(--d, 0s) both; }
.jr-movie-js .jr-scene.is-active .mv-grow-x  { transform-origin: left center; animation: jr-mv-grow-x .9s cubic-bezier(.6, 0, .2, 1) var(--d, 0s) both; }
.jr-movie-js .jr-scene.is-active .mv-grow-y  { transform-origin: center bottom; animation: jr-mv-grow-y .9s cubic-bezier(.6, 0, .2, 1) var(--d, 0s) both; }
.jr-movie-js .jr-scene.is-active .mv-drop    { animation: jr-mv-drop .8s cubic-bezier(.3, 1.3, .5, 1) var(--d, 0s) both; }
.jr-movie-js .jr-scene.is-active .mv-spin-in { animation: jr-mv-spin-in .9s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) both; }
.jr-movie-js .jr-scene.is-active .mv-out     { animation: jr-mv-out .5s ease var(--d, 0s) both; }
.jr-movie-js .jr-scene.is-active .mv-float   { animation: jr-mv-float 3.2s ease-in-out var(--d, 0s) infinite; }
.jr-movie-js .jr-scene.is-active .mv-pulse   { animation: jr-mv-pulse 1.6s ease-in-out var(--d, 0s) infinite; }
.jr-movie-js .jr-scene.is-active .mv-spin    { animation: jr-mv-spin 6s linear var(--d, 0s) infinite; }
.jr-movie-js .jr-scene.is-active .mv-shake   { animation: jr-mv-shake .5s ease var(--d, 0s) 2; }

@keyframes jr-mv-fade    { from { opacity: 0; } }
@keyframes jr-mv-up      { from { opacity: 0; transform: translateY(28px); } }
@keyframes jr-mv-down    { from { opacity: 0; transform: translateY(-28px); } }
@keyframes jr-mv-left    { from { opacity: 0; transform: translateX(48px); } }
@keyframes jr-mv-right   { from { opacity: 0; transform: translateX(-48px); } }
@keyframes jr-mv-pop     { from { opacity: 0; transform: scale(.4); } }
@keyframes jr-mv-grow-x  { from { transform: scaleX(0); } }
@keyframes jr-mv-grow-y  { from { transform: scaleY(0); } }
@keyframes jr-mv-drop    { from { opacity: 0; transform: translateY(-120px); } }
@keyframes jr-mv-spin-in { from { opacity: 0; transform: rotate(-180deg) scale(.5); } }
@keyframes jr-mv-out     { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.85); } }
@keyframes jr-mv-float   { 50% { transform: translateY(-8px); } }
@keyframes jr-mv-pulse   { 50% { opacity: .45; transform: scale(1.08); } }
@keyframes jr-mv-spin    { to { transform: rotate(360deg); } }
@keyframes jr-mv-shake   { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

@media (max-width: 600px) {
  .jr-movie { margin-top: 2rem; }
  /* スマホではステージを画面の端まで広げ、SVG 内の文字を少しでも大きくする */
  .jr-movie-js .jr-movie-scenes { margin: 0 -16px; border-radius: 0; }
  .jr-movie-controls { gap: .6rem; }
  .jr-movie-dot { width: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .jr-movie *, .jr-movie *::before { animation: none !important; transition: none !important; }
}