/**
 * Text Effects Block Styles
 *
 * @package Forgeee
 * @subpackage Blocks
 */

/* ==============================================
   共通スタイル
   ============================================== */
.fg-text-effects {
    position: relative;
    width: 100%;
    padding: 0;
}

/* 改行を保持、連続スペースは1つに（nl2br()の代わり） */
.fg-text-effects h1,
.fg-text-effects h2,
.fg-text-effects h3,
.fg-text-effects h4,
.fg-text-effects h5,
.fg-text-effects h6,
.fg-text-effects p,
.fg-text-effects div {
    white-space: pre-line;
}

/* フルワイド表示 */
.fg-text-effects.full-width {
    margin-left: calc(-1 * var(--global-content-edge-padding, 25px));
    margin-right: calc(-1 * var(--global-content-edge-padding, 25px));
    width: calc(100% + 2 * var(--global-content-edge-padding, 25px));
    max-width: none;
    overflow: hidden;
}

/* Kadence対応 */
.kb-row-layout-wrap .fg-text-effects.full-width,
.wp-block-kadence-rowlayout .fg-text-effects.full-width {
    margin-left: calc(-1 * var(--global-content-edge-padding, 25px));
    margin-right: calc(-1 * var(--global-content-edge-padding, 25px));
    width: calc(100% + 2 * var(--global-content-edge-padding, 25px));
    overflow: hidden;
}

/* ==============================================
   Scrolling カテゴリ
   ============================================== */
.fg-text-effects.category-scrolling .fg-scrolling-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.fg-text-effects.category-scrolling .fg-scrolling-content {
    display: flex;
    width: fit-content;
    will-change: transform;
    position: relative;
    z-index: 1;
}

/* 横スクロール（左→右、右→左） */
.fg-text-effects.category-scrolling .fg-scrolling-content {
    flex-direction: row;
    gap: 40px;
}

/* 縦スクロール（上→下、下→上） */
.fg-text-effects.category-scrolling.vertical .fg-scrolling-container {
    height: 100%;
}

.fg-text-effects.category-scrolling.vertical .fg-scrolling-content {
    flex-direction: column;
    gap: 20px;
}

.fg-text-effects.category-scrolling .fg-scrolling-text {
    white-space: pre-line;
    flex-shrink: 0;
}

/* アニメーション: 右→左 */
@keyframes scroll-right-to-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* アニメーション: 左→右 */
@keyframes scroll-left-to-right {
    from {
        transform: translateX(-50%);
    }
    to {
        transform: translateX(0);
    }
}

/* アニメーション: 下→上 */
@keyframes scroll-down-to-up {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-50%);
    }
}

/* アニメーション: 上→下 */
@keyframes scroll-up-to-down {
    from {
        transform: translateY(-50%);
    }
    to {
        transform: translateY(0);
    }
}

/* ==============================================
   Reveal 表示エフェクト（マスク付き）
   ============================================== */
.fg-text-effects.display-reveal .fg-reveal-container {
    display: block;
}

.fg-text-effects.display-reveal .fg-reveal-text {
    display: block;
}

/* マスクラッパー */
.fg-text-effects.display-reveal .reveal-line-wrapper {
    overflow: hidden;
    display: block;
}

/* 行ごと */
.fg-text-effects.display-reveal .reveal-line {
    display: inline-block;
    margin: 0;
    padding: 0;
    transform: translateY(120%);
    will-change: transform;
}

/* 文字ごと: .reveal-lineのtransformをリセット */
.fg-text-effects.display-reveal .reveal-line:has(.reveal-char) {
    transform: none;
}

/* 文字ごと */
.fg-text-effects.display-reveal .reveal-char {
    display: inline-block;
    transform: translateY(120%);
    will-change: transform;
}


/* ==============================================
   Fade Blur 表示エフェクト
   ============================================== */
.fg-text-effects.display-fade_blur .fg-fade-blur-container {
    position: relative;
}

.fg-text-effects.display-fade_blur .fg-fade-blur-text {
    display: block;
}

/* 行ごと */
.fg-text-effects.display-fade_blur .fade-blur-line {
    display: block;
    margin: 0;
    padding: 0;
}

/* 文字ごと */
.fg-text-effects.display-fade_blur .fade-blur-char {
    display: inline-block;
}

/* ==============================================
   Fade 表示エフェクト
   ============================================== */
.fg-text-effects.display-fade .fg-fade-container {
    display: block;
}

.fg-text-effects.display-fade .fg-fade-text {
    display: block;
}

/* 行ごと */
.fg-text-effects.display-fade .fade-line {
    display: block;
    margin: 0;
    padding: 0;
}

/* 文字ごと */
.fg-text-effects.display-fade .fade-char {
    display: inline-block;
}

/* ==============================================
   Glitch 表示エフェクト
   ============================================== */
.fg-text-effects.display-glitch .fg-glitch-container {
    position: relative;
    display: block;
}

.fg-text-effects.display-glitch .fg-glitch-text {
    display: block;
}

/* 行ごと */
.fg-text-effects.display-glitch .glitch-line {
    display: block;
    margin: 0;
    padding: 0;
    will-change: transform, text-shadow, opacity;
}

/* ==============================================
   Static カテゴリ（エフェクトなし）
   ============================================== */
.fg-text-effects.category-static.display-none .fg-static-container {
    position: relative;
}

.fg-text-effects.category-static.display-none .fg-static-text {
    /* エフェクトなし、通常のテキスト表示 */
}

/* ==============================================
   アクセシビリティ対応
   ============================================== */
@media (prefers-reduced-motion: reduce) {
    .fg-text-effects * {
        animation: none !important;
        transition: none !important;
    }

    .fg-text-effects .fg-reveal-text span,
    .fg-text-effects .fg-fade-blur-text,
    .fg-text-effects .fg-fade-text {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

/* ==============================================
   エディタプレビュー調整
   ============================================== */
.wp-block-acf-forgeee-text-effects {
    min-height: 100px;
}