@charset "UTF-8";

/**
 * ブロックスタイル（functions/block-styles.php で登録）
 * 編集画面とフロントの両方に読み込む
 */


/* =========================================================
 * Snow Monkey Blocks / ボタン：にじみ（is-style-nijimi）
 * 背景は ::before に分けて SVG フィルター（#ink-bleed-filter）をかけ、文字はくっきりのまま
 * 背景色・文字色・角丸はブロックの設定（--smb-btn--〜）を使う。未設定のときは下の色
 * ========================================================= */
.smb-btn-wrapper.is-style-nijimi .smb-btn {
    --smb-btn--background-color: var(--accent-color);  /* 背景色（ブロックで色を選ぶとそちらが優先） */
    --smb-btn--color: #fff;                /* 文字色 */
    --mg-nijimi-border-width: 1.5px;       /* 縁の太さ */
    --mg-nijimi-border-darken: 20%;        /* 縁を背景色よりどれだけ暗くするか */

    position: relative;
    isolation: isolate;
    gap: .5rem;
    align-items: center;
    font-weight: 700;
    letter-spacing: .04em;
    border: none;
    transition: transform .15s ease;
}

/* 背景はにじみの層（::before）だけで描く */
.smb-btn-wrapper.is-style-nijimi .smb-btn,
.smb-btn-wrapper.is-style-nijimi .smb-btn[style*="background-color:"] {
    background-color: transparent !important;
    background-image: none !important;
}

.smb-btn-wrapper.is-style-nijimi .smb-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: var(--smb-btn--border-radius);
    background-color: var(--smb-btn--background-color);
    background-image: var(--smb-btn--background-image);
    border: var(--mg-nijimi-border-width) solid color-mix(in srgb, var(--smb-btn--background-color), var(--smb-btn--background-color) var(--mg-nijimi-border-darken));
    filter: url(#ink-bleed-filter);
    pointer-events: none;
    transition: background-color .2s, border-color .2s;
}

/* ホバーで少し浮く（Snow Monkey 標準の暗くなる効果は外す） */
@media (any-hover: hover) {
    .smb-btn-wrapper.is-style-nijimi .smb-btn:hover {
        filter: none;
        transform: translateY(-2px);
    }
}

.smb-btn-wrapper.is-style-nijimi .smb-btn:active {
    transform: translateY(1px);
}


/* =========================================================
 * Snow Monkey Blocks / ボタン：にじみ（線）（is-style-nijimi-line）
 * ゴーストと同じく背景は透明で、線だけを ::before に描いてにじみフィルター（#ink-bleed-filter）をかける
 * 線の色はブロックの「背景色」、文字色は「文字色」（未設定なら線と同じ色）
 * 背景色が未設定なら、ゴーストと同じく周りの文字色（currentColor）
 * ========================================================= */
.smb-btn-wrapper.is-style-nijimi-line .smb-btn {
    --smb-btn--background-color: currentColor;            /* 線の色（ブロックで背景色を選ぶとそちらが優先） */
    --smb-btn--color: var(--smb-btn--background-color);   /* 文字色（ブロックで文字色を選ぶとそちらが優先） */
    --mg-nijimi-line-width: 2px;                          /* 線の太さ */

    position: relative;
    isolation: isolate;
    gap: .5rem;
    align-items: center;
    font-weight: 700;
    letter-spacing: .04em;
    border: none;
    transition: transform .15s ease;
}

.smb-btn-wrapper.is-style-nijimi-line .smb-btn,
.smb-btn-wrapper.is-style-nijimi-line .smb-btn[style*="background-color:"] {
    background-color: transparent !important;
    background-image: none !important;
}

.smb-btn-wrapper.is-style-nijimi-line .smb-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: var(--smb-btn--border-radius);
    border: var(--mg-nijimi-line-width) solid var(--smb-btn--background-color);
    filter: url(#ink-bleed-filter);
    pointer-events: none;
    transition: border-color .2s;
}

/* ホバーで少し浮く（Snow Monkey 標準の暗くなる効果は外す） */
@media (any-hover: hover) {
    .smb-btn-wrapper.is-style-nijimi-line .smb-btn:hover {
        filter: none;
        transform: translateY(-2px);
    }
}

.smb-btn-wrapper.is-style-nijimi-line .smb-btn:active {
    transform: translateY(1px);
}


/* =========================================================
 * 画像：フチ（にじみ）（is-style-nijimi-edge）
 * 周囲だけをインクがにじんだように不規則に欠けさせる（SVG フィルター #ink-bleed-mask）
 * 欠ける幅は block-styles.php の #ink-bleed-mask の scale で調整
 * ========================================================= */
.wp-block-image.is-style-nijimi-edge img {
    filter: url(#ink-bleed-mask);
}


/* =========================================================
 * 画像：角丸（にじみ）（is-style-nijimi-round）
 * 正方形に切り抜き、クロソイド曲線の角丸マスクをかける（縁のにじみはマスクに描き込み済み）
 * ブロックで縦横比を選んでいても正方形にする
 * ========================================================= */
.wp-block-image.is-style-nijimi-round img {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    object-fit: cover !important;
    -webkit-mask: url(../img/mask-clothoid.svg) center / 100% 100% no-repeat;
    mask: url(../img/mask-clothoid.svg) center / 100% 100% no-repeat;
}