/**
 * SimpleFullWide Styles
 */

.wrapper-simple-full-wide {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 垂直・水平配置 */
.valign-top {
    justify-content: flex-start;
}

.valign-center {
    justify-content: center;
}

.valign-bottom {
    justify-content: flex-end;
}

.halign-left {
    align-items: flex-start;
}

.halign-center {
    align-items: center;
}

.halign-right {
    align-items: flex-end;
}

.content-simple-full-wide {
    width: 100%;
    box-sizing: border-box;
    z-index: 2;
    position: relative;
    /* 強制リセット：他プラグインの干渉（透明化）を物理的に遮断 */
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
}

.content-width-normal {
    max-width: 1100px;
    padding: 0 20px;
    margin: 0 auto;
}

.content-width-narrow {
    max-width: 800px;
    padding: 0 20px;
    margin: 0 auto;
}

.content-width-full {
    max-width: 100% !important;
    padding: 0;
}

.halign-right .content-simple-full-wide {
    text-align: right;
}

.halign-center .content-simple-full-wide {
    text-align: center;
}

.halign-left .content-simple-full-wide {
    text-align: left;
}

/* 境界線エフェクト共通 */
.sfw-divider {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 3;
    pointer-events: none;
}

.sfw-divider-top {
    top: -1px;
}

/* 1px重ねて隙間を消す */
.sfw-divider-bottom {
    bottom: -1px;
}

/* 1px重ねて隙間を消す */

.sfw-divider svg {
    display: block;
    width: 200%;
    /* アニメーション用に2倍の幅を許容 */
    height: 100%;
}

/* アニメーション：水平移動(シームレス) */
@keyframes sfw-anim-move-x {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes sfw-anim-move-x-reverse {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

.sfw-anim-move-x {
    animation: sfw-anim-move-x linear infinite;
    width: 200% !important;
}

.sfw-anim-move-x-reverse {
    animation: sfw-anim-move-x-reverse linear infinite;
    width: 200% !important;
}

/* アニメーション：オーロラ (Aura) */
@keyframes sfw-anim-aura {
    0% {
        opacity: 0.3;
        transform: scaleY(1);
    }

    50% {
        opacity: 0.7;
        transform: scaleY(1.2);
    }

    100% {
        opacity: 0.3;
        transform: scaleY(1);
    }
}

.sfw-anim-aura {
    animation: sfw-anim-aura ease-in-out infinite;
    transform-origin: center bottom;
    width: 100% !important;
}

.sfw-divider-top .sfw-anim-aura {
    transform-origin: center top;
}

/* UI ボタン設定 */
.sfw-shape-buttons {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    width: 100%;
    margin-bottom: 20px;
}

.sfw-shape-buttons .components-button {
    justify-content: center;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    padding: 8px 4px !important;
}

.sfw-shape-buttons .components-button.is-primary {
    background: #007cba !important;
    color: #fff !important;
    border-color: #007cba !important;
}

/* エディター用調整 */
.is-root-container>.wp-block-simple-plugin-jp-simple-full-wide,
.editor-styles-wrapper .wrapper-simple-full-wide {
    left: auto;
    right: auto;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
}

.simple-full-wide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
}