/* AfterTaste HK — 首頁動畫樣式
   由 build-webflow.py 生成,唔好手改 —— 改 prototype.html 再重跑。
   全部規則 scope 咗喺 .at-home 之下,Webflow 自己個 nav / footer 唔受影響。
   #mark / #basket 係 z-index 3 / 4,你個 nav 要 ≥ 50 先會蓋得住。 */
:root{
  --plum:#57233D; --apricot:#D9884A; --apricot-text:#B16225;
  --apricot-light:#F0A868; --success:#1F6B4A;
  --bg:#F9F4EF; --body:#2B2422;
  --font:'Noto Sans HK',-apple-system,'PingFang HK','Microsoft JhengHei',sans-serif;
}
.at-home *,.at-home *::before,.at-home *::after{box-sizing:border-box}
body{background:var(--bg)}
/* position:sticky 係成套動畫嘅命脈:body 一旦 overflow 唔係 visible,
   佢就會變成捲動容器,七幕全部唔會釘住 —— 而且冇任何錯誤訊息。
   Webflow Designer 可以喺 Body 落 overflow,所以喺呢度用
   body.body（0,1,1）蓋過 Webflow 嘅 .body（0,1,0)。 */
body.body,body{overflow:visible}
.at-home{color:var(--body);font-family:var(--font);font-weight:400;
         -webkit-font-smoothing:antialiased}
.at-home img,.at-home video{display:block;max-width:100%}

/* ── 品牌標誌:成個 scroll 得一件物件,環同叉分開控制 ──────────────
   #markT 每一格用螢幕像素改 transform。環已正規化做圓心(0,0)、半徑 1,
   所以 scale(RX,RY) 直接就係想要嘅螢幕半徑;RY<RX 就自然變透視橢圓。 */
#mark{position:fixed;inset:0;z-index:3;pointer-events:none}
#mark #ring,#mark #fork,#mark .flourish{transition:none}

/* ── 蒸籠:獨立疊層,幾何全部用螢幕像素直接寫,冇 viewBox ─────── */
#basket{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0}
#basket path{fill:var(--plum);stroke:none}

.act{position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
       display:flex;align-items:center;justify-content:center}
.media{position:absolute;inset:0;z-index:0}
.media img,.media video{width:100%;height:100%;object-fit:cover}
.veil{position:absolute;inset:0;z-index:1}
.copy{position:relative;z-index:10;text-align:center;padding:0 24px;max-width:820px}

.at-home h1{font-size:clamp(38px,7.2vw,88px);font-weight:600;line-height:1.1;
   letter-spacing:-.02em;color:var(--plum);text-wrap:balance}
.at-home h2{font-size:clamp(26px,4.2vw,52px);font-weight:600;line-height:1.28;
   letter-spacing:-.01em;color:var(--plum);text-wrap:balance}
.lede{margin-top:20px;font-size:clamp(15px,1.6vw,19px);font-weight:300;
      line-height:1.85;color:var(--body);max-width:34em;margin:20px auto 0}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
         color:var(--apricot-text);margin-bottom:20px}

#act1 .veil{background:linear-gradient(180deg,rgba(249,244,239,.86) 0%,rgba(249,244,239,.62) 46%,rgba(249,244,239,.94) 100%)}
#act1 .copy{transform:translateY(13vh)}
.cue{position:absolute;left:50%;bottom:38px;z-index:11;transform:translateX(-50%);
     display:flex;flex-direction:column;align-items:center;gap:9px;
     font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--apricot-text)}
.cue .bar{display:block;width:1px;height:34px;
       background:linear-gradient(180deg,var(--apricot-text),transparent);
       animation:drop 1.9s ease-in-out infinite}
@keyframes drop{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* 第一幕條片由 JS 擺位(placeVideo),唔交畀 object-fit —— cover 會隨
   視窗比例喺「就闊」同「就高」之間跳,裁切位唔受控。 */
#act1 .media video{position:absolute;left:0;top:0;width:auto;height:auto;
                   max-width:none;object-fit:fill}
#act2 .media{opacity:0}
/* 呢張相由 JS 擺位(fit / applyPos),唔可以交返畀 object-fit */
#act2 .media img{position:absolute;left:0;top:0;width:auto;height:auto;
                 max-width:none;object-fit:fill}
/* 字喺 20–38% 高度:嗰帶要夠米色托住,否則啲字會同碟邊、食物邊撞在一起。
   之後要順滑清走,而且喺 60%(蒸籠所在)之前完全清曬 —— 蒸籠係重頭戲,
   蒙住就冇曬效果。原本 .34@42% → 0@68% 落得太急,所以見到一條硬邊。 */
#act2 .veil{background:linear-gradient(180deg,
   rgba(249,244,239,.95) 0%,
   rgba(249,244,239,.90) 24%,
   rgba(249,244,239,.72) 34%,
   rgba(249,244,239,.38) 45%,
   rgba(249,244,239,.12) 54%,
   rgba(249,244,239,0)   64%)}
/* 啲字再加一圈好淡嘅米色光暈,令字邊同背景嘅碟邊分得開。
   唔係陰影 —— 陰影喺淺底會變髒。 */
#act2 h2{text-shadow:0 1px 18px rgba(249,244,239,.95),0 0 42px rgba(249,244,239,.7)}
#act2 .copy{transform:translateY(-19vh)}

#act3 .stage{flex-direction:column}
.steps{position:relative;z-index:10;display:grid;grid-template-columns:repeat(3,1fr);
       gap:clamp(14px,2.4vw,34px);width:min(92vw,1120px);align-items:start}
.step{opacity:0;transform:translateY(34px);
      transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.step.on{opacity:1;transform:none}
.step .fig{border-radius:16px;overflow:hidden;aspect-ratio:4/5;margin-bottom:18px;
             box-shadow:0 18px 46px -22px rgba(43,36,34,.42)}
.step img{width:100%;height:100%;object-fit:cover}
.step .n{display:inline-flex;align-items:center;justify-content:center;
         width:26px;height:26px;border-radius:50%;font-size:12px;font-weight:600;
         background:var(--plum);color:#fff;margin-bottom:10px}
.step h3{font-size:clamp(17px,1.9vw,22px);font-weight:600;color:var(--plum);margin-bottom:7px}
.step p{font-size:14px;font-weight:300;line-height:1.75;color:#6E605A}
#act3 .head{position:relative;z-index:10;text-align:center;margin-bottom:clamp(26px,4vh,52px)}

.amount{position:relative;z-index:10;text-align:center}
.amount .num{font-size:clamp(56px,11vw,132px);font-weight:600;letter-spacing:-.035em;
             color:var(--success);font-variant-numeric:tabular-nums;line-height:1}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px}
.chip{font-size:13px;padding:9px 17px;border-radius:999px;border:1px solid #E7DDD3;
      background:#fff;color:var(--body);opacity:0;transform:translateY(12px);
      transition:all .45s cubic-bezier(.16,1,.3,1)}
.chip.on{opacity:1;transform:none}

/* ── 分餐帳:個數字唔再係淨係跳,而係逐餐加上去 ─────────────────
   每一行喺個總數行到佢嘅累計額嗰刻先出現,所以數字同帳一定夾。 */
.ledger{margin:24px auto 0;width:min(88vw,428px);
        border-top:1px solid rgba(87,35,61,.14)}
.ledger .row{display:flex;align-items:center;gap:11px;padding:10px 2px;
             border-bottom:1px solid rgba(87,35,61,.10);
             opacity:0;transform:translateY(9px);
             transition:opacity .4s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.ledger .row.on{opacity:1;transform:none}
.ledger svg{flex:0 0 auto;display:block}
.ledger .d{font-size:12.5px;color:#9C8E86;font-variant-numeric:tabular-nums;
           letter-spacing:.01em}
.ledger .m{flex:1;text-align:left;font-size:14px;color:var(--body)}
.ledger .a{font-size:14px;font-weight:600;color:var(--success);
           font-variant-numeric:tabular-nums}

/* ── 核實印:喺第五幕自己畫出嚟 ───────────────────────────────── */
#seal{display:block;margin:0 auto 18px;width:clamp(168px,18vw,228px);height:auto}
/* 每粒星要繞自己個中心縮放,唔係繞成個 SVG —— 冇 fill-box 就會飛出去 */
#seal path{fill:var(--apricot-light);transform-box:fill-box;transform-origin:center}
/* 已驗證食客 badge —— 頂替咗原本嘅 eyebrow,兩者講緊同一件事 */
#verified{display:flex;align-items:center;gap:7px;width:max-content;
          margin:0 auto 30px;padding:7px 16px 7px 11px;border-radius:999px;
          background:rgba(240,168,104,.13);
          box-shadow:inset 0 0 0 1px rgba(240,168,104,.40);
          font-size:13px;font-weight:500;letter-spacing:.04em;
          color:var(--apricot-light);
          opacity:0;transform:translateY(9px);
          transition:opacity .5s ease,transform .55s cubic-bezier(.16,1,.3,1)}
#verified.on{opacity:1;transform:none}

#act5 .stage{background:var(--plum)}
#act5 h2{color:#fff}
#act5 .eyebrow{color:var(--apricot-light)}
.lines{margin-top:34px;display:flex;flex-direction:column;gap:14px;align-items:center}
.lines .line{font-size:clamp(19px,2.7vw,30px);font-weight:300;color:#fff;
            opacity:0;transform:translateY(16px);
            transition:all .6s cubic-bezier(.16,1,.3,1)}
.lines .line.on{opacity:1;transform:none}

#act6 .head{text-align:center}
#act6 .stage{flex-direction:column;justify-content:center;align-items:stretch;
             gap:34px;padding:0 6vw}
.strip{display:flex;gap:18px;min-width:0;will-change:transform}
.strip .fig{flex:0 0 clamp(220px,26vw,340px);aspect-ratio:3/4;border-radius:14px;overflow:hidden}
.strip img{width:100%;height:100%;object-fit:cover}

.signoff{display:block;width:clamp(152px,16.5vw,212px);height:auto;margin:0 auto 30px}
/* 逐件砌返個標誌。環同叉喺一個 scale(0.1,-0.1) 嘅 group 入面,但 scale
   唔怕翻轉;字嗰三條自己帶 translate 屬性,所以包咗層 <g> 先做動畫,
   否則 CSS transform 會覆蓋屬性,啲字會彈去原點。 */
#s7-ring path,#s7-fork path,#s7-word,#s7-tag1,#s7-tag2{
  opacity:0;transform-box:fill-box;transform-origin:center}
.btn{display:inline-flex;align-items:center;justify-content:center;margin-top:26px;
     padding:15px 38px;border-radius:11px;background:var(--plum);color:#fff;
     font-size:15px;font-weight:600;text-decoration:none;letter-spacing:.02em;
     transition:transform .18s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(87,35,61,.7)}
.btn:focus-visible{outline:2px solid var(--apricot-text);outline-offset:3px}
/* 次要掣:唔可以同主掣爭 —— 只用細邊框,唔上底色 */
.btn.ghost{background:transparent;color:var(--plum);
           box-shadow:inset 0 0 0 1.5px rgba(87,35,61,.26)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px rgba(87,35,61,.55)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.cta-row .btn{margin-top:0}
.cta-note{margin-top:14px;font-size:13px;font-weight:300;color:#6E605A}



@media (max-width:820px){
  /* 手機照跑成套捲動動畫，呢度只係令排版塞得落一個直度螢幕 */
  
  /* ── 手機開場:品牌個環係一個圓窗,條片喺入面播 ──────────────────
     圓窗、文案、第二幕標題嘅準確位置由 JS(mobileRing)按螢幕計,
     呢度只係起手值,JS 未行都唔會散版。 */
  #act1 .veil{display:none}
  #act1 .media{inset:auto;left:50%;top:30%;width:224px;height:224px;
               border-radius:50%;overflow:hidden;clip-path:circle(50%);
               /* Safari:有 transform 嘅父層,video 唔跟 border-radius 裁,要加遮罩 */
               -webkit-mask-image:-webkit-radial-gradient(white,black);
               isolation:isolate;
               transform:translate(-50%,-50%);will-change:transform}
  #act1 .copy{position:absolute;left:0;right:0;top:52%;transform:none;padding:0 22px}
  #act1 .lede{margin-top:16px;font-size:14.5px;line-height:1.75}
  #act1 .cta-row{margin-top:22px}
  #act1 .cta-note{margin-top:10px}
  .cue{display:none}
  /* 第二幕標題落喺個環正中 */
  #act2 .copy{position:absolute;left:0;right:0;top:30%;transform:translateY(-50%);padding:0 36px}
  #act2 h2{font-size:21px;line-height:1.45}

  /* 第三幕：三張 4:5 卡疊埋要 1,300px，塞唔落一個釘住嘅螢幕。
     改做「細方圖 + 文字」一行一張，三行加埋約 350px。 */
  .steps{grid-template-columns:1fr;gap:16px;width:min(88vw,420px)}
  .step{display:grid;grid-template-columns:92px 1fr;column-gap:16px;
        align-items:center;text-align:left}
  .step .fig{grid-row:1 / span 3;aspect-ratio:1/1;margin:0;border-radius:12px;
             box-shadow:0 10px 26px -16px rgba(43,36,34,.45)}
  .step .n{margin-bottom:4px;width:22px;height:22px;font-size:11px}
  .step h3{margin-bottom:2px}
  .step p{font-size:13px;line-height:1.6}
  #act3 .head{margin-bottom:22px}
  #act3 .cta-row{margin-top:22px}

  /* 第六幕：卡細啲，一屏見到一張半，靠捲動推 */
  .strip .fig{flex-basis:62vw}
}
/* 矮手機（iPhone SE 等）：「往下」會撞到掣 */
@media (max-width:820px) and (max-height:700px){
  .cue{display:none}
}
/* 省電模式下 iPhone 唔自動播,會喺片中間出個大播放掣 —— 收埋,淨係見封面 */
video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
video::-webkit-media-controls{display:none!important}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .step,.chip,.lines .line{opacity:1!important;transform:none!important}
}