/* ============================================================
   prayer-glow.css
   Shekinah 青年3x3禱告網 — 視覺強化層
   設計主題：「圍爐 Hearth」— 陽光透窗、燭光暖爐、歸屬的家
   本檔案為「新增」樣式，不會覆寫 css/style.css 內既有的
   功能性樣式（.dynamic-text / .meal-btn / .hide-scrollbar 等）。
   ============================================================ */

:root{
  --hearth-cream:  #FFF6EC;
  --hearth-blush:  #FFE3D1;
  --hearth-brand:  #CC2D00;
  --hearth-ember:  #7A1B00;
  --hearth-gold:   #F2B705;
  --hearth-ink:    #33241D;
  --hearth-paper:  #FFFFFF;
}

/* -------- 基礎質感：溫暖紙紋背景 -------- */
.hearth-bg{
  background-color: var(--hearth-cream);
  background-image:
    radial-gradient(circle at 15% 8%,  rgba(242,183,5,.16) 0%, transparent 45%),
    radial-gradient(circle at 88% 82%, rgba(204,45,0,.10) 0%, transparent 50%);
}

/* -------- 漂浮光塵 / 燭光餘燼 粒子 --------
   注意：故意不使用真實 DOM 節點（不新增 span 等元素），
   全部改用 ::before / ::after 偽元素呈現。
   偽元素不會出現在 element.children / childNodes 中，
   因此不會影響任何依照「第幾個子元素」綁定事件的既有 JS 邏輯。
*/

/* -------- 純圖片滿版 Hero（index 登入頁用，不裁切原圖比例）-------- */
.hearth-header-plain{
  position:relative;
  line-height:0;
  box-shadow: 0 6px 18px -10px rgba(122,27,0,.45);
}

/* -------- 光束斜射 + 光束Header（用於品牌色 Header）-------- */
.hearth-header{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 130%, rgba(255,215,140,.35), transparent 60%),
    linear-gradient(135deg, var(--hearth-brand) 0%, var(--hearth-ember) 100%);
}
.hearth-header::before{
  content:"";
  position:absolute; inset:-40% -20%;
  pointer-events:none;
  background: repeating-linear-gradient(
    115deg,
    rgba(255,255,255,.16) 0px,
    rgba(255,255,255,.16) 2px,
    transparent 2px,
    transparent 46px
  );
  animation: rayGlide 14s linear infinite;
  pointer-events:none;
  z-index:0;
}
.hearth-header::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background-repeat:no-repeat;
  background-image:
    radial-gradient(circle 3px at 10% 92%, rgba(255,224,168,.95), transparent 65%),
    radial-gradient(circle 2px at 24% 88%, rgba(255,224,168,.75), transparent 65%),
    radial-gradient(circle 4px at 38% 95%, rgba(255,224,168,.9),  transparent 65%),
    radial-gradient(circle 2px at 52% 90%, rgba(255,224,168,.65), transparent 65%),
    radial-gradient(circle 3px at 66% 96%, rgba(255,224,168,.85), transparent 65%),
    radial-gradient(circle 2px at 79% 89%, rgba(255,224,168,.7),  transparent 65%),
    radial-gradient(circle 3px at 91% 94%, rgba(255,224,168,.8),  transparent 65%);
  animation: particlesRise 7s linear infinite;
  z-index:0;
}
@keyframes rayGlide{
  0%   { transform: translateX(-6%) translateY(0); }
  100% { transform: translateX(6%) translateY(2%); }
}
@keyframes particlesRise{
  0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; opacity:0; }
  12%  { opacity:1; }
  85%  { opacity:.2; }
  100% { background-position:
           2px -120px, -4px -140px, 3px -130px,
           -3px -150px, 4px -125px, -2px -145px, 3px -135px;
         opacity:0; }
}

/* -------- 卡片進場動畫 -------- */
.fade-rise{
  animation: fadeRise .7s cubic-bezier(.22,1,.36,1) both;
}
@keyframes fadeRise{
  from{ opacity:0; transform: translateY(14px) scale(.985); }
  to  { opacity:1; transform: translateY(0) scale(1); }
}
.fr-d1{ animation-delay:.05s; }
.fr-d2{ animation-delay:.15s; }
.fr-d3{ animation-delay:.25s; }
.fr-d4{ animation-delay:.35s; }
.fr-d5{ animation-delay:.45s; }

/* -------- 呼吸光暈（logo / 標誌）-------- */
.breathe-glow{
  animation: breathe 3.6s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ filter: drop-shadow(0 0 0px rgba(255,255,255,.0)); }
  50%    { filter: drop-shadow(0 0 14px rgba(255,224,168,.75)); }
}

/* -------- 輸入框：暖色聚焦感 -------- */
.hearth-field{
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.hearth-field:focus{
  box-shadow: 0 0 0 4px rgba(204,45,0,.14), 0 8px 20px -6px rgba(204,45,0,.25);
  transform: translateY(-1px);
}

/* -------- 主要按鈕：燭火掃光 + 光暈 -------- */
.hearth-btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition: transform .2s ease, box-shadow .3s ease, filter .2s ease;
  box-shadow: 0 10px 24px -10px rgba(204,45,0,.55);
}
.hearth-btn::before{
  content:"";
  position:absolute; top:0; left:-60%;
  width:40%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg);
  animation: shineSweep 3.2s ease-in-out infinite;
}
@keyframes shineSweep{
  0%   { left:-60%; }
  45%  { left:130%; }
  100% { left:130%; }
}
.hearth-btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px -8px rgba(204,45,0,.6); }
.hearth-btn:active{ transform: translateY(0) scale(.985); }
.hearth-btn:disabled{ filter:saturate(.4); box-shadow:none; }

/* -------- 通用：不論 JS 是否覆蓋 class，ID 仍保留互動手感 -------- */
#loginBtn, #upgradeBtn, #btn-export-excel{
  transition: transform .18s ease, box-shadow .25s ease, filter .18s ease;
}
#loginBtn:hover, #upgradeBtn:hover, #btn-export-excel:hover{ transform: translateY(-1px) scale(1.01); }
#loginBtn:active, #upgradeBtn:active, #btn-export-excel:active{ transform: translateY(0) scale(.97); }

#btn-text, #btn-register{
  transition: transform .22s ease, box-shadow .25s ease, letter-spacing .25s ease;
}
#btn-text:hover, #btn-register:hover{ transform: translateY(-1px); }
#btn-text:active, #btn-register:active{ transform: scale(.97); }

/* 依「class 內含品牌色」判斷目前為 active 狀態，加上柔光暈（不需知道 JS 確切 class 組合） */
#btn-text[class*="CC2D00"], #btn-register[class*="CC2D00"]{
  box-shadow: 0 8px 18px -8px rgba(204,45,0,.55);
}
.meal-btn[class*="CC2D00"]{
  box-shadow: 0 0 0 3px rgba(204,45,0,.18), 0 10px 20px -8px rgba(204,45,0,.45);
  animation: mealPop .4s ease;
}
@keyframes mealPop{
  0%{ transform: scale(.9); }
  60%{ transform: scale(1.06); }
  100%{ transform: scale(1); }
}

.meal-btn{
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease, background-color .2s ease;
}
.meal-btn:hover{ transform: translateY(-2px); }
.meal-btn:active{ transform: scale(.95); }

/* -------- 進度條：燭火流光 -------- */
.hearth-progress-track{
  position:relative;
  overflow:hidden;
}
.hearth-progress-track > div{
  position:relative;
  transition: width 1s cubic-bezier(.22,1,.36,1);
}
.hearth-progress-track > div::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  background-size: 60px 100%;
  animation: barShimmer 5s linear infinite;
}
@keyframes barShimmer{
  0%{ background-position:-60px 0; }
  100%{ background-position: 260px 0; }
}

/* -------- 已禱告總數：溫柔跳動 -------- */
#total-count-display{
  animation: numberGlow 2.8s ease-in-out infinite;
}
@keyframes numberGlow{
  0%,100%{ text-shadow: 0 0 0 rgba(204,45,0,0); }
  50%    { text-shadow: 0 2px 16px rgba(204,45,0,.35); }
}

/* -------- 日曆：容器裝飾（實際格子由 app.js 產生，此處僅裝飾外層）-------- */
.hearth-calendar-wrap{
  border-radius: 1.25rem;
  background: linear-gradient(180deg, #FFFDF9, #FFF3E6);
}

/* -------- Tab 面板切換：淡入 -------- */
.tab-fade{ animation: fadeRise .45s ease both; }

/* -------- Modal 進場 -------- */
.hearth-modal-in{ animation: modalIn .28s cubic-bezier(.22,1,.36,1) both; }
@keyframes modalIn{
  from{ opacity:0; transform: translateY(10px) scale(.97); }
  to  { opacity:1; transform: translateY(0) scale(1); }
}

/* -------- 捲軸隱藏（若 css/style.css 尚未定義則生效）-------- */
.hide-scrollbar::-webkit-scrollbar{ display:none; }
.hide-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }
.inner-scroll{ scroll-behavior:smooth; }

/* -------- 尊重使用者的減少動態偏好 -------- */
@media (prefers-reduced-motion: reduce){
  .hearth-header::before,
  .hearth-header::after,
  .hearth-btn::before,
  .breathe-glow,
  #total-count-display,
  .hearth-progress-track > div::after,
  .meal-btn[class*="CC2D00"]{
    animation: none !important;
  }
  .fade-rise, .tab-fade, .hearth-modal-in{
    animation-duration: .01s !important;
  }
}