/* ══════════════════════════════════════════════════════════════
   LIMEREA 映界 — 首頁樣式
   Hero 段落來自 _spec/brand/hero_final.html（定案，勿改，見手冊 §8）
   其餘段落由 Claude Design 匯出碼抽出 markup 後重建（零 build）
   ══════════════════════════════════════════════════════════════ */

/* ── 字體（自架，不引 Google Fonts CDN） ───────────────────── */
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/bodonimoda-400.woff2') format('woff2')}
@font-face{font-family:'LMSerifTC';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/notoseriftc-400.woff2') format('woff2')}
@font-face{font-family:'LMSerifTC';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/notoseriftc-500.woff2') format('woff2')}
/* 顯示級明體：只給標題用。內文仍走 LMSerifTC，兩者是顯示體 vs 內文體的分工 */
@font-face{font-family:'GenRyuTC';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/genryu-bold.woff2') format('woff2')}
@font-face{font-family:'GenRyuTC';font-style:normal;font-weight:900;font-display:swap;
  src:url('fonts/genryu-heavy.woff2') format('woff2')}

/* ── Token ─────────────────────────────────────────────────── */
:root{
  --bg:#080807;          /* 近黑 */
  --bg-2:#0C0B09;
  --ink:#E8E1D5;         /* 暖象牙 */
  --ink-2:#CFC7BA;
  --ink-3:rgba(232,225,213,.55);
  --gold:#B69A70;        /* 鎢絲金：只來自「光」 */
  --hair:rgba(232,225,213,.08);
  --hair-2:rgba(232,225,213,.18);

  /* Serif＝電影／品牌　Sans＝資訊／功能 */
  --f-display:'Bodoni Moda',Georgia,'Times New Roman',serif;
  --f-serif-tc:'LMSerifTC','Noto Serif TC','Songti TC','PMingLiU',serif;
  --f-display-tc:'GenRyuTC','LMSerifTC','Noto Serif TC','PMingLiU',serif;
  --f-sans:system-ui,-apple-system,'Segoe UI','Noto Sans TC','PingFang TC',
           'Microsoft JhengHei',sans-serif;

  --pad-x:6vw;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);
     font:300 15px/1.9 var(--f-sans);-webkit-font-smoothing:antialiased;
     overflow-x:hidden}
a{color:var(--ink);text-decoration:none;transition:color .25s ease}
a:hover{color:var(--gold)}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
::selection{background:rgba(182,154,112,.35);color:var(--ink)}
img,video{max-width:100%;display:block}
h1,h2,h3,p{margin:0}

/* 錨點跳轉時讓出固定導覽列的高度，否則標題會被蓋掉 */
section[id]{scroll-margin-top:84px}
.skip{position:absolute;left:-9999px;top:0;z-index:99;padding:12px 20px;
      background:var(--bg);border:1px solid var(--gold);font-size:12px;letter-spacing:.2em}
.skip:focus{left:12px;top:12px}

/* ── 區塊標頭（SERVICES ── 我們的服務） ───────────────────── */
.sec-head{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.sec-head h2{font:400 15px/1 var(--f-display);letter-spacing:.42em}
.sec-head .rule{width:44px;height:1px;background:rgba(182,154,112,.5);align-self:center}
.sec-head .zh{font:300 12px/1 var(--f-sans);letter-spacing:.3em;color:var(--ink-2)}
.sec-head .aside{margin-left:auto;font-size:11px;letter-spacing:.25em;color:var(--ink-3)}
/* 首頁封面流只是精選；/works 是完整的作品頁，沒有這個入口就變孤兒頁 */
.sec-head .sec-more{font-size:11px;letter-spacing:.25em;color:var(--ink-2);white-space:nowrap}
.sec-head .sec-more:hover{color:var(--gold)}
.sec-head .aside + .sec-more{margin-left:0}
@media (max-width:52rem){
  .sec-head .aside{margin-left:0}
  .sec-head .sec-more{margin-left:auto}
}

/* ── ② 核心理念 ──────────────────────────────────────────────
   接 Hero 的門光。沒有分隔線、沒有硬邊：光先從上一屏透下來，
   再依序帶出右側人臉、左側文字。順序靠 transition-delay，不靠額外 JS 迴圈。 */
.creed{position:relative;overflow:hidden;background:var(--bg);
       min-height:min(78vh,720px);display:flex;align-items:center}

/* 從 Hero 門縫（x≈57.1%）延續下來的光柱＋暈開的地面反光。
   z-index 3：要蓋過人臉的上緣，接縫才看不出來 */
.creed-spill{position:absolute;left:0;right:0;top:0;height:72%;pointer-events:none;z-index:3;
  background:
    linear-gradient(to bottom,rgba(8,8,7,.92) 0%,rgba(8,8,7,.35) 9%,rgba(8,8,7,0) 26%),
    linear-gradient(to bottom,rgba(255,231,196,.20) 0%,rgba(255,231,196,0) 34%),
    radial-gradient(26% 46% at 57.1% -6%,rgba(255,224,178,.50) 0%,
                    rgba(255,224,178,.14) 46%,rgba(8,8,7,0) 82%),
    radial-gradient(72% 100% at 57.1% -18%,rgba(182,154,112,.20) 0%,rgba(8,8,7,0) 72%)}

.creed-grid{position:relative;z-index:1;display:grid;
            grid-template-columns:1.12fr 1fr;align-items:center;width:100%}
.creed-copy{padding:16vh var(--pad-x) 14vh}
/* 兩行是設計好的斷句，不讓瀏覽器自己折出孤字 */
.creed h2{font:900 clamp(20px,2.28vw,34px)/1.9 var(--f-display-tc);letter-spacing:-.008em;
          white-space:nowrap;font-synthesis-weight:none}
.creed-body{margin-top:4vh;font:300 clamp(13px,1.05vw,15px)/2.4 var(--f-sans);
            letter-spacing:.12em;color:var(--ink-2)}

.creed-face{position:relative;align-self:stretch;min-height:52vh}
.creed-face img{position:absolute;inset:0;width:100%;height:100%;
                object-fit:cover;object-position:62% 46%}
/* 四邊都化進底色，接回 Hero，不留圖框 */
.creed-face::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,var(--bg) 0%,rgba(8,8,7,.6) 22%,rgba(8,8,7,0) 56%),
             linear-gradient(to top,var(--bg) 0%,rgba(8,8,7,0) 26%),
             linear-gradient(to bottom,var(--bg) 0%,rgba(8,8,7,.5) 12%,rgba(8,8,7,0) 34%)}
.creed-more{position:absolute;right:var(--pad-x);bottom:6vh;z-index:2;
            display:inline-flex;align-items:center;gap:14px;
            font-size:11px;letter-spacing:.3em;color:var(--ink-2)}
.creed-more:hover{color:var(--gold)}

/* ── ③ SERVICES ───────────────────────────────────────────── */
.svc-track{position:relative;height:420vh}
.svc-stick{position:sticky;top:0;height:100vh;display:grid;
           grid-template-columns:minmax(420px,44%) 1fr;overflow:hidden}
.svc-list{display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad-x)}
.svc-list .sec-head{margin-bottom:7vh}
.svc-row{display:grid;grid-template-columns:52px 1fr;gap:18px;padding:2.1vh 0;
         cursor:pointer;opacity:.3;transition:opacity .9s ease;
         background:none;border:0;color:inherit;text-align:left;font:inherit;width:100%}
.svc-row[aria-current="true"]{opacity:1}
.svc-num{font:400 15px/1.4 var(--f-display);letter-spacing:.1em;color:var(--gold);padding-top:4px}
.svc-name{display:flex;align-items:center;gap:16px}
.svc-name b{font:500 24px/1.4 var(--f-serif-tc);letter-spacing:.12em}
.svc-name i{height:1px;width:56px;background:var(--gold);
            transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.svc-row[aria-current="true"] .svc-name i{transform:scaleX(1)}
.svc-en{margin-top:6px;font-size:11px;letter-spacing:.3em;color:var(--ink-2)}
/* 用 grid 的 0fr→1fr 展開，不寫死 max-height（中文換行後高度不定，寫死會截字） */
.svc-desc{display:grid;grid-template-rows:0fr;transition:grid-template-rows 1s var(--ease)}
.svc-desc > div{overflow:hidden}
.svc-row[aria-current="true"] .svc-desc{grid-template-rows:1fr}
.svc-desc p{margin-top:14px;max-width:34em;font:300 14px/2 var(--f-sans);
            letter-spacing:.08em;color:rgba(207,199,186,.85)}
.svc-stage{position:relative;margin:7vh var(--pad-x) 7vh 0}
.svc-shot{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease;
          border:1px solid var(--hair)}
.svc-shot[aria-hidden="false"]{opacity:1}
.svc-shot img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.02)}
.svc-vig{position:absolute;inset:0;box-shadow:inset 0 0 120px rgba(8,8,7,.9);pointer-events:none}

.svc-cards{display:none;padding:12vh 24px 6vh}
.svc-cards .sec-head{margin-bottom:40px}
.svc-card{margin-bottom:48px}
.svc-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--hair)}
.svc-card .t{display:flex;align-items:baseline;gap:14px;margin-top:18px}
.svc-card .t span:first-child{font:400 13px/1 var(--f-display);color:var(--gold)}
.svc-card .t span:last-child{font:500 20px/1.4 var(--f-serif-tc);letter-spacing:.1em}
.svc-card .en{margin:6px 0 0 34px;font-size:10px;letter-spacing:.28em;color:var(--ink-2)}
.svc-card p{margin:12px 0 0 34px;font:300 13px/1.9 var(--f-sans);letter-spacing:.06em;
            color:rgba(207,199,186,.85)}

/* ── ④ WORKS ─ 封面流 ─────────────────────────────────────────
   數學與互動在 assets/coverflow.js（沿用官網_上傳同一版），這裡只換皮。
   預設是可橫向捲動的一列；JS 掛上 .is-cf 之後才變 3D 疊卡。 */
.works{padding:14vh 0 12vh}
.works > .sec-head{padding:0 var(--pad-x);margin-bottom:6vh}

.cf{--cf-card:clamp(260px,36vw,520px);position:relative}
.cf-frame{overflow:hidden}
.cf-stage{display:flex;gap:clamp(12px,1.8vw,24px);overflow-x:auto;
          scroll-snap-type:x mandatory;padding:0 var(--pad-x) 16px;
          scrollbar-width:none}
.cf-stage::-webkit-scrollbar{display:none}
.cf-card{flex:0 0 var(--cf-card);scroll-snap-align:center}
.cf-card a{display:block;color:inherit}

.work-media,.cf-shot{position:relative;display:block;overflow:hidden;
     border:1px solid rgba(232,225,213,.07);background:var(--bg-2)}
.cf-shot img,.cf-shot video{display:block;width:100%;height:100%;
     aspect-ratio:16/9;object-fit:cover;
     transition:transform 1.2s var(--ease),filter 1.2s ease,opacity .6s ease}
.cf-shot video{position:absolute;inset:0;opacity:0}
.work.is-playing .cf-shot video{opacity:1}
.cf-play{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
         padding:8px 16px;border:1px solid rgba(182,154,112,.55);
         background:rgba(8,8,7,.55);backdrop-filter:blur(2px);
         font-size:10px;letter-spacing:.22em;color:var(--ink);
         opacity:0;transition:opacity .35s ease}
.cf-cap{display:block;text-align:center;padding:18px 8px 0}
.cf-cap b{display:block;font:500 clamp(17px,1.5vw,22px)/1.5 var(--f-serif-tc);
          letter-spacing:.1em;text-wrap:balance}
.cf-cap i{display:block;margin-top:6px;font-style:normal;font-size:11px;
          letter-spacing:.22em;color:var(--ink-2)}

/* 3D 模式 */
.cf.is-cf .cf-frame{padding:clamp(1.4rem,3vw,3rem) 0 clamp(.6rem,1.5vw,1.4rem);
     perspective:var(--cf-persp,1200px);cursor:grab;outline:none;touch-action:pan-y}
.cf.is-cf .cf-frame:active{cursor:grabbing}
.cf.is-cf .cf-frame:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.cf.is-cf .cf-stage{display:block;position:relative;overflow:visible;padding:0;
     transform-style:preserve-3d;
     height:calc(var(--cf-card) * 0.5625 + 5.6rem)}
.cf.is-cf .cf-card{position:absolute;left:50%;top:0;width:var(--cf-card);flex:none;
     will-change:transform,opacity;transform-style:preserve-3d}
.cf.is-cf .cf-card .cf-shot{box-shadow:0 28px 70px -20px rgba(0,0,0,.85)}
.cf.is-cf .cf-card.is-center .cf-shot{border-color:rgba(182,154,112,.32)}
@media (hover:hover){
  .cf.is-cf .cf-card.is-center:hover .cf-shot img{transform:scale(1.04);filter:brightness(1.15)}
  .cf.is-cf .cf-card.is-center:hover .cf-play{opacity:1}
}

.cf-nav{position:absolute;top:calc(50% - 2.8rem);z-index:200;display:none;
  place-items:center;width:46px;height:46px;padding:0;
  border:1px solid var(--hair-2);border-radius:50%;
  background:rgba(8,8,7,.6);color:var(--ink-2);backdrop-filter:blur(6px);cursor:pointer;
  transition:color .25s ease,border-color .25s ease,background .25s ease}
.cf.is-cf .cf-nav{display:grid}
.cf-nav svg{width:20px;height:20px}
.cf-nav:hover{color:var(--gold);border-color:rgba(182,154,112,.6);background:rgba(8,8,7,.85)}
.cf-prev{left:clamp(.5rem,3vw,3rem)}
.cf-next{right:clamp(.5rem,3vw,3rem)}

.cf-dots{display:none;justify-content:center;gap:.6rem;margin-top:4vh}
.cf.is-cf .cf-dots{display:flex}
.cf-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;
  background:var(--ink);opacity:.24;cursor:pointer;
  transition:opacity .25s ease,background .25s ease}
.cf-dots button[aria-current="true"]{opacity:1;background:var(--gold)}
.cf-dots button:focus-visible{outline:1px solid var(--gold);outline-offset:3px}

/* ── ⑤ FROM IDEA TO SCREEN ────────────────────────────────── */
.process{padding:10vh var(--pad-x) 14vh;border-top:1px solid var(--hair)}
.process .sec-head{margin-bottom:8vh}
/* icon 在左、文字在右，步驟之間用 → 隔開（照主視覺圖） */
.steps{list-style:none;margin:0;padding:0;display:grid;
       grid-template-columns:repeat(5,1fr);gap:clamp(16px,2.4vw,40px)}
.step{position:relative;display:flex;align-items:flex-start;gap:clamp(12px,1.2vw,20px)}
.step + .step::before{content:"→";position:absolute;left:calc(-1 * clamp(16px,2.4vw,40px) / 2);
  top:14px;transform:translateX(-50%);font-size:15px;color:rgba(182,154,112,.55);
  font-family:var(--f-sans);line-height:1}
.step-ic{flex:0 0 auto;width:clamp(34px,3.2vw,48px);height:clamp(34px,3.2vw,48px);
  fill:none;stroke:var(--gold);stroke-width:1.1;stroke-linecap:round;
  stroke-linejoin:round;opacity:.9}
.step.is-key .step-ic{opacity:1;filter:drop-shadow(0 0 10px rgba(182,154,112,.45))}
.step .n{font:400 12px/1 var(--f-display);letter-spacing:.12em;color:var(--gold)}
/* POST-PRODUCTION 一定會折兩行，五格都預留兩行高，中文才會對齊在同一條線 */
.step .en{margin-top:10px;font-size:clamp(11px,.92vw,13px);letter-spacing:.2em;
          line-height:1.4;min-height:2.8em;text-wrap:balance}
.step .zh{margin-top:8px;font:300 12px/1.7 var(--f-sans);letter-spacing:.1em;color:var(--ink-2)}

/* ── ⑥ 結尾（原 MANIFESTO 文案收在這裡） ────────────────────── */
.contact{position:relative;min-height:96vh;display:flex;flex-direction:column;
         align-items:center;justify-content:center;text-align:center;overflow:hidden;
         border-top:1px solid var(--hair);padding:18vh 24px 22vh}
.contact-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
            filter:brightness(1.9) saturate(1.05);transform:scale(1.35);
            transform-origin:58% 60%}
/* 光柱很亮，文字壓在上面會讀不到。中央先壓一層暗，再往外收 */
.contact::before{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse 62% 44% at 50% 46%,rgba(8,8,7,.72) 0%,
                             rgba(8,8,7,.5) 55%,rgba(8,8,7,0) 100%),
             radial-gradient(ellipse at 50% 55%,rgba(8,8,7,.3) 0%,rgba(8,8,7,.9) 78%)}
.contact-in{position:relative;z-index:2;max-width:min(1120px,90vw)}
.contact .eyebrow{font-size:11px;letter-spacing:.5em;text-indent:.5em;color:var(--gold);
                  margin-bottom:4vh}
.contact h2{font:400 clamp(30px,4.6vw,64px)/1.3 var(--f-display);letter-spacing:.08em;
            text-shadow:0 0 80px rgba(182,154,112,.3)}
/* 英文段拿掉之後只剩兩句，字可以放大、行距拉開，靠留白撐質感
   要壓過上面的 .contact h2，選擇器必須同級以上 */
.contact .creed-zh{font:900 clamp(20px,2.72vw,42px)/1.8 var(--f-display-tc);letter-spacing:-.006em;
          text-wrap:balance;font-synthesis-weight:none;
          text-shadow:0 0 80px rgba(182,154,112,.35)}
/* 斷句是設計好的（第二個逗號後），不交給瀏覽器折 */
.contact .creed-sub{margin:4.5vh auto 0;max-width:34em;
          font:400 clamp(14px,1.3vw,19px)/2.4 var(--f-serif-tc);
          letter-spacing:.14em;color:var(--ink-2)}
/* 一條細金線代替原本那兩行英文：不加字，但把文案跟按鈕分開 */
.closing-rule{width:56px;height:1px;margin:7vh auto 0;
          background:linear-gradient(to right,rgba(182,154,112,0),
                     rgba(182,154,112,.65),rgba(182,154,112,0))}
.cta-row{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:7vh}
.closing-rule + .cta-row{margin-top:6vh}
.cta{display:inline-flex;align-items:center;gap:14px;padding:16px 32px;
     border:1px solid rgba(232,225,213,.25);font:400 14px/1 var(--f-sans);
     letter-spacing:.2em;color:var(--ink-2);
     transition:border-color .25s ease,background .25s ease,color .25s ease}
.cta--lead{border-color:rgba(182,154,112,.5);color:var(--ink)}
.cta--lead:hover{border-color:var(--gold);background:rgba(182,154,112,.08);color:var(--ink)}
.cta:hover{border-color:rgba(232,225,213,.6);color:var(--ink)}

.site-foot{position:absolute;bottom:0;left:0;right:0;z-index:2;display:flex;flex-wrap:wrap;
           gap:16px 32px;align-items:baseline;justify-content:space-between;padding:28px 48px;
           font-size:11px;letter-spacing:.18em;color:var(--ink-3)}
.site-foot .brand{font:400 13px/1 var(--f-display);letter-spacing:.3em;color:var(--ink)}
.site-foot .brand i{font-style:normal;font-family:var(--f-serif-tc);letter-spacing:.2em;margin-left:.6em}
.site-foot nav{display:flex;gap:28px;flex-wrap:wrap}
.site-foot a{color:rgba(207,199,186,.7)}
/* 桌機頂部已有完整導覽，footer 只留社群；≤52rem 頂部導覽收起，才把站內入口放出來 */
.site-foot .foot-site{display:none}
@media (max-width:52rem){
  .site-foot .foot-site{display:flex;gap:20px 24px;order:1;width:100%;
                        padding-bottom:18px;border-bottom:1px solid var(--hair)}
}

/* ── 空氣裡的光顆粒 ─────────────────────────────────────────
   位置、大小、速度、飄移量寫在 HTML 的 CSS 變數裡（固定亂數產生）。
   負的 animation-delay 讓它們載入時就已經散在畫面各處，不會整批從底下同時出發。
   集中在左右兩側，中間留給內容。 */
.motes{position:fixed;inset:0;z-index:54;pointer-events:none;overflow:hidden;
       contain:strict}
.motes i{position:absolute;left:var(--x);top:104%;
  width:var(--s);height:var(--s);border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(255,241,219,1) 0%,rgba(255,226,183,.6) 38%,rgba(255,222,175,0) 70%);
  box-shadow:0 0 calc(var(--s) * 2.2) rgba(255,222,175,.45);
  will-change:transform,opacity;
  animation:mote var(--dur) linear var(--delay) infinite}
@keyframes mote{
  0%  {transform:translate3d(0,0,0) scale(.75);opacity:0}
  10% {opacity:var(--op)}
  72% {opacity:var(--op)}
  100%{transform:translate3d(var(--dx),-112vh,0) scale(1.15);opacity:0}}

/* ── 底片顆粒 ─────────────────────────────────────────────── */
.grain{position:fixed;inset:0;z-index:55;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDAiIGhlaWdodD0iMjQwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC45IiBudW1PY3RhdmVzPSIyIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjI0MCIgaGVpZ2h0PSIyNDAiIGZpbHRlcj0idXJsKCNuKSIvPjwvc3ZnPg==")}

/* ── 捲動揭示 ───────────────────────────────────────────────
   --rp 由 limerea.js 依元素在視窗中的位置逐幀寫入（0→1）。
   進場慢慢展開、離場慢慢淡掉，上下捲都成立。
   沒有 JS 時 --rp 缺省為 1，內容照樣完整呈現。 */
[data-reveal]{opacity:var(--rp,1);
              transform:translateY(calc((1 - var(--rp,1)) * 26px));
              will-change:opacity,transform}
/* sticky 的元素不吃位移，免得跟釘住的行為打架 */
[data-reveal].svc-stick{transform:none}
/* 光柱只淡，不位移 */
[data-reveal].creed-spill{transform:none}

/* ── RWD ──────────────────────────────────────────────────── */
@media (max-width:1100px){
  .steps{grid-template-columns:repeat(3,1fr);row-gap:clamp(32px,5vw,56px)}
  .step:nth-child(4)::before{content:none}
}
@media (max-width:900px){
  :root{--pad-x:24px}
  .svc-track{display:none}
  .svc-cards{display:block}
  /* 人臉移到文字上方，光柱仍然從 Hero 接下來 */
  .creed{min-height:auto;display:block}
  .creed-grid{grid-template-columns:1fr}
  .creed-face{min-height:44vh;order:-1}
  .creed-face img{object-position:60% 42%}
  .creed-face::after{background:linear-gradient(to bottom,rgba(8,8,7,.35) 0%,rgba(8,8,7,0) 30%),
                                linear-gradient(to top,var(--bg) 0%,rgba(8,8,7,0) 34%)}
  .creed-more{right:var(--pad-x);bottom:4vh}
  .creed-copy{padding:6vh var(--pad-x) 12vh}
  .cf{--cf-card:clamp(220px,66vw,340px)}
  .cf-nav{display:none!important}
  .site-foot{position:static;padding:40px 24px 28px;justify-content:flex-start;
             flex-direction:column;gap:14px}
  .contact{min-height:auto;padding:16vh 24px 6vh}
  .cta{width:100%;justify-content:space-between}
}
@media (max-width:560px){
  /* 窄到放不下整行就讓它折，孤字比溢出好 */
  .creed h2{white-space:normal;font-size:20px;letter-spacing:.06em}
  .steps{grid-template-columns:1fr;gap:30px}
  .step + .step::before{content:"↓";left:calc(clamp(30px,2.6vw,38px) / 2);top:-22px;
                        transform:translateX(-50%)}
}

/* ── 尊重 prefers-reduced-motion ─────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-reveal].pending{opacity:1;transform:none}
  .svc-track{height:auto}
  .svc-stick{position:static;height:auto;display:block}
  .svc-list{padding:12vh var(--pad-x)}
  .svc-row{opacity:1}
  .svc-desc{grid-template-rows:1fr}
  .svc-name i{transform:scaleX(1)}
  .svc-stage{display:none}
  .grain,.motes{display:none}
  /* 捲動揭示整組關閉，內容直接完整呈現 */
  [data-reveal]{opacity:1!important;transform:none!important}
}


/* ══ Hero（原樣移植自 _spec/brand/hero_final.html，定案勿改，見手冊 §8）══ */

:root{--ivory:#E8E1D5;--lit:0}
.hero{position:relative;height:100svh;overflow:hidden;background:#080807}
.hero-svg{position:absolute;inset:0;width:100%;height:100%;display:block}

/* 門的光：底圖已經有光，這層只負責「會動」的部分 */
.beam{mix-blend-mode:screen;opacity:calc(.30 + var(--lit)*.42);
      transform-origin:585.0px 50%;transform:scaleX(calc(1 + var(--lit)*.35))}
.halo{mix-blend-mode:screen}
.sweep{mix-blend-mode:screen}

/* ══ 進場 ══（2026-08-10 重排，比原版慢約 1.9 倍）
   全黑 → 門縫從一條線慢慢撐開 → 光透出來照亮地面 → 字標被光推開 → 映界 → 標語
   底圖本身就有地面的光，所以「照亮地面」＝把底圖淡進來，時間點壓在光柱撐開之後 */
.plate{animation:plateUp 2.6s ease-out 1.5s both}
@keyframes plateUp{from{opacity:0}to{opacity:1}}

/* 門縫：先長高成一條細線，再撐開寬度 */
.beam{animation:beamIn 2.4s cubic-bezier(.32,.06,.2,1) .35s both}
@keyframes beamIn{
  0%{opacity:0;transform:scaleY(.04) scaleX(.18)}
  22%{opacity:.5;transform:scaleY(1) scaleX(.18)}
  100%{opacity:1;transform:scaleY(1) scaleX(1)}}

/* 字標的遮罩：光縫掃開字的範圍 */
/* 起始寬度要壓到 0，不然被壓縮在光縫裡的字標會在全黑階段透出一條白線 */
.rev{transform:scale(.001,1);transform-origin:585.0px 250px;
     animation:rev 2.6s cubic-bezier(.22,.61,.24,1) 3.3s both}
@keyframes rev{to{transform:scale(1.06,1)}}
/* LIME 往左、REA 往右，各自從光柱位置被「推」出來 */
.lime{animation:pushL 2.5s cubic-bezier(.19,.72,.23,1) 3.4s both}
.rea {animation:pushR 2.5s cubic-bezier(.19,.72,.23,1) 3.4s both}
@keyframes pushL{from{transform:translate(278.14,276) scale(0.05100) translate(46px,0)}}
@keyframes pushR{from{transform:translate(278.14,276) scale(0.05100) translate(-46px,0)}}

/* ══ 環境 ══ 呼吸 7.4s */
.mark,.halo{animation:breathe 7.4s ease-in-out 7.2s infinite}
@keyframes breathe{0%,100%{filter:brightness(.985)}50%{filter:brightness(1.04)}}

/* ══ 光掃 9.7s ══ 從光柱往兩側推出去後淡掉 */
.bd{opacity:0}
.bd-r{animation:swR 9.7s cubic-bezier(.3,.5,.2,1) 7.6s infinite}
.bd-l{animation:swL 9.7s cubic-bezier(.3,.5,.2,1) 7.6s infinite}
@keyframes swR{0%{opacity:0;transform:translateX(-40%)}7%{opacity:.85}
  36%{opacity:.7;transform:translateX(92%)}48%{opacity:0;transform:translateX(118%)}
  100%{opacity:0;transform:translateX(118%)}}
@keyframes swL{0%{opacity:0;transform:translateX(40%)}7%{opacity:.85}
  36%{opacity:.7;transform:translateX(-92%)}48%{opacity:0;transform:translateX(-118%)}
  100%{opacity:0;transform:translateX(-118%)}}

/* ══ 曝光脈動 23.3s ══ 只作用在門的光，不作用在字 */
.beam{animation:beamIn 2.4s cubic-bezier(.32,.06,.2,1) .35s both,
                 expose 23.3s linear 8.2s infinite}
@keyframes expose{
  0%,11%{filter:url(#beamB) brightness(1)}
  12%{filter:url(#beamB) brightness(1.13)} 13.3%{filter:url(#beamB) brightness(.95)}
  14%,37%{filter:url(#beamB) brightness(1)}
  38%{filter:url(#beamB) brightness(1.07)} 39%,62%{filter:url(#beamB) brightness(1)}
  63%{filter:url(#beamB) brightness(1.16)} 64.4%{filter:url(#beamB) brightness(.94)}
  65.5%,88%{filter:url(#beamB) brightness(1)}
  89%{filter:url(#beamB) brightness(1.05)} 90%,100%{filter:url(#beamB) brightness(1)}}

/* ══ 字標下方 ══ */
.under{position:absolute;left:0;right:0;top:calc(50% + 8.4vw);text-align:center;
        pointer-events:none}
.hero-zh{width:clamp(92px,9.2vw,138px);margin:-2vw auto 0;color:var(--ivory);
     animation:rise 1.5s ease-out 6.1s both}
.hero-zh svg{display:block;width:100%;height:auto;fill:currentColor}
/* 標語壓在光柱上。試過墊一塊暗底（對比拉到 7.5:1），但那塊暗雲看得出來、太刻意。
   改成只給文字本身一圈貼身的暗影：光柱上的那幾個字維持若影若現，
   這是用戶指定的取捨 —— 氣氛優先於對比。 */
.tag{margin:5.4vw 0 0;color:var(--ivory);
      font:400 clamp(9px,.95vw,13px)/1 system-ui,sans-serif;
      letter-spacing:.6em;text-indent:.6em;animation:rise 1.5s ease-out 7.0s both;
      text-shadow:0 0 4px rgba(8,8,7,.92),0 0 9px rgba(8,8,7,.8),
                  0 0 20px rgba(8,8,7,.55),0 1px 2px rgba(8,8,7,.9)}
@keyframes rise{from{opacity:0;transform:translateY(9px)}to{opacity:.8;transform:none}}


/* ══ 真 HTML 的介面元件（原本烘在底圖裡，已抹除） ══ */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;
      justify-content:space-between;gap:1rem;padding:1.5rem clamp(1.2rem,3vw,3rem);
      font-family:ui-monospace,monospace}
/* 導覽壓在光柱上時實測只有 1.47:1，等於看不到。加一層頂部漸層擋光，
   不管下面捲到什麼畫面都保證讀得到 */
.nav::before{content:"";position:absolute;inset:0 0 auto;height:190%;z-index:-1;
      pointer-events:none;
      background:linear-gradient(to bottom,rgba(8,8,7,.92) 0%,rgba(8,8,7,.72) 42%,rgba(8,8,7,0) 100%)}
.nav .brand{color:#EFEAE0;text-decoration:none;font-size:clamp(13px,1.2vw,17px);
      letter-spacing:.34em;white-space:nowrap}
.nav .brand i{font-style:normal;margin-left:.7em;letter-spacing:.22em;opacity:.9}
.nav ul{display:flex;gap:clamp(.9rem,2.1vw,2.4rem);list-style:none;margin:0;padding:0}
.nav a{color:#CFC7BA;text-decoration:none;font-size:clamp(11px,.85vw,13px);letter-spacing:.2em}
.nav ul a:hover{color:#fff}
.nav .lang{color:#CFC7BA;font-size:clamp(10px,.8vw,12px);letter-spacing:.18em;white-space:nowrap}
.nav .lang b{font-weight:400;color:#fff}

.hero-foot,.play,.cue{animation:rise 1.5s ease-out 7.6s both}
/* 文案＋分隔線＋社群一組，由外層定位；分隔線高度會變，內部走文件流才不會打架 */
.hero-foot{position:absolute;left:clamp(1.2rem,3vw,3rem);bottom:clamp(3.4rem,7vh,6rem);z-index:2}
.lede{margin:0;color:#CFC7BA;font-size:clamp(11px,.92vw,14px);
      line-height:2.1;letter-spacing:.14em}
.lede::after{content:"";display:block;width:46px;height:1px;background:#5A544B;margin-top:1.5rem}

/* 收成內容寬：不然這個 block 會撐到文案那麼寬，跟右下的「觀看作品」框線重疊 */
.hero-social{display:flex;gap:1.1rem;margin-top:1.2rem;width:max-content}
.hero-social a{display:grid;place-items:center;width:34px;height:34px;
      border:1px solid rgba(207,199,186,.22);border-radius:50%;color:#CFC7BA;
      transition:color .25s ease,border-color .25s ease,background .25s ease}
.hero-social svg{width:15px;height:15px;fill:currentColor}
/* 信封是線條圖，CSS 的 fill 會蓋過 SVG 屬性，整個變成一塊白色方塊 */
.hero-social svg.ic-line{fill:none;stroke:currentColor;
      stroke-linecap:round;stroke-linejoin:round;width:16px;height:16px}
.hero-social a:hover{color:var(--gold);border-color:rgba(182,154,112,.6);
      background:rgba(182,154,112,.08)}
.hero-social a:focus-visible{outline:1px solid var(--gold);outline-offset:3px}

.play{position:absolute;right:clamp(1.2rem,3vw,3rem);bottom:clamp(3.6rem,7.4vh,6.2rem);
      display:flex;align-items:center;gap:.9rem;color:#DED7CB;text-decoration:none;
      font-size:clamp(11px,.9vw,14px);letter-spacing:.2em}
.play .ring{display:grid;place-items:center;width:44px;height:44px;border-radius:999px;
      border:1px solid #6B6459;font-size:10px;transition:border-color .3s,color .3s}
.play:hover .ring{border-color:#B69A70;color:#B69A70}

.cue{position:absolute;left:50%;transform:translateX(-50%);bottom:1.4rem;
     color:#7C756A;letter-spacing:.42em;font-size:10px}
.cue::after{content:"";display:block;width:1px;height:26px;background:#4A443B;margin:.7rem auto 0}

@media (max-width:52rem){
  .nav ul,.nav .lang{display:none}
  .lede{font-size:11px;line-height:1.9}
  /* 手機的導覽收起來了，社群更要看得到，圈子放大到 44px 好按 */
  .hero-social a{width:44px;height:44px}
  .hero-social svg{width:17px;height:17px}
  /* 窄螢幕的底部本來就擠：SCROLL 跟「觀看作品」原本就相疊 11px，
     加了三個社群 icon 更擠。觀看作品抬到文案那一行的右側；
     SCROLL 收掉 —— 手機本來就用捲的，這個提示是三者裡最不需要的一個。 */
  .play{bottom:auto;top:calc(100% - clamp(3.4rem,7vh,6rem) - 8.6rem)}
  .cue{display:none}
  .play b{font-weight:400}
}
/* 320 這種寬度連「觀看作品」四個字都塞不下，只留圓圈，字給 aria-label */
@media (max-width:22rem){
  .play b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .play{gap:0}
}

@media (prefers-reduced-motion:reduce){
  .rev{animation:none;transform:none}
  .beam,.mark,.halo,.bd,.lime,.rea,.hero-zh,.tag,.plate,
  .hero-foot,.play,.cue{animation:none!important}
  .hero-zh,.tag{opacity:.8} .bd{opacity:0} .plate{opacity:1}
  .lime,.rea{transform:translate(278.14,276) scale(0.05100)}
}
/* ── Hero 移植後的整合補丁（只補整合需要的，不動 Hero 本身視覺） ── */
.nav{z-index:40;background:linear-gradient(to bottom,rgba(8,8,7,.88),rgba(8,8,7,0))}
.nav ul a{transition:color .25s ease}