/* ==========================================================
   mp-scatter v1.2 — MONOPAGE Studio
   画像を散りばめるFV／セクション（SWELL フルワイドブロック用）
   ----------------------------------------------------------
   設置：外観 > カスタマイズ > 追加CSS（または子テーマ style.css）
   使い方：
     1) フルワイドブロックの「追加CSSクラス」に mp-scatter
     2) その中に見出し・段落・ボタンなど通常ブロックでコピーを作る
     3) 同じフルワイドブロック内にカスタムHTMLブロックを置き、
        エディタで書き出した <div class="mp-scatter__layer"> を貼る
   ブレークポイント：PC / TB(〜959px) / SP(〜599px)
   ※ 画面幅ではなくセクション幅で判定（コンテナクエリ）
   ========================================================== */

/* ---------- セクション ---------- */
.mp-scatter {
  position: relative;
  overflow: hidden;
  z-index: 0;
  container-name: mpsc;
  container-type: inline-size;
}

.mp-scatter > .swell-block-fullWide__inner,
.mp-scatter > .mp-scatter__content {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: var(--mp-sc-align, center);
  min-height: var(--mp-sc-minh, max(560px, 42cqw));
}

/* JS実行前のチラつき防止：レイヤーがまだ内側にある間は基準をセクションにする */
.mp-scatter > .swell-block-fullWide__inner:has(> .mp-scatter__layer) {
  position: static;
}

@container mpsc (max-width: 959px) {
  .mp-scatter > .swell-block-fullWide__inner,
  .mp-scatter > .mp-scatter__content {
    align-content: var(--mp-sc-align-tb, var(--mp-sc-align, center));
    min-height: var(--mp-sc-minh-tb, var(--mp-sc-minh, max(560px, 80cqw)));
  }
}

@container mpsc (max-width: 599px) {
  .mp-scatter > .swell-block-fullWide__inner,
  .mp-scatter > .mp-scatter__content {
    align-content: var(--mp-sc-align-sp, var(--mp-sc-align-tb, var(--mp-sc-align, center)));
    min-height: var(--mp-sc-minh-sp, var(--mp-sc-minh-tb, var(--mp-sc-minh, max(600px, 170cqw))));
  }
}

/* ---------- 画像レイヤー ---------- */
.mp-scatter__layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  --rad: 8px;
  --frame: 0px;
  --frame-color: #fff;
  --shadow: none;
}

/* テキストより手前に画像を出したいとき */
.mp-scatter__layer[data-front] {
  z-index: 3;
}

/* ---------- アイテム（写真・図形） ----------
   --x, --y : 中心位置（セクションに対する %）
   --w      : 幅（セクション幅に対する %）
   --ar     : 縦横比（幅 ÷ 高さ。1.5=横長3:2 / 0.75=縦長3:4）
   --tx/--ty/--tw/--tar/--tr : タブレット上書き
   --sx/--sy/--sw/--sar/--sr : スマホ上書き（縦横比・回転も端末別にできる）
   --r 回転(deg) / --blur ぼかし(px) / --o 不透明度 / --z 重なり順
   --fp 画像の見せる位置（center / top / 50% 30% など） */
.mp-sc-item {
  --_x: var(--x, 50);
  --_y: var(--y, 50);
  --_w: var(--w, 20);
  --_ar: var(--ar, 1.333);
  --_r: var(--r, 0);
  position: absolute;
  display: block;
  left: calc(var(--_x) * 1%);
  top: calc(var(--_y) * 1%);
  width: calc(var(--_w) * 1%);
  aspect-ratio: var(--_ar);
  height: auto;
  padding: 0;
  margin: calc(var(--_w) / var(--_ar) * -0.5%) 0 0 calc(var(--_w) * -0.5%) !important;
  z-index: var(--z, 1);
  opacity: var(--o, 1);
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(calc(var(--_r) * 1deg));
  filter: blur(calc(var(--blur, 0) * 1px));
  max-width: none;
}

@container mpsc (max-width: 959px) {
  .mp-sc-item {
    --_x: var(--tx, var(--x, 50));
    --_y: var(--ty, var(--y, 50));
    --_w: var(--tw, var(--w, 20));
    --_ar: var(--tar, var(--ar, 1.333));
    --_r: var(--tr, var(--r, 0));
  }
}

@container mpsc (max-width: 599px) {
  .mp-sc-item {
    --_x: var(--sx, var(--tx, var(--x, 50)));
    --_y: var(--sy, var(--ty, var(--y, 50)));
    --_w: var(--sw, var(--tw, var(--w, 20)));
    --_ar: var(--sar, var(--tar, var(--ar, 1.333)));
    --_r: var(--sr, var(--tr, var(--r, 0)));
  }
}

/* 端末ごとの非表示  data-hide="pc tb sp" の組み合わせ */
.mp-sc-item[data-hide~="pc"] {
  display: none;
}

@container mpsc (max-width: 959px) {
  .mp-sc-item[data-hide~="pc"] {
    display: block;
  }
  .mp-sc-item[data-hide~="tb"] {
    display: none;
  }
}

@container mpsc (max-width: 599px) {
  .mp-sc-item[data-hide~="tb"] {
    display: block;
  }
  .mp-sc-item[data-hide~="sp"] {
    display: none;
  }
}

/* 中身（浮遊・登場アニメーションはこの要素が担当） */
.mp-sc-in {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: var(--rad);
  background: var(--frame-color);
  box-shadow: var(--shadow);
  --img-rad: max(0px, calc(var(--rad) - var(--frame)));
}

.mp-sc-in > img {
  position: absolute;
  top: var(--frame);
  left: var(--frame);
  display: block;
  width: calc(100% - var(--frame) * 2) !important;
  height: calc(100% - var(--frame) * 2) !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: cover;
  object-position: var(--fp, center);
  border-radius: var(--img-rad);
}

.mp-sc-in > img + img {
  opacity: 0;
}

/* ---------- 見せ方スタイル（レイヤーの data-style） ---------- */
.mp-scatter__layer[data-style="shadow"] .mp-sc-in {
  --shadow: 0 22px 44px -20px rgba(16, 24, 40, 0.45);
}

.mp-scatter__layer[data-style="frame"] .mp-sc-in {
  --frame: var(--frame-w, 10px);
  --shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.35);
}

/* ---------- 形（data-shape）写真にも図形にも使える ---------- */
.mp-sc-item[data-shape="circle"] .mp-sc-in {
  border-radius: 50%;
  --img-rad: 50%;
}

.mp-sc-item[data-shape="drop"] .mp-sc-in {
  border-radius: 50% 50% 50% 0;
  --img-rad: 50% 50% 50% 0;
}

.mp-sc-item[data-shape="square"] .mp-sc-in {
  border-radius: 18%;
}

.mp-sc-item[data-shape="triangle"] .mp-sc-in {
  border-radius: 0;
  clip-path: polygon(50% 5%, 97% 92%, 3% 92%);
}

.mp-sc-item[data-shape="hex"] .mp-sc-in {
  border-radius: 0;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
}

.mp-sc-item[data-shape="blob"] .mp-sc-in {
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  --img-rad: 0;
}

.mp-sc-item[data-shape="arch"] .mp-sc-in {
  border-radius: 999px 999px 0 0;
  --img-rad: 0;
}

.mp-sc-item[data-shape="pill"] .mp-sc-in {
  border-radius: 999px;
  --img-rad: 0;
}

.mp-sc-item[data-shape="leaf"] .mp-sc-in {
  border-radius: 4% 60% 4% 60%;
  --img-rad: 0;
}

.mp-sc-item[data-shape="star"] .mp-sc-in {
  border-radius: 0;
  clip-path: polygon(50% 2%, 61% 36%, 98% 36%, 68% 58%, 79% 94%, 50% 72%, 21% 94%, 32% 58%, 2% 36%, 39% 36%);
}

/* 角丸の六角形（ハニカム）  hexr=横向き / hexv=縦向き  ※線は付きません */
.mp-sc-item[data-shape="hexr"] .mp-sc-in,
.mp-sc-item[data-shape="hexv"] .mp-sc-in {
  border-radius: 0;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.mp-sc-item[data-shape="hexr"] .mp-sc-in {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='27 6 73 6 96 50 73 94 27 94 4 50' fill='black' stroke='black' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='27 6 73 6 96 50 73 94 27 94 4 50' fill='black' stroke='black' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.mp-sc-item[data-shape="hexv"] .mp-sc-in {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50 6 92 28 92 72 50 94 8 72 8 28' fill='black' stroke='black' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50 6 92 28 92 72 50 94 8 72 8 28' fill='black' stroke='black' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 流体シェイプ（形がゆっくり変わり続ける）  --morph で1周の秒数 */
@keyframes mp-sc-morph {
  0% {
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
  }
  33% {
    border-radius: 40% 60% 70% 30% / 50% 30% 70% 50%;
  }
  66% {
    border-radius: 30% 70% 38% 62% / 60% 55% 45% 40%;
  }
  100% {
    border-radius: 55% 45% 30% 70% / 35% 60% 40% 65%;
  }
}

.mp-sc-item[data-shape="morph"] .mp-sc-in {
  border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
  --img-rad: 0;
  animation: mp-sc-morph var(--morph, 12s) ease-in-out infinite alternate;
}

/* 図形アイテム（写真なし） --c で色指定 */
.mp-scatter__layer .mp-sc-item.mp-sc-shape .mp-sc-in {
  --frame: 0px;
  background: var(--c, #ffd84d);
  box-shadow: none;
}

.mp-scatter__layer .mp-sc-item.mp-sc-shape[data-shape="ring"] .mp-sc-in {
  border-radius: 50%;
  background: radial-gradient(closest-side, transparent 62%, var(--c, #ffd84d) 63%);
}

/* 線だけの図形・写真の縁取り  data-line="solid|dashed"  太さは --lw
   ※ 三角・六角・星は clip-path で切り抜くため線は付きません */
.mp-sc-item[data-line] .mp-sc-in {
  border: var(--lw, 1.5px) solid var(--c, #222);
}

.mp-sc-item[data-line="dashed"] .mp-sc-in {
  border-style: dashed;
}

.mp-scatter__layer .mp-sc-item.mp-sc-shape[data-line] .mp-sc-in {
  background: transparent;
}

/* ---------- マスキングテープ（data-tape="1" 上中央 / "2" 対角） ---------- */
.mp-sc-item[data-tape]::before,
.mp-sc-item[data-tape="2"]::after {
  content: "";
  position: absolute;
  z-index: 3;
  width: 34%;
  height: 9%;
  min-height: 12px;
  background: var(--tape-c, rgba(206, 108, 214, 0.78));
  pointer-events: none;
}

.mp-sc-item[data-tape="1"]::before {
  top: -4%;
  left: 33%;
  transform: rotate(-4deg);
}

.mp-sc-item[data-tape="2"]::before {
  top: 1%;
  left: -9%;
  transform: rotate(-36deg);
}

.mp-sc-item[data-tape="2"]::after {
  bottom: 1%;
  right: -9%;
  transform: rotate(-36deg);
}

/* ---------- 登場アニメーション（data-anim） ---------- */
.mp-scatter__layer.is-ready:not([data-anim="none"]) .mp-sc-in {
  opacity: 0;
  transition:
    opacity 0.9s ease,
    transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * var(--stagger, 90ms) + 120ms);
}

.mp-scatter__layer.is-ready[data-anim="rise"] .mp-sc-in {
  transform: translateY(48px);
}

.mp-scatter__layer.is-ready[data-anim="scale"] .mp-sc-in {
  transform: scale(0.8);
}

.mp-scatter__layer.is-ready[data-anim="drop"] .mp-sc-in {
  transform: translateY(-36px) rotate(-7deg) scale(1.06);
}

.mp-scatter__layer.is-ready.is-in .mp-sc-in {
  opacity: 1;
  transform: none;
}

/* ---------- ふわふわ浮遊（data-float="振れ幅px"） ---------- */
@keyframes mp-sc-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 calc(var(--float, 10px) * -1);
  }
}

.mp-scatter__layer[data-float] .mp-sc-in {
  animation: mp-sc-float var(--fdur, 6s) ease-in-out var(--fdel, 0s) infinite;
}

/* 流体シェイプ＋浮遊を同時に使うとき */
.mp-scatter__layer[data-float] .mp-sc-item[data-shape="morph"] .mp-sc-in {
  animation:
    mp-sc-float var(--fdur, 6s) ease-in-out var(--fdel, 0s) infinite,
    mp-sc-morph var(--morph, 12s) ease-in-out infinite alternate;
}

/* ---------- カーテンが開くように登場（data-anim="curtain"）  色は --curtain ---------- */
.mp-scatter__layer.is-ready[data-anim="curtain"] .mp-sc-in {
  opacity: 1;
  transform: none;
}

.mp-scatter__layer.is-ready[data-anim="curtain"] .mp-sc-in::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  background: var(--curtain, #1b1f27);
  transform-origin: right center;
  transition: transform 1s cubic-bezier(0.77, 0, 0.18, 1);
  transition-delay: calc(var(--i, 0) * var(--stagger, 90ms) + 120ms);
}

.mp-scatter__layer.is-ready[data-anim="curtain"] .mp-sc-in > img {
  transform: scale(1.25);
  transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * var(--stagger, 90ms) + 320ms);
}

.mp-scatter__layer.is-ready.is-in[data-anim="curtain"] .mp-sc-in::after {
  transform: scaleX(0);
}

.mp-scatter__layer.is-ready.is-in[data-anim="curtain"] .mp-sc-in > img {
  transform: none;
}

/* ---------- 流れる写真の列（mp-sc-track） ----------
   data-dir="up|down|left|right"（PC）／data-dir-tb／data-dir-sp で端末ごとに向きを変更
   --speed 1周の秒数 / --gap 写真の間隔 / --iar 1枚の縦横比 */
.mp-scatter__layer .mp-sc-item.mp-sc-track .mp-sc-in {
  --frame: 0px;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.mp-sc-reel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  animation: mp-sc-reel-y var(--speed, 40s) linear infinite;
}

.mp-sc-reel > img {
  display: block;
  flex: none;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  aspect-ratio: var(--iar, 1.333);
  object-fit: cover;
  margin: 0 0 var(--gap, 12px) 0 !important;
  border-radius: var(--rad);
}

@keyframes mp-sc-reel-y {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

@keyframes mp-sc-reel-x {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.mp-sc-track:is([data-dir="left"], [data-dir="right"]) .mp-sc-reel {
  flex-direction: row;
  width: max-content;
  height: 100%;
  animation-name: mp-sc-reel-x;
}

.mp-sc-track:is([data-dir="left"], [data-dir="right"]) .mp-sc-reel > img {
  width: auto !important;
  height: 100% !important;
  margin: 0 var(--gap, 12px) 0 0 !important;
}

.mp-sc-track:is([data-dir="down"], [data-dir="right"]) .mp-sc-reel {
  animation-direction: reverse;
}

@container mpsc (max-width: 959px) {
  .mp-sc-track:is([data-dir-tb="up"], [data-dir-tb="down"]) .mp-sc-reel {
    flex-direction: column;
    width: 100%;
    height: auto;
    animation-name: mp-sc-reel-y;
  }
  .mp-sc-track:is([data-dir-tb="up"], [data-dir-tb="down"]) .mp-sc-reel > img {
    width: 100% !important;
    height: auto !important;
    margin: 0 0 var(--gap, 12px) 0 !important;
  }
  .mp-sc-track:is([data-dir-tb="left"], [data-dir-tb="right"]) .mp-sc-reel {
    flex-direction: row;
    width: max-content;
    height: 100%;
    animation-name: mp-sc-reel-x;
  }
  .mp-sc-track:is([data-dir-tb="left"], [data-dir-tb="right"]) .mp-sc-reel > img {
    width: auto !important;
    height: 100% !important;
    margin: 0 var(--gap, 12px) 0 0 !important;
  }
  .mp-sc-track:is([data-dir-tb="up"], [data-dir-tb="left"]) .mp-sc-reel {
    animation-direction: normal;
  }
  .mp-sc-track:is([data-dir-tb="down"], [data-dir-tb="right"]) .mp-sc-reel {
    animation-direction: reverse;
  }
}

@container mpsc (max-width: 599px) {
  .mp-sc-track:is([data-dir-sp="up"], [data-dir-sp="down"]) .mp-sc-reel {
    flex-direction: column;
    width: 100%;
    height: auto;
    animation-name: mp-sc-reel-y;
  }
  .mp-sc-track:is([data-dir-sp="up"], [data-dir-sp="down"]) .mp-sc-reel > img {
    width: 100% !important;
    height: auto !important;
    margin: 0 0 var(--gap, 12px) 0 !important;
  }
  .mp-sc-track:is([data-dir-sp="left"], [data-dir-sp="right"]) .mp-sc-reel {
    flex-direction: row;
    width: max-content;
    height: 100%;
    animation-name: mp-sc-reel-x;
  }
  .mp-sc-track:is([data-dir-sp="left"], [data-dir-sp="right"]) .mp-sc-reel > img {
    width: auto !important;
    height: 100% !important;
    margin: 0 var(--gap, 12px) 0 0 !important;
  }
  .mp-sc-track:is([data-dir-sp="up"], [data-dir-sp="left"]) .mp-sc-reel {
    animation-direction: normal;
  }
  .mp-sc-track:is([data-dir-sp="down"], [data-dir-sp="right"]) .mp-sc-reel {
    animation-direction: reverse;
  }
}

/* 画面外では流れを止める（JSが is-visible を付け外し） */
.mp-scatter__layer.is-ready:not(.is-visible) .mp-sc-reel {
  animation-play-state: paused;
}

/* ---------- 画像の切り替え（imgを2枚以上入れたアイテムだけ） ---------- */
.mp-sc-item.is-switch .mp-sc-in > img {
  opacity: 0;
  z-index: 0;
  transition: opacity var(--sw-dur, 1.2s) ease;
}

.mp-sc-item.is-switch .mp-sc-in > img.is-prev {
  opacity: 1;
  z-index: 1;
}

.mp-sc-item.is-switch .mp-sc-in > img.is-active {
  opacity: 1;
  z-index: 2;
}

@keyframes mp-sc-zoom {
  from {
    transform: scale(1.14);
  }
  to {
    transform: scale(1);
  }
}

.mp-scatter__layer[data-switch="zoom"] .mp-sc-item.is-switch .mp-sc-in > img.is-active {
  animation: mp-sc-zoom 6s ease-out both;
}

.mp-scatter__layer[data-switch="slide"] .mp-sc-item.is-switch .mp-sc-in > img {
  opacity: 1;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.9s cubic-bezier(0.7, 0, 0.2, 1);
}

.mp-scatter__layer[data-switch="slide"] .mp-sc-item.is-switch .mp-sc-in > img.is-prev,
.mp-scatter__layer[data-switch="slide"] .mp-sc-item.is-switch .mp-sc-in > img.is-active {
  clip-path: inset(0 0 0 0);
}

/* ---------- 動きを減らす設定のユーザー ---------- */
@media (prefers-reduced-motion: reduce) {
  .mp-scatter__layer .mp-sc-in,
  .mp-scatter__layer .mp-sc-in > img,
  .mp-scatter__layer .mp-sc-reel {
    animation: none !important;
    transform: none !important;
    translate: none !important;
  }
  .mp-scatter__layer.is-ready .mp-sc-in {
    transition: opacity 0.4s ease !important;
  }
  .mp-scatter__layer.is-ready .mp-sc-in::after {
    display: none;
  }
}