/* ============================================
   Bible Here — Motion System
   ============================================
   所有新增的動效都定義在這裡，顏色一律走主題變數，
   不可寫死色值（共 9 個主題，含兩個暗色主題）。
   ============================================ */

:root {
    /* Durations — 以 base 為基準，往上下各兩階 */
    --dur-instant: 90ms;
    --dur-fast: 160ms;
    --dur-base: 240ms;
    --dur-slow: 400ms;
    --dur-slower: 700ms;

    /* Easing — 預設一律用 out 曲線，進場快、收尾慢 */
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.30, 1);
    --ease-soft: cubic-bezier(0.40, 0.00, 0.20, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* 錯開進場的每項間隔 */
    --stagger-step: 24ms;

    /* 主題切換的放射揭示時長 */
    --dur-theme-reveal: 620ms;
}

/* ============================================
   錯開進場（stagger）
   ============================================
   用法：容器加 .motion-stagger，子項以 inline style 提供 --i 序號。
   注意 Blazor 會依位置重用 DOM，必須在 @foreach 上加 @key
   才會真的重建元素、讓動畫重播。
   ============================================ */

.motion-stagger > * {
    animation: motion-rise var(--dur-slow) var(--ease-out-quint) both;
    animation-delay: calc(var(--i, 0) * var(--stagger-step));
}

@keyframes motion-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 經文用較小的位移，閱讀時不該有明顯「跳動」 */
.bible-chapter-content.motion-stagger > * {
    animation-name: motion-rise-subtle;
    animation-duration: var(--dur-base);
}

@keyframes motion-rise-subtle {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   關鍵字高亮：光帶掃過
   ============================================
   刻意不做「底色從 0 展開」：mark 的黃底是刻意在所有主題都保留的，
   展開式動畫會讓深色文字在暗色主題下有一段時間讀不到。
   這裡底色全程不動，只讓一道亮帶掃過去。
   ============================================ */

.search-result-content mark,
.verse-content mark {
    background-image: linear-gradient(100deg,
        transparent 20%,
        rgba(255, 255, 255, 0.75) 50%,
        transparent 80%);
    background-repeat: no-repeat;
    background-size: 220% 100%;
    background-position: 220% 0;
    animation: mark-shimmer var(--dur-slower) var(--ease-out-expo) forwards;
    animation-delay: calc(var(--i, 0) * var(--stagger-step) + var(--dur-fast));
}

@keyframes mark-shimmer {
    to { background-position: -120% 0; }
}

/* ============================================
   跳轉節的聚光燈
   ============================================
   取代單純的黃底閃爍：目標節浮起 + 光環擴散，
   同時短暫壓暗同章其他節。
   ============================================ */

.bible-chapter-content.motion-spotlight-active > *:not(.bible-verse-highlighted) {
    animation: verse-dim var(--dur-slower) var(--ease-soft) 3 alternate;
}

@keyframes verse-dim {
    from { opacity: 1; }
    to { opacity: 0.45; }
}

.bible-verse-highlighted {
    position: relative;
    z-index: 1;
}

.bible-verse-highlighted::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: var(--border-radius);
    border: 2px solid var(--accent-primary);
    opacity: 0;
    pointer-events: none;
    animation: spotlight-ring 1.4s var(--ease-out-expo) 2;
}

@keyframes spotlight-ring {
    0% { opacity: 0.9; transform: scale(0.98); }
    70% { opacity: 0; transform: scale(1.04); }
    100% { opacity: 0; transform: scale(1.04); }
}

/* ============================================
   閱讀進度細線
   ============================================ */

.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    z-index: 9998;
    background: transparent;
    pointer-events: none;
}

.reading-progress__bar {
    height: 100%;
    width: var(--progress, 0%);
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-hover));
    transition: width var(--dur-instant) linear;
}

/* ============================================
   游標光澤（首頁功能卡）
   ============================================
   JS 把游標位置寫進 --mx / --my，CSS 只負責畫。
   ============================================ */

.motion-spotlight {
    position: relative;
    overflow: hidden;
    transition: transform var(--dur-base) var(--ease-out-quint),
                box-shadow var(--dur-base) var(--ease-out-quint);
}

.motion-spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-soft);
    background: radial-gradient(
        240px circle at var(--mx, 50%) var(--my, 50%),
        color-mix(in srgb, var(--accent-primary) 16%, transparent),
        transparent 70%);
}

.motion-spotlight:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.motion-spotlight:hover::before {
    opacity: 1;
}

/* ============================================
   每日經文逐字浮現
   ============================================
   中文沒有詞界，所以用逐字而非逐詞。
   基準狀態是可見的，動畫失效時文字仍然讀得到。
   ============================================ */

.verse-char {
    display: inline-block;
    white-space: pre-wrap;
    animation: char-in var(--dur-slow) var(--ease-out-quint) both;
    animation-delay: calc(var(--i, 0) * 18ms);
}

@keyframes char-in {
    from { opacity: 0; filter: blur(3px); transform: translateY(6px); }
    to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* 每日經文卡的漸層描邊 */
.bible-random-verse {
    position: relative;
    overflow: hidden;
}

.bible-random-verse::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent-primary) 55%, transparent),
        transparent 40%,
        transparent 60%,
        color-mix(in srgb, var(--accent-hover) 45%, transparent));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}

/* ============================================
   統計數字 count-up
   ============================================ */

.stat-box {
    padding: 0.5rem 0.25rem;
}

.stat-number {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--accent-primary);
    font-variant-numeric: tabular-nums;
}

/* ============================================
   遊戲回饋
   ============================================ */

.game-option.correct,
.bible-game-option.correct {
    animation: option-correct var(--dur-slow) var(--ease-spring);
}

@keyframes option-correct {
    0% { transform: scale(1); }
    45% { transform: scale(1.04); }
    100% { transform: scale(1); }
}

.game-option.correct::after,
.bible-game-option.correct::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: var(--border-radius);
    border: 2px solid var(--badge-success);
    pointer-events: none;
    animation: option-ring var(--dur-slower) var(--ease-out-expo) forwards;
}

.game-option,
.bible-game-option {
    position: relative;
}

@keyframes option-ring {
    0% { opacity: 0.85; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.08); }
}

.game-option.incorrect,
.bible-game-option.incorrect {
    animation: option-shake var(--dur-slow) var(--ease-soft);
}

@keyframes option-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}

/* 答對/答錯提示條彈入 */
.game-feedback {
    animation: feedback-pop var(--dur-slow) var(--ease-spring) both;
}

@keyframes feedback-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 結算分數 */
.game-final-score {
    font-variant-numeric: tabular-nums;
    animation: score-in var(--dur-slower) var(--ease-spring) both;
}

@keyframes score-in {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

/* 慶祝粒子畫布（由 JS 建立後插入 body） */
.motion-confetti-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

/* ============================================
   主題切換放射揭示（View Transitions API）
   ============================================ */

::view-transition-old(root),
::view-transition-new(root) {
    /* 兩張快照都不要預設的 crossfade，改由 clip-path 控制 */
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    z-index: 1;
}

::view-transition-new(root) {
    z-index: 2;
    animation: theme-reveal var(--dur-theme-reveal) var(--ease-out-expo) both;
}

@keyframes theme-reveal {
    from { clip-path: circle(0% at var(--theme-origin-x, 50%) var(--theme-origin-y, 50%)); }
    to { clip-path: circle(var(--theme-reveal-radius, 150%) at var(--theme-origin-x, 50%) var(--theme-origin-y, 50%)); }
}

/* 揭示期間關掉全域色彩過渡，否則兩者疊加會糊掉 */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition: none !important;
}

/* ============================================
   降低動態效果偏好
   ============================================
   app.css 的全域規則沒有重設 animation-delay，
   錯開進場會變成「延遲後瞬間跳出」，所以這裡一併歸零。
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-delay: 0s !important;
    }

    .motion-stagger > *,
    .verse-char,
    .game-feedback,
    .game-final-score {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .search-result-content mark,
    .verse-content mark {
        animation: none !important;
        background-image: none !important;
    }

    .bible-chapter-content.motion-spotlight-active > *:not(.bible-verse-highlighted),
    .bible-verse-highlighted::after,
    .game-option.correct::after,
    .bible-game-option.correct::after {
        animation: none !important;
    }

    .motion-spotlight:hover {
        transform: none;
    }

    ::view-transition-new(root) {
        animation: none !important;
    }
}