/**
 * Enhanced Text Split Characters Animation - Dynamic Values
 * 値をJavaScriptで動的に設定するため、CSSは基本スタイルのみ
 */

/* 基本的な文字分割スタイル */
[class*="text-split-chars"] {
    display: block;
    text-align: center;
}

[class*="text-split-chars"] .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

/* アニメーション発火時の状態 */
[class*="text-split-chars"].show .char {
    opacity: 1;
    transform: translateY(0);
}

/* フェードイン効果のバリエーション */
/* 基本フェードイン（下から上へ） */
[class*="text-split-chars-fade"] .char {
    opacity: 0;
    transform: translateY(30px) scale(0.8);
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[class*="text-split-chars-fade"].show .char {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 左からフェードイン */
[class*="text-split-chars-fade-left"] .char {
    opacity: 0;
    transform: translateX(-20px);
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[class*="text-split-chars-fade-left"].show .char {
    opacity: 1;
    transform: translateX(0);
}

/* 右からフェードイン */
[class*="text-split-chars-fade-right"] .char {
    opacity: 0;
    transform: translateX(20px);
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[class*="text-split-chars-fade-right"].show .char {
    opacity: 1;
    transform: translateX(0);
}

/* スケールフェードイン */
[class*="text-split-chars-fade-scale"] .char {
    opacity: 0;
    transform: scale(0.5);
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

[class*="text-split-chars-fade-scale"].show .char {
    opacity: 1;
    transform: scale(1);
}

/* 回転フェードイン */
[class*="text-split-chars-fade-rotate"] .char {
    opacity: 0;
    transform: rotate(180deg) scale(0.5);
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

[class*="text-split-chars-fade-rotate"].show .char {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Text Fade Up 動的値対応 */
[class*="text-fade-up"] {
    opacity: 0;
    transform: translateY(30px);
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

[class*="text-fade-up"].show {
    opacity: 1;
    transform: translateY(0);
}

/* レスポンシブ対応 - モバイルでは短縮 */
@media (max-width: 768px) {
    [class*="text-split-chars"] .char {
        transition-duration: 0.4s !important;
    }
}

/* アクセシビリティ対応 */
@media (prefers-reduced-motion: reduce) {
    [class*="text-split-chars"] .char {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* デバッグ用のハイライト（開発時のみ使用） */
.debug [class*="text-split-chars"] {
    background-color: rgba(255, 255, 0, 0.1);
    border: 1px dashed #ccc;
}

.debug [class*="text-split-chars"] .char {
    background-color: rgba(0, 255, 0, 0.1);
    border: 1px solid rgba(0, 255, 0, 0.3);
    margin: 1px;
}