/* ============================================================
   輕悅纖 UI 升級層 v1
   只疊加質感，不破壞原有版面與 reveal 邏輯
   ============================================================ */

/* 1. Film noise — 消除純色平面感 */
body::before{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:9999;
  opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")
}

/* 2. 深場柔光 — P2/P4/P5 深色頁加一道 45° 金褐光暈
   用 ::before（首個 pseudo，painting 在背景之後、子元素之前），不影響 absolute 子元素排版 */
.p2::before,.p4::before,.p5::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 60% 40% at 75% 15%, rgba(193,141,82,.10), transparent 60%),
    radial-gradient(ellipse 50% 35% at 15% 85%, rgba(90,143,118,.08), transparent 60%);
}

/* 3. Tabular 數字 — 數字不跳位 */
.big,.num,.n,.v,.tm,.dt,.pageNum,h1 small,.big small,
.c .tm,.c .rs,.stcard .tm,.vl,.stamp{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum","lnum"
}

/* 4. Text balance — 中文標題智慧斷行 */
h1,h2,h3,.title{text-wrap:balance}
.sub,.dc,.body,.desc,p{text-wrap:pretty}

/* 5. Hero 卡 hover 金邊發光（桌機才觸發，不影響手機） */
.hero,.stcard,.box,.tg,.c,.drug-card,.win-tile,.chip{
  transition:box-shadow .45s ease,transform .45s cubic-bezier(.34,1.56,.64,1),border-color .3s ease;
}
@media (hover:hover) and (pointer:fine){
  .hero:hover{
    box-shadow:0 24px 68px rgba(32,59,55,.4),
               0 0 0 1px rgba(193,141,82,.25),
               inset 0 0 40px rgba(193,141,82,.06);
  }
  .stcard:hover,.box:hover,.tg:hover,.drug-card:hover,.win-tile:hover,.c:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(32,59,55,.14),
               0 0 0 1px rgba(193,141,82,.2);
  }
}

/* 6. 主 CTA — hover 時浮起 + 陰影放大（pointer 裝置才觸發） */
.btn,.btns a,.p5 .btn,.btns .btn{
  will-change:transform,box-shadow;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),
             box-shadow .35s ease,
             filter .2s ease;
}
@media (hover:hover) and (pointer:fine){
  .btn:hover,.btns a:hover,.p5 .btn:hover{
    transform:translateY(-3px) scale(1.015);
    filter:brightness(1.06);
  }
  .btn:active,.btns a:active{transform:translateY(-1px) scale(.99)}
}

/* 7. 數字 / 標籤細發光 — editorial 感 */
.big,.n{
  text-shadow:0 0 0.04em rgba(193,141,82,.12);
}

/* 8. 卡片超細金邊（淺底卡） */
.p1 .hero,.p3 .hero,.stcard,.box,.drug-card,.win-tile{
  /* 只加細邊，不蓋過原有 border */
  box-shadow:0 8px 24px rgba(32,59,55,.08),
             0 0 0 1px rgba(193,141,82,.10);
}
.p2 .hero,.p4 .hero,.p5 .hero{
  box-shadow:0 16px 48px rgba(0,0,0,.45),
             0 0 0 1px rgba(193,141,82,.15);
}

/* 9. Eyebrow dot — 強化脈衝 */
.eyebrow .dot{
  box-shadow:0 0 0 4px rgba(90,143,118,.22),
             0 0 12px rgba(90,143,118,.35);
}
.p2 .eyebrow .dot,.p4 .eyebrow .dot,.p5 .eyebrow .dot{
  box-shadow:0 0 0 4px rgba(193,141,82,.22),
             0 0 14px rgba(193,141,82,.5);
}

/* 10. Swipe hint — 微幅右移呼吸感 */
.hint,.swipe-hint{animation:qys-hint 2.8s ease-in-out infinite}
@keyframes qys-hint{
  0%,100%{opacity:.7;transform:translateX(0)}
  50%{opacity:1;transform:translateX(5px)}
}

/* 11. 頁碼 — 更纖細 letter-spacing */
.pageNum{letter-spacing:.22em;font-feature-settings:"tnum","lnum"}

/* 12. 標題加微弱光暈（hover 時） */
@media (hover:hover) and (pointer:fine){
  h1:hover,.title:hover{
    text-shadow:0 0 40px rgba(193,141,82,.15)
  }
}

/* 13. Magnetic CTA 準備 — JS 會加上 --mx/--my 變數 */
.btn,.btns a,.p5 .btn{
  transform:translate(calc(var(--mx,0) * 1px),calc(var(--my,0) * 1px))
}

/* 14. Scroll-linked 不需要，但加 scroll-behavior */
html{scroll-behavior:smooth}

/* 15. Reduced motion — 全部靜態化 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  body::before{display:none}
  .p2::after,.p4::after,.p5::after{display:none}
}