/* =========================================================================
   依緹美學 EASY BEAUTY — 精緻層 polish.css（2026-09-23）
   -------------------------------------------------------------------------
   設計方向：精品克制型。動作走「慢、柔、少」，只強化既有的象牙白＋駝金調性，
   不新增顏色、不改版面結構、不搶內容。

   原則：只加不改。
   ・所有新樣式都建立在既有類別的「補充狀態」上，或使用 .p- 前綴的新類別。
   ・隱藏起始狀態一律由 polish.js 加上（html.p-js），JS 失效時全站維持原樣可讀。
   ・尊重 prefers-reduced-motion：整層動效關閉，只留靜態質感。
   ========================================================================= */

/* ============================================================
   0. 共用節奏
   ============================================================ */
:root{
  --p-slow:1.15s;          /* 主要進場 */
  --p-mid:.85s;            /* 次要元素 */
  --p-hover:.6s;           /* 滑鼠互動 */
  --p-step:70ms;           /* 群組依序進場的級距 */
}

/* ============================================================
   1. 頁面進場
   內頁原本沒有任何開場（只有首頁有 loader），切頁時顯得生硬。
   這裡給一個極短的整頁淡入，讓內頁之間有品牌連續性。
   ============================================================ */
html.p-js body{
  animation:p-page-in .7s var(--ease) both;
}
@keyframes p-page-in{
  from{opacity:0;}
  to{opacity:1;}
}

/* ============================================================
   2. 遮罩式標題進場
   標題以「從下方推上來、被遮罩切齊」的方式出現，是精品版面最常見、
   也最不吵的一種進場。多行標題逐行延遲。
   ============================================================ */
.p-ml{
  display:block;
  overflow:hidden;
  /* 明體的下伸部（ㄅㄆㄇ的鉤、英文的 g/y）會被 overflow 切到，
     補一點下方內距再用等量負邊距收回，視覺位置完全不變。 */
  padding-bottom:.18em;
  margin-bottom:-.18em;
}
.p-ml>span{
  display:block;
  transform:translateY(115%);
  transition:transform var(--p-slow) var(--ease);
  transition-delay:calc(var(--i,0) * 90ms);
}
.p-mask.in .p-ml>span{transform:none;}

/* 標題若原本掛著 [data-rv]（淡入＋位移），會和遮罩動作疊成兩段，
   顯得雜。改由遮罩單獨表現，因此在這裡解除它的起始狀態。 */
html.p-js .p-mask[data-rv]{opacity:1;transform:none;}

/* ============================================================
   3. 金線展開
   .sec-label 前方那條 26px 的金線，原本是靜態的。
   改為隨區塊進場由 0 展開——一個很小、但整站每個區塊都會看到的細節。
   ============================================================ */
html.p-js .sec-label[data-rv]::before,
html.p-js [data-rv] .sec-label::before{
  width:0;
  transition:width var(--p-mid) .25s var(--ease);
}
html.p-js .sec-label[data-rv].in::before,
html.p-js [data-rv].in .sec-label::before{width:26px;}

/* 同樣處理 .bar-title 左側的金色直線：由中間往上下展開 */
html.p-js .bar-title::before{
  transform:scaleY(0);
  transform-origin:center;
  transition:transform var(--p-mid) .2s var(--ease);
}
html.p-js [data-rv].in .bar-title::before,
html.p-js .bar-title[data-rv].in::before{transform:none;}

/* ============================================================
   4. 圖片：進場的輕微推近與滑鼠停留的景深
   幅度都刻意壓小（1.04 / 1.06），要的是「有呼吸」而不是「會動」。
   ============================================================ */
.frame{overflow:hidden;}
.frame img{
  transition:transform 1.4s var(--ease),filter var(--p-hover) var(--ease);
  will-change:transform;
}
@media (hover:hover){
  .frame:hover img{transform:scale(1.04);}
}

/* 內頁 Banner：圖片由 1.06 緩緩回到 1，像鏡頭穩下來。
   注意：#pheroBg 本身的 transform 被 inner.js 的視差佔用，
   所以這裡只動它裡面的 <img>，兩者不會互相覆寫。 */
html.p-js .phero__bg img{
  transform:scale(1.06);
  transition:transform 2.4s var(--ease);
}
html.p-js.p-ready .phero__bg img{transform:none;}

/* ============================================================
   5. 群組景深
   滑到其中一張卡片時，同組其他卡片退到背景。
   這是讓「一整排卡片」看起來被設計過、而不是被排出來的關鍵。
   ============================================================ */
@media (hover:hover){
  .p-depth > *{
    transition:opacity var(--p-hover) var(--ease),
               filter var(--p-hover) var(--ease),
               transform var(--p-hover) var(--ease);
  }
  .p-depth:hover > *:not(:hover){
    opacity:.5;
    filter:saturate(.82);
  }
}

/* ============================================================
   6. 文字連結：底線由中央展開
   只作用於內文區域的連結，導覽列與按鈕不受影響。
   ============================================================ */
@media (hover:hover){
  .p-link{
    position:relative;
    background-image:linear-gradient(var(--gold),var(--gold));
    background-repeat:no-repeat;
    background-position:50% 100%;
    background-size:0 1px;
    transition:background-size var(--p-hover) var(--ease);
  }
  .p-link:hover{background-size:100% 1px;}
}

/* ============================================================
   7. 編號字（01 / 02 / 03）
   品牌頁與五大特點的序號原本是靜態的淺色數字，
   進場時讓它從細微的位移與透明度浮出，替區塊建立視覺起點。
   ============================================================ */
html.p-js .story__no,
html.p-js .vitem__no{
  opacity:0;
  transform:translateY(10px);
  transition:opacity var(--p-slow) .15s var(--ease),
             transform var(--p-slow) .15s var(--ease);
}
html.p-js [data-rv].in .story__no,
html.p-js [data-rv].in .vitem__no,
html.p-js .in .story__no,
html.p-js .in .vitem__no{opacity:1;transform:none;}

/* ============================================================
   8. 關閉動效（使用者在系統層設定了「減少動態效果」）
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html.p-js body{animation:none;}
  .p-ml>span{transform:none;transition:none;}
  html.p-js .phero__bg img{transform:none;transition:none;}
  html.p-js .story__no,
  html.p-js .vitem__no{opacity:1;transform:none;transition:none;}
  html.p-js .sec-label[data-rv]::before,
  html.p-js [data-rv] .sec-label::before{width:26px;transition:none;}
  html.p-js .bar-title::before{transform:none;transition:none;}
  .frame img,.p-depth > *,.p-link{transition:none;}
}