/*
═══════════════════════════════════════════════════════════════
   ANIMATIONS — 氛圍動畫
   星空、雲飄、moon-reveal 進場、紙紋
═══════════════════════════════════════════════════════════════
*/

/* ─── 紙紋（subtle noise overlay）─────────── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .03;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.14  0 0 0 0 0.20  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    mix-blend-mode: screen;
}
[data-theme="light"] body::before {
    mix-blend-mode: multiply;
    opacity: .045;
}

/* ═══════════════════════════════════════════════════════════════
   氛圍光暈（v0.4.12 照 Anny_Chen_Site 原檔規格還原）
   - body::before：paper grain noise（紙紋顆粒感，opacity 0.03-0.045）
   - body::after： 右上 plum 月暈（60vw box，top -20% right -15%）
   - .atmos-warm：左下 moonlight 冷光（55vw box）
   組合起來才是 Night Murmur 的「夜晚氛圍感」。
═══════════════════════════════════════════════════════════════ */

/* 紙紋顆粒：SVG noise 透過 mix-blend-mode 融進背景 */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.14  0 0 0 0 0.20  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    mix-blend-mode: screen;
    opacity: .03;
}
[data-theme="light"] body::before {
    mix-blend-mode: multiply;
    opacity: .045;
}

/* 右上紫色月暈：精準復刻 Anny_Chen_Site.html 規格（.22 / .06）。
   原 calc(.22 * var(--glow-strength)) 因為 --glow-strength 預設 .6 會弱化光暈，
   改 hardcode 原檔值。卡片 / 按鈕的 box-shadow 還是用 --glow-strength。 */
body::after {
    content: '';
    position: fixed;
    top: -20%;
    right: -15%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle,
        rgba(138, 122, 170, .22) 0%,
        rgba(138, 122, 170, .06) 35%,
        transparent 60%);
    pointer-events: none;
    z-index: 0;
    transition: background .8s var(--ease-moon);
}
[data-theme="light"] body::after {
    background: radial-gradient(circle,
        rgba(92, 97, 130, .16) 0%,
        rgba(92, 97, 130, .04) 35%,
        transparent 60%);
}

/* 左下藍灰冷光：原檔 .10 / .12 */
.atmos-warm {
    position: fixed;
    display: block;
    bottom: -25%;
    left: -15%;
    width: 55vw;
    height: 55vw;
    background: radial-gradient(circle,
        rgba(168, 181, 201, .10) 0%,
        transparent 55%);
    pointer-events: none;
    z-index: 0;
    transition: background .8s var(--ease-moon);
}
[data-theme="light"] .atmos-warm {
    background: radial-gradient(circle,
        rgba(120, 128, 150, .12) 0%,
        transparent 55%);
}


/* ─── 星空 ──────────────────────────────────
   用 mask 技巧：mask SVG 定義星星「形狀與透明度」，
   background-color 決定「顏色」。ACF 可以改顏色。
─────────────────────────────────────────── */
.starfield {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .85;
    /* 深色模式預設：奶白色星星 */
    background-color: var(--star-color-dark, rgba(232, 235, 240, 1));
    -webkit-mask-image: url("../starfield.svg");
            mask-image: url("../starfield.svg");
    -webkit-mask-size: 800px 800px;
            mask-size: 800px 800px;
    -webkit-mask-repeat: repeat;
            mask-repeat: repeat;
    transition: background-color .6s var(--ease-moon), opacity .6s var(--ease-moon);
}
[data-theme="light"] .starfield {
    /* 淺色模式預設：白色星星 */
    background-color: var(--star-color-light, #FFFFFF);
    opacity: 1;
}
[data-theme="light"] .starfield {
    opacity: 1;
}


/* ─── 滑鼠游標 · 月亮點 + 光暈 ─────────────
   月亮主點：跟著游標，使用 mix-blend-mode 自動適應背景
   光暈：稍微落後追隨，hover 互動元素時放大
─────────────────────────────────────────── */
.moon-cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(232, 235, 240, .92);
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    transition: width .25s var(--ease-moon),
                height .25s var(--ease-moon),
                background .25s var(--ease-moon);
    mix-blend-mode: difference;
}
.moon-cursor-halo {
    position: fixed;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(168, 181, 201, .5);
    background: radial-gradient(circle, rgba(168, 181, 201, .10) 0%, transparent 70%);
    pointer-events: none;
    z-index: 99998;
    transform: translate(-50%, -50%);
    transition: width .35s var(--ease-moon),
                height .35s var(--ease-moon),
                border-color .35s var(--ease-moon),
                opacity .35s var(--ease-moon);
}
/* 淺色模式：點變深色，移除 difference blending */
[data-theme="light"] .moon-cursor-dot {
    background: rgba(26, 32, 48, .88);
    mix-blend-mode: normal;
}
[data-theme="light"] .moon-cursor-halo {
    border-color: rgba(92, 97, 130, .40);
    background: radial-gradient(circle, rgba(92, 97, 130, .07) 0%, transparent 70%);
}

/* hover 在連結/按鈕上：光暈放大 */
.moon-cursor-halo.is-hover {
    width: 44px;
    height: 44px;
    border-color: rgba(168, 181, 201, .85);
    background: radial-gradient(circle, rgba(168, 181, 201, .18) 0%, transparent 70%);
}
[data-theme="light"] .moon-cursor-halo.is-hover {
    border-color: rgba(92, 97, 130, .70);
    background: radial-gradient(circle, rgba(92, 97, 130, .13) 0%, transparent 70%);
}

/* 閒置淡出：cursor.js 偵測滑鼠 2 秒沒動就加 .is-idle，視覺消失但不阻擋 */
.moon-cursor-dot.is-idle,
.moon-cursor-halo.is-idle {
    opacity: 0;
    transition: opacity .5s var(--ease-moon);
}

/* 觸控裝置（手機/平板）：完全隱藏自訂游標 */
@media (hover: none) {
    .moon-cursor-dot,
    .moon-cursor-halo { display: none; }
}

/* 桌機：把預設游標藏起來，改用自訂的 */
@media (hover: hover) {
    * { cursor: none; }
    /* 輸入框維持 text 游標，方便編輯 */
    input,
    textarea,
    [contenteditable] { cursor: text !important; }
}


/* ─── Moon reveal：滾動進場淡入 ─────────── */
.moon-watch {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(16px);
    transition:
        opacity 900ms var(--ease-moon),
        filter 900ms var(--ease-moon),
        transform 900ms var(--ease-moon);
}
.moon-watch.in-view {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

@keyframes moonReveal {
    0%   { opacity: 0;  filter: blur(8px); transform: translateY(12px); }
    60%  { opacity: .7; filter: blur(2px); transform: translateY(2px); }
    100% { opacity: 1;  filter: blur(0);   transform: translateY(0); }
}
.moon-reveal         { animation: moonReveal var(--t-reveal) var(--ease-moon) both; }
.moon-reveal-delay-1 { animation: moonReveal var(--t-reveal) 150ms var(--ease-moon) both; }
.moon-reveal-delay-2 { animation: moonReveal var(--t-reveal) 300ms var(--ease-moon) both; }
.moon-reveal-delay-3 { animation: moonReveal var(--t-reveal) 450ms var(--ease-moon) both; }
.moon-reveal-delay-4 { animation: moonReveal var(--t-reveal) 600ms var(--ease-moon) both; }


/* ─── 減少動態（無障礙）───────────────── */
@media (prefers-reduced-motion: reduce) {
    .moon-watch  { opacity: 1; filter: none; transform: none; }
    .starfield   { display: none; }
    body::before, body::after, .atmos-warm { display: none; }
}


/* ═══════════════════════════════════════════════════════════════
   Moon Loader · 進站月相動畫
   時序：
     0  →  1.5s   月相從新月走到滿月（暗面圓 translateX 0% → 105%）
     1.5 → 1.6s   滿月停一下（給讀者視覺停頓）
     1.6 → 2.0s   整個 loader 淡出
═══════════════════════════════════════════════════════════════ */
.moon-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #0F141C;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    /* 動畫總時長由 inline style --loader-duration 控制（ACF 設定，預設 1500ms）。
       0 → duration: 顯示動畫；duration → duration+400ms: 淡出。 */
    --loader-duration: 1500ms;
    animation: loader-fadeout .4s ease var(--loader-duration) forwards;
}

/* 自訂圖（ACF loader_image 有上傳就用這個取代月相 SVG） */
.moon-loader-img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    animation: loader-img-pulse 2s ease-in-out infinite;
}
@keyframes loader-img-pulse {
    0%, 100% { opacity: .55; transform: scale(.96); }
    50%      { opacity: 1;   transform: scale(1.02); }
}

/* 圓形容器：固定大小、overflow hidden 才能讓暗面圓在內部滑動 */
.moon-disk {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: #0F141C;
    box-shadow:
        0 0 40px rgba(232, 235, 240, .18),
        0 0 80px rgba(168, 181, 201, .10);
}
.moon-light {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #E8EBF0;                /* 月光亮面 */
}
.moon-shadow {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #0F141C;
    /* 動畫時長 = loader-duration（外層 .moon-loader 設的 CSS var） */
    animation: moon-phase var(--loader-duration, 1500ms) cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
}

@keyframes moon-phase {
    0%   { transform: translateX(0%); }      /* 新月：完全覆蓋亮面 */
    100% { transform: translateX(105%); }    /* 滿月：暗面滑出 */
}
@keyframes loader-fadeout {
    to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.moon-loader-text {
    text-align: center;
    user-select: none;
}
.moon-loader-brand {
    font-family: var(--ff-d);
    font-style: italic;
    font-size: 14px;
    color: rgba(232, 235, 240, .55);
    margin-bottom: 6px;
    letter-spacing: -.01em;
}
.moon-loader-sub {
    font-family: var(--ff-m);
    font-size: 10px;
    color: rgba(168, 181, 201, .70);
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* 動畫敏感使用者：跳過 loader（立即隱藏） */
@media (prefers-reduced-motion: reduce) {
    .moon-loader { animation: loader-fadeout .2s ease forwards; }
    .moon-shadow { animation: none; transform: translateX(105%); }
}


/* ═══════════════════════════════════════════════════════════════
   Hero Clouds · 4 朵雲飄動
   只在首頁 Hero 區（.hero-curve-wrap 上半）出現，不延伸到 Life Curve。
   4 朵不同尺寸 + 不同速度 + 負 delay 錯開節奏，畫面隨時有東西在動。
═══════════════════════════════════════════════════════════════ */
.hero-clouds {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 55%;                          /* 只佔 wrap 上半部，不蓋到曲線 */
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.cloud {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0;
    will-change: transform, opacity;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Dark mode · 月光下的雲 */
.cloud-1 {
    width: 600px; height: 240px; top: 8%;
    background: radial-gradient(ellipse, rgba(232,235,240,.18) 0%, transparent 70%);
    animation-name: drift-right;
    animation-duration: 90s;
}
.cloud-2 {
    width: 820px; height: 300px; top: 38%;
    background: radial-gradient(ellipse, rgba(168,181,201,.13) 0%, transparent 70%);
    animation-name: drift-right;
    animation-duration: 130s;
    animation-delay: -50s;
}
.cloud-3 {
    width: 500px; height: 200px; top: 65%;
    background: radial-gradient(ellipse, rgba(232,235,240,.10) 0%, transparent 70%);
    animation-name: drift-right;
    animation-duration: 110s;
    animation-delay: -80s;
}
.cloud-4 {
    width: 680px; height: 260px; top: 22%;
    background: radial-gradient(ellipse, rgba(168,181,201,.09) 0%, transparent 70%);
    animation-name: drift-right;
    animation-duration: 160s;
    animation-delay: -110s;
}

/* Light mode · 傍晚將晚的霧氣 */
[data-theme="light"] .cloud-1 { background: radial-gradient(ellipse, rgba(92,97,130,.10) 0%, transparent 70%); }
[data-theme="light"] .cloud-2 { background: radial-gradient(ellipse, rgba(92,97,130,.08) 0%, transparent 70%); }
[data-theme="light"] .cloud-3 { background: radial-gradient(ellipse, rgba(92,97,130,.07) 0%, transparent 70%); }
[data-theme="light"] .cloud-4 { background: radial-gradient(ellipse, rgba(120,128,150,.06) 0%, transparent 70%); }

@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; }
}


/* ═══════════════════════════════════════════════════════════════
 * MOON LOADER · 進站月相動畫
 * 0.0s         1.5s         1.6s         2.0s
 * |─── grow ──|── hold ──|── fade out ──|
 * 新月        滿月        滿月         消失
 * ═══════════════════════════════════════════════════════════════ */
.moon-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #0F1419;              /* 永遠夜晚色（不隨主題切換） */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    /* fade out：1.6s 開始淡出，0.4s 完成 */
    animation: moonLoaderFadeOut .4s cubic-bezier(0.4, 0, 0.2, 1) 1.6s forwards;
    /* JS 加 .is-done 後立刻徹底消失 */
}
.moon-loader.is-done {
    display: none;
}

.moon-loader-svg {
    width: 96px;
    height: 96px;
}

/* shadow 從 cx="50"（完全遮住）動到 cx="155"（移出月亮右邊外）
   = 新月 → 滿月。用 transform 而非 cx 屬性，CSS 動畫才能套 easing curve。 */
.moon-loader-shadow {
    transform: translateX(0);
    transform-box: fill-box;
    transform-origin: center;
    animation: moonLoaderGrow 1.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
}
@keyframes moonLoaderGrow {
    0%   { transform: translateX(0); }
    100% { transform: translateX(105px); }   /* 105 = 月亮直徑 92 + 安全 buffer */
}
@keyframes moonLoaderFadeOut {
    to { opacity: 0; visibility: hidden; }
}

.moon-loader-text {
    text-align: center;
}
.moon-loader-brand {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 14px;
    color: rgba(232, 235, 240, .55);
    letter-spacing: .04em;
}
.moon-loader-sub {
    margin-top: 6px;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: rgba(168, 181, 201, .70);
    letter-spacing: .14em;
}

/* prefers-reduced-motion：loader 在 100ms 內消失，不演動畫 */
@media (prefers-reduced-motion: reduce) {
    .moon-loader {
        animation: moonLoaderFadeOut .1s linear 0s forwards;
    }
    .moon-loader-shadow {
        animation: none;
        transform: translateX(105px);  /* 直接滿月，沒有 grow 動畫 */
    }
}


/* ═══════════════════════════════════════════════════════════════
 * HERO CLOUDS · 大氣雲層
 * 只在 Hero 區飄動，不延伸到其他區塊。
 * 4 朵速度不同的雲（90/130/110/160 秒），起始位置錯開。
 * Dark mode = 月光雲，Light mode = 傍晚霧氣
 * ═══════════════════════════════════════════════════════════════ */
.hero-clouds {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;            /* 在 banner 文字下，但在背景 starfield 上 */
    overflow: hidden;
}

.cloud {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0;
    will-change: transform, opacity;
}

/* 4 朵雲，dark mode 顏色（Cool white + Moonlight 半透明） */
.cloud-1 {
    width: 600px; height: 240px;
    top: 8%;
    background: radial-gradient(ellipse, rgba(232, 235, 240, .18) 0%, transparent 70%);
    animation: cloudDrift 90s linear infinite;
}
.cloud-2 {
    width: 820px; height: 300px;
    top: 38%;
    background: radial-gradient(ellipse, rgba(168, 181, 201, .13) 0%, transparent 70%);
    animation: cloudDrift 130s linear infinite;
    animation-delay: -50s;       /* 啟動時已經在中段 */
}
.cloud-3 {
    width: 500px; height: 200px;
    top: 65%;
    background: radial-gradient(ellipse, rgba(232, 235, 240, .10) 0%, transparent 70%);
    animation: cloudDrift 110s linear infinite;
    animation-delay: -80s;
}
.cloud-4 {
    width: 680px; height: 260px;
    top: 22%;
    background: radial-gradient(ellipse, rgba(168, 181, 201, .09) 0%, transparent 70%);
    animation: cloudDrift 160s linear infinite;
    animation-delay: -110s;
}

/* Light mode 雲：傍晚霧氣，飽和度更低 */
[data-theme="light"] .cloud-1 {
    background: radial-gradient(ellipse, rgba(92, 97, 130, .10) 0%, transparent 70%);
}
[data-theme="light"] .cloud-2 {
    background: radial-gradient(ellipse, rgba(92, 97, 130, .08) 0%, transparent 70%);
}
[data-theme="light"] .cloud-3 {
    background: radial-gradient(ellipse, rgba(92, 97, 130, .07) 0%, transparent 70%);
}
[data-theme="light"] .cloud-4 {
    background: radial-gradient(ellipse, rgba(120, 128, 150, .06) 0%, transparent 70%);
}

/* drift-right：從左外側飄到右外側，進場淡入、離場淡出 */
@keyframes cloudDrift {
    0%   { transform: translateX(-50%); opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateX(110vw); opacity: 0; }
}

/* prefers-reduced-motion：雲不動但仍可見 */
@media (prefers-reduced-motion: reduce) {
    .cloud {
        animation: none;
        opacity: .5;
        transform: translateX(20vw);
    }
}