/*
═══════════════════════════════════════════════════════════════
   HOME PAGE — 各區塊樣式
═══════════════════════════════════════════════════════════════
*/

/* ─── HERO · Life Curve ─────────────────────────── */
.hero-curve-wrap {
    position: relative;
    padding: 32px 0 28px;
    /* v0.4.10：拿掉 max-width，讓光暈 ::before 自然跟 viewport 同寬。
       內部 banner / curve / caption 各自設 max-width 並置中。 */
    margin: 0 auto;
    border-bottom: 1px solid var(--linen);
    overflow: hidden;
    min-height: calc(100vh - 70px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* v0.4.11：氛圍光暈完全拿掉（依使用者要求）。
   原本 ::before 在 hero 區產生紫色月暈。
   若要還原，加回 radial-gradient backgrounds。 */
.hero-curve-wrap::before {
    content: none;
}

/* 確保 hero 內容在光暈之上 */
.hero-curve-wrap > * { position: relative; z-index: 1; }

.hero-curve-banner {
    position: relative;
    z-index: 2;
    max-width: 880px;
    margin: 0 auto 18px;
    padding: 0 40px;
    text-align: center;
}

.hero-curve-eyebrow {
    font-family: var(--ff-m);
    font-size: 10.5px;
    letter-spacing: .32em;
    color: var(--mist);
    text-transform: uppercase;
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
}
/* 兩側短線：依使用者要求拿掉（v0.4.5）。
   若要還原，恢復下方 ::before/::after 的 width: 24px / background。 */
.hero-curve-eyebrow::before,
.hero-curve-eyebrow::after {
    content: none;
}

.hero-curve-title {
    font-family: var(--ff-d);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(32px, 4.4vw, 52px);
    line-height: 1.14;
    letter-spacing: -.02em;
    color: var(--twilight);
    max-width: 18ch;
    margin: 0 auto 14px;
}
.hero-curve-title em {
    color: var(--plum);
    font-style: italic;
    font-weight: 400;
}

.hero-curve-sub {
    font-family: var(--ff-cn);
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--mist);
    font-weight: 300;
    max-width: 42ch;
    margin: 0 auto;
}
.lang-en .hero-curve-sub { font-family: var(--ff-en); }

.hero-curve-caption {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 60ch;
    margin: 28px auto 0;
    padding: 0 40px;
    font-family: var(--ff-d);
    font-style: italic;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.7;
    color: var(--mist);
}

/* SVG 曲線 */
.life-curve-scroll {
    width: 100%;
    overflow: visible;
    margin-top: -25px;        /* 往上靠近 Hero 標題，視覺重心上移 */
}
.life-curve-svg {
    display: block;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    height: auto;
    max-height: min(460px, 48vh);
    overflow: visible;
}

.life-curve-path {
    fill: none;
    stroke: var(--bronze);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .9;
    stroke-dasharray: 4000;
    stroke-dashoffset: 4000;
    animation: draw-curve 3.2s var(--ease-moon) .4s forwards;
}
@keyframes draw-curve { to { stroke-dashoffset: 0; } }

.curve-point {
    cursor: pointer;
    opacity: 0;
    animation: fade-point 1s var(--ease-moon) forwards;
    transition: transform .5s var(--ease-moon);
}
.curve-point.point-1 { animation-delay: 1.5s; }
.curve-point.point-2 { animation-delay: 2.0s; }
.curve-point.point-3 { animation-delay: 2.6s; }
.curve-point.point-4 { animation-delay: 3.2s; }
@keyframes fade-point { from { opacity: 0; } to { opacity: 1; } }

.curve-point.is-phase2 {
    opacity: 0;
    animation: fade-phase2 1s var(--ease-moon) 3.2s forwards;
}
@keyframes fade-phase2 { from { opacity: 0; } to { opacity: .62; } }
.curve-point.is-phase2 .moon-main {
    fill: transparent;
    stroke: var(--mist);
    stroke-width: 1.2;
}
.curve-point.is-phase2 .moon-shadow { display: none; }
.curve-point.is-phase2 .curve-num,
.curve-point.is-phase2 .curve-label,
.curve-point.is-phase2 .curve-cta { fill: var(--mist); }

.curve-num {
    font-family: var(--ff-num);
    font-size: 22px;
    fill: var(--mist);
    text-anchor: middle;
    font-weight: 400;
}
.curve-dashring {
    fill: none;
    stroke: var(--bronze);
    stroke-width: .8;
    stroke-dasharray: 2 3;
    opacity: .35;
}
.curve-halo {
    fill: var(--plum);
    opacity: .12;
}
.moon-main { fill: var(--bronze); }
.moon-shadow { fill: var(--bone); }

.curve-label {
    font-family: var(--ff-cn);
    font-size: 14px;
    fill: var(--twilight);
    text-anchor: middle;
    font-weight: 400;
}
.lang-en .curve-label { font-family: var(--ff-en); }
.curve-meta {
    font-family: var(--ff-m);
    font-size: 12px;     /* 與頁面其他最小字體（stat-l, micro）齊高 */
    letter-spacing: .14em;
    fill: var(--mist);
    text-anchor: middle;
}
.curve-cta {
    font-family: var(--ff-m);
    font-size: 12px;     /* 與 meta 對齊，CTA 用粗一點點突顯 */
    letter-spacing: .12em;
    fill: var(--plum);
    text-anchor: middle;
    font-weight: 500;
}
.curve-quote {
    font-family: var(--ff-d);
    font-style: italic;
    font-size: 12px;     /* 與其他小字對齊 */
    fill: var(--mist);
    text-anchor: middle;
}

/* 桌機（支援 hover 的裝置）：quote 預設隱藏，hover 錨點才顯示。
   手機觸控裝置維持永遠顯示，因為沒有 hover 概念。*/
@media (hover: hover) {
    .curve-quote {
        opacity: 0;
        transition: opacity .35s var(--ease-moon);
    }
    .curve-point:hover .curve-quote,
    .curve-point:focus-within .curve-quote {
        opacity: 1;
    }
}

.curve-point:hover { transform: translateY(-2px); }
.curve-point:hover .moon-main { fill: var(--plum); }
.curve-point:hover .curve-halo { opacity: .25; }

/* Hero clouds — v0.4.14：依使用者要求關閉雲朵動畫。
   保留 .cloud 樣式定義以備未來啟用，display:none 確保完全不渲染。 */
.hero-clouds {
    display: none;
}
.cloud {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0;
    will-change: transform, opacity;
}
.cloud-1 {
    width: 600px; height: 240px; top: 8%;
    background: radial-gradient(ellipse, rgba(168,181,201,calc(.18 * var(--glow-strength))) 0%, transparent 70%);
    animation: drift-right 90s linear infinite;
}
.cloud-2 {
    width: 820px; height: 300px; top: 42%;
    background: radial-gradient(ellipse, rgba(138,122,170,calc(.14 * var(--glow-strength))) 0%, transparent 70%);
    animation: drift-right 130s linear -50s infinite;
}
.cloud-3 {
    width: 500px; height: 200px; top: 18%;
    background: radial-gradient(ellipse, rgba(168,181,201,calc(.14 * var(--glow-strength))) 0%, transparent 70%);
    animation: drift-right 110s linear -80s infinite;
}
.cloud-4 {
    width: 680px; height: 260px; top: 60%;
    background: radial-gradient(ellipse, rgba(138,122,170,calc(.12 * var(--glow-strength))) 0%, transparent 70%);
    animation: drift-right 160s linear -110s infinite;
}
@keyframes drift-right {
    0%   { transform: translateX(-50%); opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateX(110vw); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .cloud { animation: none; opacity: .5; }
}


/* ─── STATS ─────────────────────────────────────── */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px;
    max-width: var(--max);
    margin: 0 auto;
    padding: 60px 40px;
    border-bottom: 1px solid var(--linen);
}
.stat {
    text-align: center;
}
/* 每個 stat 都有這個 18px 的「點點槽位」。
   有點點的（第一個）會放進去，沒點點的也保留空間。
   確保所有數字從同一個 Y 位置開始。*/
.stat-marker {
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 6px;
}
.stat-dot {
    /* v0.4.10：依使用者要求拿掉「8 上方紫色點」，HTML 已經移除，CSS 也加 display:none 防呆 */
    display: none;
}
@keyframes pulse {
    0%,100% { opacity: 1;   transform: scale(1); }
    50%     { opacity: .35; transform: scale(.6); }
}
.stat-n {
    font-family: var(--ff-num);
    font-size: clamp(40px, 5vw, 60px);
    font-weight: 300;
    color: var(--twilight);
    line-height: 1;
    letter-spacing: -.02em;
    /* lining-nums = 統一高度，全部站在 baseline 到 cap 線
       tabular-nums = 等寬，讓 1:1 跟 8 佔一樣寬，欄位才能對齊 */
    font-variant-numeric: lining-nums tabular-nums;
}
.stat-l {
    font-size: 12px;
    color: var(--mist);
    margin-top: 10px;
    line-height: 1.5;
}


/* ─── EDITORIAL CARDS ───────────────────────────── */
.cards-section {
    padding: 100px 0;
    border-bottom: 1px solid var(--linen);
}
.home-cards-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 40px;
    margin-bottom: 50px;
}
.home-cards-head .num {
    font-family: var(--ff-num);
    font-size: 60px;
    color: var(--linen-2);
    font-weight: 300;
    line-height: 1;
}
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}
.card-cell {
    background: var(--bone-2);
    padding: 32px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-decoration: none;
    color: inherit;
    transition: transform .4s var(--ease-moon);
}
.card-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.card-eyebrow .dot {
    width: 4px; height: 4px;
    background: var(--plum);
    border-radius: 50%;
}
.card-title {
    font-family: var(--ff-d);
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 300;
    line-height: 1.25;
    color: var(--twilight);
    letter-spacing: -.01em;
}
.lang-en .card-title { font-style: italic; }
.card-body {
    font-size: 14px;
    line-height: 1.75;
    color: var(--mist);
    font-weight: 300;
    flex: 1;
}
.card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--linen);
}
.card-count {
    font-family: var(--ff-m);
    font-size: 10px;
    letter-spacing: .14em;
    color: var(--mist);
    text-transform: uppercase;
}


/* ─── PHASE JOURNEY ─────────────────────────────── */
.phase-wrap {
    padding: 100px 0 80px;
    background: var(--bone-2);
    border-bottom: 1px solid var(--linen);
    position: relative;
}
.phase-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 40px;
    margin-bottom: 50px;
}
/* eyebrow 跟下方 display-m 標題拉開距離 */
.phase-head .eyebrow {
    margin-bottom: 16px;
}
.phase-sub-r {
    font-family: var(--ff-d);
    font-style: italic;
    font-size: 13px;
    color: var(--mist);
    text-align: right;
    max-width: 30ch;
    line-height: 1.6;
}

.phase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 32px;
    /* 不管深色／淺色模式，這個 grid 都強制深底（依 wireframe 設計） */
    background: #161A24;
    padding: 50px 40px;
    border: 1px solid rgba(168, 181, 201, .18);
}
.phase-item {
    text-align: center;
    color: rgba(168, 181, 201, .85);
}
/* 內部所有文字強制亮色，因為背景固定深色 */
.phase-grid .phase-num     { color: rgba(232, 235, 240, .82); }
.phase-grid .phase-eyebrow { color: rgba(168, 181, 201, .75); }
.phase-grid .phase-title   { color: rgba(232, 235, 240, .95); }
.phase-grid .phase-body    { color: rgba(168, 181, 201, .80); }
.phase-grid .phase-moon    { color: rgba(232, 235, 240, .85); }
.phase-moon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    color: var(--bronze);
    display: flex;
    align-items: center;
    justify-content: center;
}
.phase-moon-svg,
.phase-moon-img,
.phase-moon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* v0.9.28：與 Tools 頁共用同一組月相 SVG，樣式也要跟著對齊 */
.phase-moon svg .ring   { fill: none; stroke: currentColor; stroke-width: .5; opacity: .45; }
.phase-moon svg .light  { fill: currentColor; }
.phase-moon svg .shadow { fill: var(--bone-2, var(--bone)); }
.phase-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
}
.phase-num {
    font-family: var(--ff-num);
    font-size: 40px;
    font-weight: 300;
    color: var(--mist);
    line-height: 1;
}
.phase-title {
    font-family: var(--ff-d);
    font-style: italic;
    color: var(--twilight);
    margin-bottom: 12px;
}
.phase-body {
    font-size: 13px;
    max-width: 22ch;
    margin: 0 auto;
}

.phase-quote {
    text-align: center;
    font-size: clamp(18px, 2.2vw, 24px);
    margin: 50px auto 0;
    max-width: 38ch;
    line-height: 1.5;
}
.phase-ctas {
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: center;
    margin-top: 36px;
    flex-wrap: wrap;
}


/* ─── CROSS-BRAND ───────────────────────────────── */
.cross {
    padding: 100px 0;
    border-bottom: 1px solid var(--linen);
}
.cross-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.cross-card {
    background: var(--bone-2);
    padding: 40px;
    min-height: 220px;
    display: flex;
    flex-direction: column;
}


/* ─── QUOTE ─────────────────────────────────────── */
.quote-section {
    padding: 100px 0;
    border-bottom: 1px solid var(--linen);
}
.quote-section blockquote {
    line-height: 1.5;
}


/* ─── 手機版調整 ─────────────────────────────────── */
@media (max-width: 880px) {
    .home-cards-head,
    .phase-head,
    .cross-inner {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .home-cards-head .num { font-size: 40px; }
    .phase-sub-r { text-align: left; }
    .stats { padding: 40px 24px; gap: 16px; }
    .cards-section, .phase-wrap, .cross, .quote-section { padding: 60px 0; }
    .phase-grid { padding: 30px 20px; gap: 24px; }

    /* ─── Hero · Life Curve · 手機緊湊版 ───
       策略：
       1. wrap 撐滿 100svh，扣掉 nav 高度
       2. Hero 區塊的 padding / margin 壓到最小，盡量留空間給曲線
       3. SVG 寬度從 1400 降到 1000（橫向捲動仍保留，但更不誇張）
       4. SVG 高度跟著比例縮（1000 × 440/1200 = 367px），塞得進一屏
    */
    .hero-curve-wrap {
        position: relative;
        min-height: calc(100svh - 60px);
        padding: 8px 0 10px;          /* 上下 padding 極小 */
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
    }
    .hero-curve-banner {
        margin: 0 auto 2px;           /* 銜接曲線的 margin 極小 */
        padding: 0 20px;
    }
    .hero-curve-title {
        font-size: 28px;
        line-height: 1.18;
        margin-bottom: 8px;
    }
    .hero-curve-sub {
        font-size: 13px;
        line-height: 1.55;
    }

    /* 容器：橫向捲動，4 個月相依序滑過去 */
    .life-curve-scroll {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 20px 6px;
        margin-top: -25px;              /* 跟桌機版一致，曲線往上靠 */
    }
    .life-curve-scroll::-webkit-scrollbar {
        display: none;
    }
    .life-curve-svg {
        width: 1000px;                /* 從 1400 縮到 1000，整體更緊湊 */
        max-width: 1000px;
        max-height: none;
    }

    /* caption 緊一點 */
    .hero-curve-caption {
        margin-top: 8px;
        padding: 0 20px;
        font-size: 13px;
        line-height: 1.55;
    }

    /* 右側淡出：暗示可以橫向滑動 */
    .hero-curve-wrap::after {
        content: '';
        position: absolute;
        right: 0;
        top: 38%;
        bottom: 28%;
        width: 28px;
        background: linear-gradient(to right, transparent, var(--bone));
        pointer-events: none;
        z-index: 3;
    }
}


/* ═══════════════════════════════════════════════════════════════
   夜信邀請 .letters-invite（v0.8.0）
   首頁通往 Night Murmur 夜信森林的入口區塊。
   進場動畫用主題既有的 .moon-watch（捲動觸發，reveal.js）。
═══════════════════════════════════════════════════════════════ */
.letters-invite{position:relative;max-width:var(--max-narrow);margin:0 auto;padding:110px 40px 120px;text-align:center;}
.li-moon{width:9px;height:9px;border-radius:50%;background:var(--bronze);box-shadow:0 0 18px rgba(168,181,201,calc(var(--glow-strength) * .9));margin:0 auto 26px;}
.li-eyebrow{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.3em;color:var(--bronze);text-transform:uppercase;margin-bottom:18px;}
.li-title{font-family:var(--ff-d);font-style:italic;font-weight:300;font-size:clamp(28px,4vw,40px);line-height:1.35;color:var(--twilight);margin-bottom:22px;}
.li-body{font-size:15px;line-height:2.1;color:var(--mist);max-width:var(--max-prose);margin:0 auto 34px;}
.li-places{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:760px;margin:6px auto 44px;}
.li-place{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;padding:10px 8px;border-radius:12px;transition:transform var(--t-hover) var(--ease-moon);}
.li-place:hover{transform:translateY(-3px);}
.li-ic{width:38px;height:46px;color:var(--mist);transition:color var(--t-hover) var(--ease-moon);}
.li-ic svg{width:100%;height:100%;}
.li-place:hover .li-ic{color:var(--plum-hi);}
.li-name{font-family:var(--ff-d);font-style:italic;font-weight:300;font-size:17.5px;color:var(--twilight);}
.li-line{font-size:13px;line-height:1.85;color:var(--mist);max-width:21ch;}
.li-cta{display:inline-block;font-family:var(--ff-m);font-size:12px;letter-spacing:.2em;color:var(--bronze-hi);text-decoration:none;padding-bottom:4px;border-bottom:1px solid var(--linen-2);transition:color var(--t-hover) var(--ease-moon),border-color var(--t-hover) var(--ease-moon),transform var(--t-hover) var(--ease-moon);}
.li-cta:hover{color:var(--plum-hi);border-color:var(--plum-hi);transform:translateX(4px);}
@media (max-width:640px){.letters-invite{padding:80px 24px 90px;}.li-places{grid-template-columns:1fr;gap:30px;}}

/* 夜信入口：自訂上傳圖示（v0.8.3）。提醒：上傳的 SVG 以原樣顯示，
   不會像內建圖示那樣 hover 變色。 */
.li-ic img{width:100%;height:100%;object-fit:contain;display:block;}