/* ==========================================================================
   棒棒的bonbon｜品牌入口首頁 CSS
   設計方向：深色鍛造工作室風 — 冷金屬灰 + 暖爐火橙的對比
   ========================================================================== */

/* --- 色彩／版面 變數：改配色只需要動這裡 --- */
:root{
  --bg:#14120f;          /* 主背景：炭黑，像熄了火的爐邊 */
  --bg-2:#1b1815;
  --surface:#201c18;     /* 卡片底色 */
  --surface-2:#262119;
  --line:#3a352d;         /* 分隔線／邊框 */
  --steel:#8d96a0;        /* 冷色：鋼灰，用於次要文字與線條 */
  --steel-pale:#c7d0d6;   /* 冷色（亮）：用於深色底上的強調文字 */
  --ember:#c98a3e;         /* 暖色：爐火橙，主要強調色 */
  --glow:#e8873b;          /* 暖色（亮）：hover / 動態高光 */
  --paper:#ece6da;         /* 正文文字色（米白，像紙） */
  --paper-dim:#a9a196;     /* 次要正文文字色 */
  --max:1120px;            /* 內容區最大寬度 */
}

/* --- 基礎重置 --- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--bg);
  color:var(--paper);
  font-family:'Noto Sans TC','Inter',sans-serif;
  font-weight:300;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* 極細髮絲紋 + 兩道色暈，模擬深色工作室裡的打光，純CSS不需要圖片 */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse at 20% -10%, rgba(201,138,62,0.10), transparent 55%),
    radial-gradient(ellipse at 100% 30%, rgba(141,150,160,0.08), transparent 50%);
}

a{color:inherit;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}

/* 小型標籤字體：模擬刀具上「打印字號」的質感，用在眉題／狀態標籤 */
.mono{
  font-family:'JetBrains Mono', monospace;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-size:0.72rem;
}

/* --- 眉題（每個區塊開頭的「NO.01 目前作品 ────」列） --- */
.eyebrow{
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--steel);
  margin-bottom:22px;
}
.eyebrow .num{color:var(--ember);}
.eyebrow .rule{
  flex:1;
  height:1px;
  background:var(--line);
  position:relative;
  overflow:hidden;
}
/* 簽名動效：一道亮光像光線掃過刀鋒，緩慢掃過分隔線 */
.eyebrow .rule::after{
  content:"";
  position:absolute;
  top:0; left:-40%;
  width:40%; height:100%;
  background:linear-gradient(90deg, transparent, var(--glow), transparent);
  animation:glint 5s ease-in-out infinite;
}
@keyframes glint{
  0%{left:-40%;}
  45%{left:110%;}
  100%{left:110%;}
}

h1,h2,h3{margin:0; font-family:'Noto Serif TC', serif; font-weight:900; color:var(--paper);}

.latin{font-family:'Fraunces', serif; font-style:italic; font-weight:500;}

/* ==========================================================================
   導覽列
   ========================================================================== */
header{
  position:sticky; top:0; z-index:20;
  backdrop-filter:blur(10px);
  background:rgba(20,18,15,0.72);
  border-bottom:1px solid var(--line);
}
nav.wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.brandmark{
  display:flex; align-items:baseline; gap:10px;
  font-size:1.25rem;
  color:var(--paper);
}
.brandmark .latin{font-size:1.4rem; color:var(--ember);}
nav a.contact{
  font-family:'JetBrains Mono', monospace;
  font-size:0.78rem;
  letter-spacing:0.05em;
  color:var(--steel-pale);
  border:1px solid var(--line);
  padding:9px 16px;
  border-radius:2px;
  transition:border-color .25s, color .25s;
}
nav a.contact:hover, nav a.contact:focus-visible{
  border-color:var(--ember);
  color:var(--glow);
  outline:none;
}

/* ==========================================================================
   Hero 區塊（開頭主視覺標語）
   ========================================================================== */
.hero{
  position:relative; z-index:1;
  padding:120px 0 96px;
}
.hero .mono.tag{color:var(--steel); margin-bottom:28px; display:block;}
.hero .mono.tag::before{content:"◆ "; color:var(--ember);}
.hero h1{
  font-size:clamp(2.4rem, 5.4vw, 4.6rem);
  line-height:1.18;
  letter-spacing:0.01em;
}
.hero h1 .accent{color:var(--ember);}
.hero-rule{
  height:2px;
  width:220px;
  margin:34px 0 34px;
  background:linear-gradient(90deg, var(--ember), var(--steel), transparent);
  position:relative;
  overflow:hidden;
}
.hero-rule::after{
  content:"";
  position:absolute; top:0; left:-60%;
  width:60%; height:100%;
  background:linear-gradient(90deg, transparent, #fff, transparent);
  opacity:0.85;
  animation:glint 4.5s ease-in-out infinite;
  animation-delay:1s;
}
.hero p.lede{
  max-width:560px;
  font-size:1.08rem;
  color:var(--paper-dim);
}
.hero-scroll{
  margin-top:64px;
  display:flex; align-items:center; gap:12px;
  color:var(--steel);
}
.hero-scroll .line{width:1px; height:34px; background:var(--line); position:relative; overflow:hidden;}
.hero-scroll .line::after{
  content:""; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:linear-gradient(180deg, transparent, var(--glow));
  animation:drop 2.2s ease-in-out infinite;
}
@keyframes drop{ 0%{top:-100%;} 100%{top:100%;} }

/* ==========================================================================
   區塊共用樣式（每個 <section> 之間用一條細線隔開）
   ========================================================================== */
section{position:relative; z-index:1; padding:88px 0;}
section + section{border-top:1px solid var(--line);}

/* ==========================================================================
   頁尾
   ========================================================================== */
footer{
  padding:56px 0 64px;
  border-top:1px solid var(--line);
}
.footer-grid{
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px;
}
.footer-mark{font-size:1.1rem;}
.footer-mark .latin{color:var(--ember);}
.footer-contact a{
  font-family:'JetBrains Mono', monospace;
  font-size:0.92rem;
  color:var(--steel-pale);
  text-decoration:none;
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
  transition:color .25s, border-color .25s;
}
.footer-contact a:hover, .footer-contact a:focus-visible{color:var(--glow); border-color:var(--ember); outline:none;}
.footer-copy{
  margin-top:28px;
  font-family:'JetBrains Mono', monospace;
  font-size:0.7rem;
  letter-spacing:0.05em;
  color:var(--steel);
}

/* ==========================================================================
   捲動顯示動畫：區塊捲到畫面內時淡入＋輕微上移（由 index.html 內的 JS 加上 .show）
   ========================================================================== */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
.reveal.show{opacity:1; transform:translateY(0);}

/* 使用者開啟「減少動態效果」時，關閉所有動畫與轉場 */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
  .reveal{opacity:1; transform:none;}
}

/* ==========================================================================
   RWD 響應式：平板／手機
   ========================================================================== */
@media (max-width: 860px){
  .hero{padding:88px 0 64px;}
}
@media (max-width: 520px){
  .wrap{padding:0 20px;}
  nav a.contact{font-size:0.68rem; padding:7px 12px;}
}