/* ==========================================================================
   宏稷 v18 — 高端質感層（搭配 luxe.js）
   ========================================================================== */
:root{--luxe-ease:cubic-bezier(.16,1,.3,1)}

/* 1. 平滑捲動（Lenis） */
html.hj-smooth{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}

/* 編排：桌機標題放大，拉開字級對比，更有雜誌感 */
@media(min-width:1051px){
  .section-heading h2,.philosophy-heading h2,.services-heading h2,.process-intro h2,.faq-layout h2,.contact h2{font-size:clamp(40px,3.9vw,62px);line-height:1.5}
  .philosophy-copy .lead{font-size:clamp(26px,2vw,30px)}
}

/* 2. 首屏收成畫框：剪裁由 luxe.js 控制 */
.hero-media{will-change:clip-path}

/* 3. 超大描邊章節數字 */
.has-index{position:relative;isolation:isolate;overflow:clip}
.sec-index{position:absolute;z-index:-1;top:clamp(40px,6vw,96px);right:max(4vw,calc((100vw - 1440px)/2 + 2vw));
  font:italic 400 clamp(120px,17vw,260px)/1 Georgia,"Times New Roman",serif;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1px rgba(116,132,67,.26);pointer-events:none;user-select:none;will-change:translate}
.process .sec-index{-webkit-text-stroke-color:rgba(214,224,196,.2)}
@media(max-width:700px){.sec-index{font-size:34vw;top:28px;right:4vw;-webkit-text-stroke-width:.8px}}

/* 4. 品牌標語帶 */
.statement-band{overflow:hidden;padding:clamp(34px,5vw,72px) 0;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative}
.band-track{display:flex;align-items:center;gap:clamp(28px,3.4vw,56px);white-space:nowrap;width:max-content;will-change:transform}
.band-track span{display:block;line-height:1.1}
.band-en{font:italic 400 clamp(44px,6.2vw,104px)/1.1 Georgia,"Times New Roman",serif;color:#6b7a52;letter-spacing:-.01em}
.band-zh{font-family:var(--serif);font-size:clamp(30px,3.6vw,58px);letter-spacing:.14em;color:#9aa58b}
.band-track i{display:block;flex:0 0 auto;width:12px;height:12px;transform:rotate(45deg);border:1px solid #a26f57;opacity:.7}
@media(max-width:700px){.statement-band{padding:28px 0}}

/* 5. 翻新流程：左側照片固定，步驟換照片 */
.is-story .photo-frame{position:relative;display:block}
.is-story .photo-frame>img:not(.story-step-photo){opacity:0}
.story-step-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;scale:1.04;transition:opacity 1s var(--luxe-ease),scale 1.6s var(--luxe-ease)}
.story-step-photo.is-shown{opacity:1;scale:1}
.story-caption{display:flex;align-items:baseline;gap:14px;margin-top:16px;font-size:13px;letter-spacing:.08em;color:#c0cab6}
.story-caption b{font:italic 400 22px/1 Georgia,serif;color:#c69a8b;font-weight:400}
.has-story .process-list li,.motion-ready .has-story .process-list li.reveal.is-visible{transition:opacity .7s var(--luxe-ease),transform 1.1s var(--ease)}
.has-story .process-list li>span{transition:color .7s,transform .7s var(--luxe-ease);display:inline-block}
@media(min-width:1051px){
  .has-story .process-intro{position:sticky;top:110px;align-self:start}
  .has-story .process-photo{width:100%;height:clamp(240px,38vh,400px)}
  .has-story .process-list{padding-bottom:18vh}
  .has-story .process-list li,.motion-ready .has-story .process-list li.reveal.is-visible{opacity:.42}
  .has-story .process-list li.is-current,.motion-ready .has-story .process-list li.reveal.is-visible.is-current{opacity:1}
  .has-story .process-list li.is-current>span{color:#e3b9a8;transform:translateX(4px)}
}
@media(max-width:1050px){.story-caption{display:none}.has-story .process-list li{opacity:1}}

/* 6. 游標標籤 */
.cursor-tag{position:fixed;left:0;top:0;z-index:95;pointer-events:none;width:0;height:0}
.cursor-tag span{position:absolute;left:-38px;top:-38px;display:grid;place-items:center;width:76px;height:76px;border-radius:50%;
  background:rgba(245,242,231,.92);color:var(--ink);font-size:13px;letter-spacing:.16em;text-indent:.16em;
  box-shadow:0 10px 30px -12px rgba(29,42,32,.45);transform:scale(.2);opacity:0;transition:transform .45s var(--luxe-ease),opacity .3s}
.cursor-tag.is-on span{transform:scale(1);opacity:1}

/* 7. 紙張質感 */
.paper-grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.22 0 0 0 0 0.18 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* 8. 換頁轉場 */
.page-curtain{position:fixed;inset:0;z-index:180;display:grid;place-items:center;background:var(--paper);color:#7c9055;pointer-events:none;
  clip-path:inset(100% 0 0 0);transition:clip-path .55s cubic-bezier(.76,0,.24,1)}
.page-curtain svg{width:56px;height:56px;opacity:0;transform:translateY(10px);transition:opacity .4s .2s,transform .5s .2s var(--luxe-ease)}
.page-curtain.is-in{clip-path:inset(0 0 0 0);pointer-events:auto}
.page-curtain.is-in svg{opacity:1;transform:none}

/* 9. 磁吸按鈕 */
.is-magnetic{transition:translate .5s var(--luxe-ease)}

/* 減少動態：全部回到靜態 */
@media(prefers-reduced-motion:reduce){
  .sec-index{translate:none!important}
  .story-step-photo{transition:none}
  .cursor-tag,.page-curtain{display:none}
  .is-magnetic{translate:none!important}
}