/* features/frame: CSS-only frame effects (yugami, jaggy)
   運用: CSSネストと@supportsを活用。非対応環境は丸角(12px)フォールバック。 */

   /* `frame--*` 要素はブロック化してはみ出したものは非表示 */
[class^="frame--"],
[class*=" frame--"] {
  display: block;
  overflow: hidden;
  /* フォールバック丸角 */
  border-radius: 12px;

  /* 直下/内部imgの基本フィット */
  & > img,
  & img {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* ======================================================
   yugami (border-radius v1〜v5)
====================================================== */
.frame--yugami-v1,
.img-frame--yugami-v1 img,
.wp-block-media-text.mt-frame--yugami-v1 .wp-block-media-text__media img { border-radius: 62% 38% 63% 37% / 40% 60% 40% 60%; }

.frame--yugami-v2,
.img-frame--yugami-v2 img,
.wp-block-media-text.mt-frame--yugami-v2 .wp-block-media-text__media img { border-radius: 68% 32% 89% 41% / 44% 52% 70% 56%; }

.frame--yugami-v3,
.img-frame--yugami-v3 img,
.wp-block-media-text.mt-frame--yugami-v3 .wp-block-media-text__media img { border-radius: 57% 43% 87% 34% / 61% 79% 53% 77%; }

.frame--yugami-v4,
.img-frame--yugami-v4 img,
.wp-block-media-text.mt-frame--yugami-v4 .wp-block-media-text__media img { border-radius: 64% 36% 42% 58% / 47% 63% 59% 41%; }

.frame--yugami-v5,
.img-frame--yugami-v5 img,
.wp-block-media-text.mt-frame--yugami-v5 .wp-block-media-text__media img { border-radius: 63% 37% 61% 39% / 58% 42% 40% 60%; }

/* ======================================================
   jaggy (clip-path: polygon v1〜v5) 依存: @supports
====================================================== */
@supports (clip-path: polygon(0 0, 100% 0)) {
  .frame--jaggy-v1,
  .img-frame--jaggy-v1 img,
  .wp-block-media-text.mt-frame--jaggy-v1 .wp-block-media-text__media img {
    --jt: 3.4%; --jr: 2.6%; --jb: 4.0%; --jl: 2.2%;
    clip-path: polygon(
      0% var(--jt),
      18% 0%,
      37% var(--jt),
      61% 0%,
      82% calc(var(--jt) * 0.70),
      100% calc(var(--jt) * 0.25),

      100% 12%,
      calc(100% - var(--jr)) 33%,
      100% 55%,
      calc(100% - (var(--jr) * 0.60)) 78%,
      100% 100%,

      100% calc(100% - (var(--jb) * 0.35)),
      76% 100%,
      59% calc(100% - var(--jb)),
      36% 100%,
      14% calc(100% - (var(--jb) * 0.65)),
      0% 100%,

      0% 82%,
      calc(var(--jl) * 0.85) 60%,
      0% 39%,
      calc(var(--jl) * 0.50) 18%,
      0% 0%,

      0% var(--jt)
    );
  }

  .frame--jaggy-v2,
  .img-frame--jaggy-v2 img,
  .wp-block-media-text.mt-frame--jaggy-v2 .wp-block-media-text__media img {
    --jt: 3.8%; --jr: 3.0%; --jb: 4.6%; --jl: 2.6%;
    clip-path: polygon(
      0% 0%,
      18% calc(var(--jt) * 0.95),
      40% 0%,
      62% var(--jt),
      84% 0%,
      100% calc(var(--jt) * 0.30),

      calc(100% - var(--jr)) 12%,
      100% 32%,
      calc(100% - (var(--jr) * 0.80)) 55%,
      100% 78%,
      calc(100% - (var(--jr) * 0.45)) 100%,

      100% 100%,
      78% calc(100% - var(--jb) * 0.30),
      57% 100%,
      37% calc(100% - var(--jb)),
      18% 100%,
      0% 100%,

      calc(var(--jl) * 0.85) 86%,
      0% 64%,
      calc(var(--jl) * 0.60) 41%,
      0% 18%,
      calc(var(--jl) * 0.45) 0%,

      0% 0%
    );
  }

  .frame--jaggy-v3,
  .img-frame--jaggy-v3 img,
  .wp-block-media-text.mt-frame--jaggy-v3 .wp-block-media-text__media img {
    --jt: 4.2%; --jr: 3.4%; --jb: 5.2%; --jl: 3.0%;
    clip-path: polygon(
      0% calc(var(--jt) * 0.7),
      12% 0%, 28% var(--jt),
      44% 0%, 60% calc(var(--jt) * 0.9),
      78% 0%, 92% calc(var(--jt) * 0.6),
      100% calc(var(--jt) * 0.35),

      100% 8%,
      calc(100% - var(--jr)) 26%,
      100% 45%,
      calc(100% - (var(--jr) * 0.85)) 67%,
      100% 86%,
      calc(100% - (var(--jr) * 0.45)) 100%,

      100% calc(100% - (var(--jb) * 0.25)),
      83% 100%,
      66% calc(100% - var(--jb)),
      46% 100%,
      27% calc(100% - (var(--jb) * 0.7)),
      7% 100%,
      0% 100%,

      0% 88%,
      calc(var(--jl)) 65%,
      0% 40%,
      calc(var(--jl) * 0.6) 14%,
      0% 0%,

      0% calc(var(--jt) * 0.7)
    );
  }

  .frame--jaggy-v4,
  .img-frame--jaggy-v4 img,
  .wp-block-media-text.mt-frame--jaggy-v4 .wp-block-media-text__media img {
    --jt: 4.8%; --jr: 3.9%; --jb: 6.0%; --jl: 3.4%;
    clip-path: polygon(
      0% 0%,
      14% calc(var(--jt) * 0.9),
      30% 0%,
      48% calc(var(--jt) * 1.1),
      63% 0%,
      82% calc(var(--jt) * 0.6),
      100% calc(var(--jt) * 0.35),

      calc(100% - var(--jr)) 7%,
      100% 25%,
      calc(100% - var(--jr) * 0.9) 44%,
      100% 66%,
      calc(100% - var(--jr) * 0.5) 87%,
      100% 100%,

      100% 100%,
      86% calc(100% - (var(--jb) * 0.25)),
      70% 100%,
      53% calc(100% - var(--jb)),
      38% 100%,
      22% calc(100% - (var(--jb) * 0.85)),
      8% 100%,
      0% 100%,

      calc(var(--jl) * 1.1) 90%,
      0% 67%,
      calc(var(--jl) * 0.7) 46%,
      0% 22%,
      calc(var(--jl) * 0.5) 0%,

      0% 0%
    );
  }

  .frame--jaggy-v5,
  .img-frame--jaggy-v5 img,
  .wp-block-media-text.mt-frame--jaggy-v5 .wp-block-media-text__media img {
    --jt: 5.4%; --jr: 4.4%; --jb: 6.8%; --jl: 3.8%;
    clip-path: polygon(
      0% calc(var(--jt) * 0.5),
      10% 0%, 22% calc(var(--jt) * 1.15),
      36% 0%, 49% calc(var(--jt) * 1.35),
      66% 0%, 80% calc(var(--jt) * 0.9),
      94% 0%, 100% calc(var(--jt) * 0.45),

      100% 6%,
      calc(100% - var(--jr) * 1.00) 24%,
      100% 43%,
      calc(100% - var(--jr) * 0.95) 63%,
      100% 82%,
      calc(100% - var(--jr) * 0.55) 100%,

      100% calc(100% - (var(--jb) * 0.22)),
      87% 100%,
      73% calc(100% - (var(--jb) * 1.00)),
      56% 100%,
      41% calc(100% - (var(--jb) * 0.85)),
      27% 100%,
      13% calc(100% - (var(--jb) * 0.60)),
      0% 100%,

      0% 91%,
      calc(var(--jl) * 1.2) 70%,
      0% 49%,
      calc(var(--jl) * 0.9) 28%,
      0% 9%,
      calc(var(--jl) * 0.5) 0%,

      0% calc(var(--jt) * 0.5)
    );
  }
}

/* ======================================================
   wave (clip-path: path v1〜v5) 依存: @supports
   目的: polygonのカクつきを解消し、ベジェ曲線で滑らかに。
   備考: 参照ボックスは要素境界（%指定）。非対応環境は既存フォールバックに任せる。
====================================================== */
@supports (clip-path: path("M0,0 C0,0 0,0 0,0 Z")) {

  /* 共通適用先（既存と同様） */
  .frame--wave-v1,
  .img-frame--wave-v1 img,
  .wp-block-media-text.mt-frame--wave-v1 .wp-block-media-text__media img {
    /* わずかにうねる、控えめのいびつ波 */
    will-change: clip-path;
    clip-path: path("M 0% 6% \
      C 10% 0%, 20% 12%, 30% 6% \
      C 40% 0%, 60% 12%, 70% 6% \
      C 80% 0%, 90% 10%, 100% 4% \
      C 100% 14%, 92% 24%, 100% 36% \
      C 100% 48%, 92% 58%, 100% 70% \
      C 100% 84%, 92% 94%, 100% 100% \
      C 90% 96%, 80% 88%, 70% 96% \
      C 58% 104%, 42% 88%, 30% 96% \
      C 20% 104%, 10% 92%, 0% 98% \
      C 0% 86%, 8% 74%, 0% 62% \
      C 0% 50%, 8% 38%, 0% 26% \
      C 0% 16%, 8% 8%, 0% 6% Z");
  }

  .frame--wave-v2,
  .img-frame--wave-v2 img,
  .wp-block-media-text.mt-frame--wave-v2 .wp-block-media-text__media img {
    /* 角の位相ズレを強め、少し振幅アップ */
    will-change: clip-path;
    clip-path: path("M 0% 4% \
      C 12% -2%, 24% 10%, 36% 4% \
      C 48% -2%, 64% 10%, 78% 4% \
      C 90% 0%, 96% 8%, 100% 12% \
      C 96% 24%, 88% 34%, 100% 46% \
      C 96% 56%, 88% 66%, 100% 78% \
      C 96% 90%, 88% 100%, 100% 100% \
      C 86% 98%, 72% 90%, 60% 100% \
      C 46% 110%, 34% 90%, 22% 100% \
      C 10% 110%, 6% 96%, 0% 90% \
      C 6% 78%, 14% 66%, 0% 54% \
      C 8% 42%, 14% 30%, 0% 18% \
      C 6% 10%, 4% 6%, 0% 4% Z");
  }

  .frame--wave-v3,
  .img-frame--wave-v3 img,
  .wp-block-media-text.mt-frame--wave-v3 .wp-block-media-text__media img {
    /* 上下は弱め・左右をやや大きく歪ませる */
    will-change: clip-path;
    clip-path: path("M 0% 5% \
      C 14% 0%, 28% 10%, 42% 5% \
      C 56% 0%, 72% 12%, 86% 5% \
      C 94% 2%, 100% 8%, 100% 18% \
      C 92% 28%, 98% 40%, 100% 52% \
      C 94% 64%, 98% 76%, 100% 88% \
      C 94% 98%, 86% 100%, 78% 100% \
      C 64% 94%, 56% 104%, 44% 100% \
      C 30% 96%, 22% 108%, 10% 100% \
      C 2% 96%, 0% 92%, 0% 82% \
      C 8% 70%, -2% 58%, 0% 46% \
      C 8% 34%, -2% 22%, 0% 10% \
      C 2% 7%, 0% 6%, 0% 5% Z");
  }

  .frame--wave-v4,
  .img-frame--wave-v4 img,
  .wp-block-media-text.mt-frame--wave-v4 .wp-block-media-text__media img {
    /* 全辺の振幅を上げ、不規則性（位相）をやや増す */
    will-change: clip-path;
    clip-path: path("M 0% 3% \
      C 10% -4%, 26% 8%, 38% 2% \
      C 52% -3%, 66% 14%, 80% 3% \
      C 90% -2%, 100% 8%, 100% 20% \
      C 94% 30%, 100% 40%, 100% 52% \
      C 92% 64%, 100% 74%, 100% 86% \
      C 90% 100%, 78% 100%, 66% 100% \
      C 54% 94%, 46% 110%, 32% 100% \
      C 22% 92%, 14% 110%, 4% 96% \
      C -2% 88%, 0% 78%, 0% 66% \
      C 10% 56%, -2% 44%, 0% 32% \
      C 8% 20%, -2% 10%, 0% 3% Z");
  }

  .frame--wave-v5,
  .img-frame--wave-v5 img,
  .wp-block-media-text.mt-frame--wave-v5 .wp-block-media-text__media img {
    /* 最も有機的：角周りに“うねり”の山谷を配置 */
    will-change: clip-path;
    clip-path: path("M 0% 7% \
      C 8% -2%, 22% 12%, 34% 6% \
      C 48% -4%, 64% 16%, 78% 6% \
      C 90% -2%, 98% 10%, 100% 18% \
      C 92% 28%, 104% 42%, 100% 54% \
      C 92% 66%, 104% 78%, 100% 90% \
      C 92% 102%, 80% 98%, 70% 100% \
      C 58% 108%, 44% 92%, 32% 100% \
      C 20% 108%, 8% 94%, 0% 98% \
      C 6% 86%, -4% 72%, 0% 60% \
      C 10% 48%, -4% 34%, 0% 22% \
      C 8% 12%, 2% 8%, 0% 7% Z");
  }
}

/* 参考: path()非対応のブラウザ向けフォールバック案（任意）
   1) 既存の polygon-wave をそのまま残す（カクつき許容）
   2) さらに非対応なら既存の border-radius:12px に落ちる（既に実装済） */