@charset "utf-8";

/* ==========================================================================
   執簡顧問 — 捲動動效層
   與 site.css 分離：不需要動效時，移除頁面上的 motion.css 與 motion.js
   兩行即可完全還原，site.css 不含任何動效依賴。
   ========================================================================== */

/* ---------- 一、逐字浮現（僅用於 h1 與區塊主標） ---------- */

.mo-ch {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.42em);
    transition:
        opacity 0.44s cubic-bezier(.2,.7,.3,1),
        transform 0.44s cubic-bezier(.2,.7,.3,1);
    transition-delay: calc(var(--i, 0) * 0.026s);
}

.is-in .mo-ch {
    opacity: 1;
    transform: none;
}

/* ---------- 二、區塊浮現（段落、卡片、階梯、圖片） ---------- */

.mo {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.62s cubic-bezier(.2,.7,.3,1),
        transform 0.62s cubic-bezier(.2,.7,.3,1);
    transition-delay: calc(var(--i, 0) * 0.085s);
}

.mo.is-in {
    opacity: 1;
    transform: none;
}

/* 引言與眉標多帶一點側移，讓層次不要全部同一個方向 */
.mo--side {
    transform: translateY(0) translateX(-10px);
}

.mo--side.is-in {
    transform: none;
}

/* 眉標左側的短線隨之展開 */
.eyebrow.mo {
    position: relative;
    padding-left: 0;
}

.eyebrow.mo::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.5rem;
    height: 1px;
    width: 0;
    background: var(--seal);
    transition: width 0.7s cubic-bezier(.2,.7,.3,1) 0.15s;
}

.eyebrow.mo.is-in::after {
    width: 2.4rem;
}

/* 主視覺圖：淡入並微微收束，避免單純位移顯得廉價 */
.page-hero-visual.mo {
    transform: translateY(18px) scale(0.985);
}

.page-hero-visual.mo.is-in {
    transform: none;
    transition-duration: 0.85s;
}

/* ==========================================================================
   三、點線面圖示（方向 C｜脈動）
   ========================================================================== */

/* 放大圖示欄，讓圖示成為版面的一個支點，而不是角落的裝飾 */
@media (min-width: 52rem) {
    .ladder .rung {
        grid-template-columns: 7rem 15rem 1fr;
    }
}

.rung__glyph {
    display: block;
    width: 5.75rem;
    height: 5.75rem;
    margin-top: 1rem;
    overflow: visible;
}

@media (max-width: 51.99rem) {
    .rung__glyph {
        width: 5rem;
        height: 5rem;
        margin-top: 0.75rem;
    }
}

.rung__glyph * {
    transform-box: fill-box;
    transform-origin: center;
}

.rung__glyph .anim {
    opacity: 0;
}

.rung.is-playing .rung__glyph .anim {
    opacity: 1;
}

/* ---------- 點：持續脈動 ---------- */

.rung.is-playing .c-dot { animation: moPop 0.5s cubic-bezier(.2,.8,.3,1) both; }
.rung.is-playing .c-ring1 { animation: moRing 2.1s ease-out 0.3s infinite; }
.rung.is-playing .c-ring2 { animation: moRing 2.1s ease-out 1.35s infinite; }

@keyframes moPop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

@keyframes moRing {
    0%   { transform: scale(0.9); opacity: 0.7; }
    100% { transform: scale(3.4); opacity: 0; }
}

/* ---------- 線：兩點拉成一線，光點持續行進 ---------- */

.rung.is-playing .c-p1 { animation: moPop 0.45s cubic-bezier(.2,.8,.3,1) both; }
.rung.is-playing .c-p2 { animation: moPop 0.45s cubic-bezier(.2,.8,.3,1) 0.25s both; }
.rung.is-playing .c-ln { animation: moDraw 0.9s cubic-bezier(.5,0,.2,1) 0.55s both; }
.rung.is-playing .c-spark { animation: moSpark 1.9s cubic-bezier(.4,0,.6,1) 1.3s infinite; }

@keyframes moDraw {
    from { stroke-dashoffset: 52; opacity: 1; }
    to   { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes moSpark {
    0%   { transform: translate(0, 0); opacity: 0; }
    12%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translate(40px, -28px); opacity: 0; }
}

/* ---------- 面：六道線發散後收攏 ---------- */

.rung.is-playing .c-ray { animation: moRayOut 0.75s cubic-bezier(.2,.7,.3,1) both; }
.rung.is-playing .c-ray:nth-child(1) { animation-delay: 0.1s; }
.rung.is-playing .c-ray:nth-child(2) { animation-delay: 0.2s; }
.rung.is-playing .c-ray:nth-child(3) { animation-delay: 0.3s; }
.rung.is-playing .c-ray:nth-child(4) { animation-delay: 0.4s; }
.rung.is-playing .c-ray:nth-child(5) { animation-delay: 0.5s; }
.rung.is-playing .c-ray:nth-child(6) { animation-delay: 0.6s; }
.rung.is-playing .c-face { animation: moGather 1s cubic-bezier(.3,.7,.3,1) 1.25s both; }
.rung.is-playing .c-core { animation: moPop 0.4s cubic-bezier(.2,.8,.3,1) both; }

@keyframes moRayOut {
    from { transform: scale(0.15); opacity: 0; }
    to   { transform: scale(1); opacity: 0.85; }
}

@keyframes moGather {
    from { transform: scale(1.5); opacity: 0; }
    to   { transform: scale(1); opacity: 0.2; }
}

/* ==========================================================================
   四、無障礙：使用者在系統關閉動態時，全部靜止呈現終點狀態
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .mo-ch,
    .mo,
    .rung__glyph * {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .eyebrow.mo::after { width: 2.4rem !important; }
    .rung__glyph .c-face { opacity: 0.2 !important; }
}