/* ==========================================================
   CoreValues_Animation.css
   環輿科技核心價值 SVG 動畫樣式（父層作用域 .CoreValues）
   ========================================================== */

@supports (font-variation-settings: normal) {
    .CoreValues .ui {
        font-family: 'Inter var',system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans TC','PingFang TC','Heiti TC','Microsoft JhengHei',sans-serif;
    }
}

.CoreValues .title {
    font-weight: 700;
    font-size: 3.875rem;
    fill: #0F172A;
}

.CoreValues .label {
    font-weight: 600;
    font-size: 1.875rem;
    fill: #0F172A;
}

@media (prefers-reduced-motion: no-preference) {
    /* ===== Calm Sustained Relay：沉穩接力、長呼吸 ===== */
    :root {
        --cycle: 8s;
    }

    .CoreValues .arc {
        stroke-dasharray: 120 620; 
        stroke-dashoffset: 0;
        opacity: 0;
        animation: drawcircle var(--cycle) linear infinite, fadecycle var(--cycle) cubic-bezier(.4,0,.2,1) infinite;
        will-change: stroke-dashoffset, opacity;
    }

        .CoreValues .arc:nth-of-type(1) {
            animation-delay: 0s,0s
        }

        .CoreValues .arc:nth-of-type(2) {
            animation-delay: 2s,2s
        }

        .CoreValues .arc:nth-of-type(3) {
            animation-delay: 4s,4s
        }

        .CoreValues .arc:nth-of-type(4) {
            animation-delay: 6s,6s
        }

    @keyframes drawcircle {
        to {
            stroke-dashoffset: -720;
        }
    }

    /* 柔和淡入淡出曲線 */
    @keyframes fadecycle {
        0% {
            opacity: 0
        }

        6% {
            opacity: .6
        }

        10% {
            opacity: 1
        }

        22% {
            opacity: 1
        }

        26% {
            opacity: .6
        }

        30% {
            opacity: 0
        }

        100% {
            opacity: 0
        }
    }

    /* 節點脈動與核心呼吸同步 */
    .CoreValues .node {
        transform-box: fill-box;
        transform-origin: 50% 50%;
        animation: pulse calc(var(--cycle)/1.5) ease-in-out infinite;
    }

    @keyframes pulse {
        0%,100% {
            transform: scale(1)
        }

        50% {
            transform: scale(1.08)
        }
    }

    .CoreValues .core {
        animation: glow var(--cycle) ease-in-out infinite;
    }

    @keyframes glow {
        0%,100% {
            filter: url(#soft);
        }

        50% {
            filter: url(#softStrong);
        }
    }

    .CoreValues .grid {
        animation: breathe var(--cycle) ease-in-out infinite;
    }

    @keyframes breathe {
        0%,100% {
            opacity: .10
        }

        50% {
            opacity: .18
        }
    }
}