/* ============================================================
   craft.css — 差異化前端工藝層（2026-07）
   一般 AI 生成網站不做的：招牌 logo 動態、磁吸 CTA、游標光暈、
   捲動視差、逐字進場、施作對比拖曳滑桿。全部 .js-craft gate，
   無 JS / reduced-motion 一律降級為靜態可用。
   ============================================================ */

/* ---- 1. 招牌標記：三條 bar 依序呼吸，滑過時彈起（品牌簽名） ---- */
.js-craft .mark i{transform-origin:bottom;animation:tf-breathe 3.2s var(--ease) infinite}
.js-craft .mark i:nth-child(2){animation-delay:.18s}
.js-craft .mark i:nth-child(3){animation-delay:.36s}
.js-craft .brand:hover .mark i{animation:tf-pop .5s var(--ease)}
.js-craft .brand:hover .mark i:nth-child(2){animation-delay:.06s}
.js-craft .brand:hover .mark i:nth-child(3){animation-delay:.12s}
@keyframes tf-breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.14)}}
@keyframes tf-pop{0%{transform:scaleY(1)}40%{transform:scaleY(1.5)}100%{transform:scaleY(1)}}

/* ---- 2. 磁吸按鈕 + 游標光暈（桌面才啟用） ---- */
.js-craft .btn-cta{position:relative;overflow:hidden;will-change:transform}
.js-craft .btn-cta::before{content:"";position:absolute;left:var(--mx,50%);top:var(--my,50%);width:0;height:0;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.35),transparent 70%);transform:translate(-50%,-50%);
  transition:width .5s var(--ease),height .5s var(--ease);pointer-events:none}
.js-craft .btn-cta:hover::before{width:220px;height:220px}
.js-craft .btn-cta>*{position:relative;z-index:1}

/* 全站游標跟隨光斑（極淡，只在桌面） */
.tf-spot{position:fixed;top:0;left:0;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:0;
  transform:translate(-50%,-50%);opacity:0;transition:opacity .6s var(--ease);mix-blend-mode:multiply;
  background:radial-gradient(circle,rgba(31,111,98,.10),transparent 62%)}
.js-craft.has-pointer .tf-spot{opacity:1}

/* ---- 3. Hero 視差 + 逐字進場 ---- */
.js-craft .hero-portrait{will-change:transform}
.js-craft .home-hero:after{will-change:transform}
.js-craft .hero-copy h1 .ch{display:inline-block;opacity:0;transform:translateY(.5em) rotate(2deg);
  animation:tf-char .62s var(--ease) forwards}
@keyframes tf-char{to{opacity:1;transform:none}}

/* ---- 4. 施作對比拖曳滑桿（清潔品牌招牌互動） ---- */
.compare-band{padding:var(--s-6) 0}
.compare-shell{max-width:1180px;margin-inline:auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center}
.compare-copy .eyebrow{color:var(--amber-d)}
.compare{position:relative;aspect-ratio:4/3;border-radius:var(--r-xxl);overflow:hidden;border:1px solid var(--line-soft);
  box-shadow:0 28px 90px rgba(22,79,70,.18);cursor:ew-resize;user-select:none;background:var(--ink);touch-action:none}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.compare .after{clip-path:inset(0 0 0 var(--pos,50%))}
.compare .lab{position:absolute;top:14px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:800;
  background:rgba(23,35,31,.7);color:#fff;backdrop-filter:blur(6px);z-index:2}
.compare .lab.l{left:14px}.compare .lab.r{right:14px;background:rgba(31,111,98,.82)}
.compare .handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:rgba(255,255,255,.9);
  transform:translateX(-50%);z-index:3;box-shadow:0 0 0 1px rgba(23,35,31,.15)}
.compare .knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;
  background:#fff;display:grid;place-items:center;box-shadow:0 6px 20px rgba(23,35,31,.3);color:var(--teal-d);font-weight:900}
.compare .knob::before{content:"⟷";font-size:18px}
@media (max-width:860px){.compare-shell{grid-template-columns:1fr;gap:26px}}

/* ---- 5. 服務圖示 scroll 時線條描繪 ---- */
.js-craft .service-card .icon path{stroke-dasharray:var(--len,120);stroke-dashoffset:var(--len,120);
  transition:stroke-dashoffset 1s var(--ease)}
.js-craft .service-card.is-in .icon path{stroke-dashoffset:0}

/* ---- 6. View Transitions（頁面切換淡入，支援的瀏覽器才有） ---- */
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:tf-vt-out .28s var(--ease) both}
  ::view-transition-new(root){animation:tf-vt-in .38s var(--ease) both}
}
@keyframes tf-vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes tf-vt-in{from{opacity:0;transform:translateY(10px)}}

@media (prefers-reduced-motion:reduce){
  .js-craft .mark i,.js-craft .hero-copy h1 .ch,.js-craft .service-card .icon path{animation:none!important;transition:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}
  .tf-spot{display:none}
}