/**
 * Text Particle Animation CSS
 * ヒーローセクションテキストのパーティクルアニメーション
 */

/* パーティクルアニメーション対応テキスト */
.text-particle-animated {
    position: relative;
    display: inline-block;
    overflow: visible;
}

/* きらっと光る効果（無効化） */
.text-particle-animated::after {
    display: none;
}

@keyframes sparkleFlow {
    0% {
        left: -50%;
        opacity: 0;
    }
    10% {
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    25% {
        left: 100%;
        opacity: 1;
    }
    30% {
        opacity: 0;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

/* 追加のきらめき効果（無効化） */
.text-particle-animated::before {
    display: none;
}

@keyframes sparkleFlowDelayed {
    0% {
        left: -40%;
        opacity: 0;
    }
    12% {
        opacity: 0;
    }
    18% {
        opacity: 1;
    }
    28% {
        left: 100%;
        opacity: 1;
    }
    32% {
        opacity: 0;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}


/* パーティクルキャンバスコンテナ */
.text-particle-canvas-container {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    pointer-events: none;
    z-index: -1;
    overflow: visible;
}

.text-particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* パーティクルアニメーション用のテキストスタイル強化 */
.hero-title .text-particle-animated {
    background: linear-gradient(45deg,
        #1a5490 0%,
        #2980b9 25%,
        #3498db 50%,
        #5dade2 75%,
        #1a5490 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 300% 300%;
    animation: gradientShift 4s ease-in-out infinite;
    position: relative;
    text-shadow: none;
    filter: drop-shadow(0 0 6px rgba(52, 152, 219, 0.4))
           drop-shadow(0 0 12px rgba(52, 152, 219, 0.3))
           drop-shadow(0 0 18px rgba(52, 152, 219, 0.2));
}

/* グラデーションシフトアニメーション */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
        filter: drop-shadow(0 0 6px rgba(52, 152, 219, 0.4))
               drop-shadow(0 0 12px rgba(52, 152, 219, 0.3))
               drop-shadow(0 0 18px rgba(52, 152, 219, 0.2));
    }
    50% {
        background-position: 100% 50%;
        filter: drop-shadow(0 0 8px rgba(93, 173, 226, 0.5))
               drop-shadow(0 0 15px rgba(93, 173, 226, 0.4))
               drop-shadow(0 0 22px rgba(93, 173, 226, 0.25));
    }
    100% {
        background-position: 0% 50%;
        filter: drop-shadow(0 0 6px rgba(52, 152, 219, 0.4))
               drop-shadow(0 0 12px rgba(52, 152, 219, 0.3))
               drop-shadow(0 0 18px rgba(52, 152, 219, 0.2));
    }
}

/* パーティクル発光効果 */
.text-particle-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(52, 152, 219, 0.8) 0%, transparent 70%);
    filter: blur(1px);
    animation: particleFloat 3s ease-in-out infinite;
}

@keyframes particleFloat {
    0%, 100% {
        transform: translateY(0px) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-10px) scale(1.2);
        opacity: 1;
    }
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .text-particle-canvas-container {
        top: -15px;
        left: -15px;
        right: -15px;
        bottom: -15px;
    }
}

@media (max-width: 576px) {
    .text-particle-canvas-container {
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
    }

    .hero-title .text-particle-animated {
        background-size: 200% 200%;
        filter: drop-shadow(0 0 5px rgba(52, 152, 219, 0.35))
               drop-shadow(0 0 10px rgba(52, 152, 219, 0.25))
               drop-shadow(0 0 15px rgba(52, 152, 219, 0.15));
    }
}

/* パフォーマンス最適化 */
.text-particle-canvas {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* アニメーション停止設定（ユーザー設定に配慮） */
@media (prefers-reduced-motion: reduce) {
    .hero-title .text-particle-animated {
        animation: none;
        background: #3498db;
        -webkit-text-fill-color: #3498db;
        color: #3498db;
        filter: drop-shadow(0 0 5px rgba(52, 152, 219, 0.3));
    }

    .text-particle-animated::after,
    .text-particle-animated::before {
        animation: none;
        display: none;
    }

    .text-particle-glow {
        animation: none;
        display: none;
    }
}

/* スマホでのスパークル効果調整 */
@media (max-width: 768px) {
    .text-particle-animated::after {
        animation-duration: 5s;
        width: 40%;
        left: -40%;
        background: linear-gradient(90deg,
            transparent 0%,
            transparent 25%,
            rgba(255, 255, 255, 0.7) 45%,
            rgba(116, 185, 255, 0.5) 50%,
            rgba(255, 255, 255, 0.7) 55%,
            transparent 75%,
            transparent 100%);
    }

    .text-particle-animated::before {
        animation-duration: 7s;
        width: 30%;
        left: -30%;
        background: linear-gradient(90deg,
            transparent 0%,
            transparent 35%,
            rgba(255, 255, 255, 0.5) 48%,
            rgba(52, 152, 219, 0.4) 50%,
            rgba(255, 255, 255, 0.5) 52%,
            transparent 65%,
            transparent 100%);
    }
}