/* 官網首屏原型 A/B/C 共用：字型、色票、按鈕、進場材質化、原型切換列 */
@font-face{font-family:"IG Headline";src:url(assets/fonts/ig-headline.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"IG Sans";src:url(assets/fonts/ig-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IG Sans";src:url(assets/fonts/ig-sans-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --ink:#1A1714;--ink2:rgba(26,23,20,.6);--ink3:rgba(26,23,20,.38);--line:rgba(26,23,20,.08);
  --pink:#F84568;--pink-l:#FFB5C3;--purple:#6843F4;--purple-l:#B5A1FF;--orange:#F15E00;--orange-l:#FFCB92;--cream:#F9F1E5;
  /* 全站只用三條曲線 */
  --e-enter:cubic-bezier(.22,.9,.28,1);--e-settle:cubic-bezier(.34,1.46,.5,1);--e-page:cubic-bezier(.45,0,.25,1);
  --display:"IG Headline","PingFang TC","Noto Sans TC",system-ui,sans-serif;
  --text:"IG Sans",-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --kai:"Kaiti TC","BiauKai","STKaiti",serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--text);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:rgba(248,69,104,.22)}
:focus-visible{outline:2px solid var(--purple);outline-offset:3px;border-radius:8px}

/* 導覽列 */
.nav{position:fixed;inset:0 0 auto;height:64px;display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(18px,3.4vw,40px);z-index:50;pointer-events:none}
.nav>*{pointer-events:auto}
/* 捲動後：像 iOS 26 的邊緣效果——沒有硬邊，越靠上越不透明、越模糊，往下慢慢淡掉 */
.nav::before{content:"";position:absolute;left:0;right:0;top:0;height:112px;opacity:0;transition:opacity .4s var(--e-page);pointer-events:none;
  background:linear-gradient(180deg,var(--page,#FBFAF8) 0%,color-mix(in srgb,var(--page,#FBFAF8) 78%,transparent) 42%,color-mix(in srgb,var(--page,#FBFAF8) 0%,transparent) 100%);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 38%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 38%,transparent 100%)}
.nav.solid::before{opacity:1}
.nav>*{position:relative}
.brand{display:flex;align-items:center;gap:10px;font:700 18px/1 var(--display);letter-spacing:-.015em;text-decoration:none}
.brand img{width:30px;height:30px;border-radius:8px;box-shadow:0 1px 2px rgba(26,23,20,.12)}

/* 按鈕：只有按下／放開，沒有 hover */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:52px;padding:0 24px;border-radius:999px;
  background:var(--ink);color:#fff;font:500 16px/1 var(--text);text-decoration:none;white-space:nowrap;
  transition:transform .4s var(--e-settle);touch-action:manipulation}
.btn:active{transform:scale(.95);transition-duration:.12s}
.btn svg{width:18px;height:18px;margin-top:-2px}
.btn.sm{height:38px;padding:0 16px;font-size:14px;gap:7px}
.btn.sm svg{width:14px;height:14px}
.fine{font-size:13px;color:var(--ink3);letter-spacing:.01em}

/* 標題 */
.h1{font:700 clamp(46px,7.4vw,104px)/1.02 var(--display);letter-spacing:-.03em}
:lang(zh-Hant) .h1{letter-spacing:-.01em;line-height:1.08;font-feature-settings:"halt"}
.sub{font-size:clamp(16px,1.45vw,19px);line-height:1.6;color:var(--ink2)}

/* 進場：模糊→清楚＋上浮＋淡入；blur 在 55% 就收乾淨 */
.mat{opacity:0}
.ready .mat{animation:mat 1.1s var(--e-enter) both;animation-delay:calc(var(--i,0)*220ms + 100ms)}
@keyframes mat{0%{opacity:0;transform:translateY(15px);filter:blur(10px)}55%{filter:blur(0)}100%{opacity:1;transform:none;filter:none}}

/* 原型切換列（正式版不會有） */
.proto{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:80;display:flex;gap:2px;padding:4px;
  border-radius:999px;background:rgba(26,23,20,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 8px 24px rgba(26,23,20,.18)}
.proto a{height:34px;min-width:44px;padding:0 14px;display:grid;place-items:center;border-radius:999px;color:rgba(255,255,255,.66);
  font:500 13px/1 var(--text);text-decoration:none;white-space:nowrap}
.proto a.on{background:#fff;color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .mat,.ready .mat{opacity:1;animation:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}