/*!
 * 03-hero.css
 * 首屏與剪刀插圖動畫
 *
 * 崇成工廠官網 — 由已驗證的原型拆分而來，勿隨意改動色值與斷點：
 * 全站文字對比達 WCAG AA 4.5:1，320–1920px 無水平溢出。
 */

/* ============ hero ============ */
.hero{
  position:relative;overflow:hidden;color:#fff;
  padding:clamp(48px,7vw,86px) 0 clamp(52px,7vw,80px);
  background:linear-gradient(100deg,var(--hero-dark) 0%,var(--hero-mid) 46%,var(--hero-mid2) 74%,var(--olive-light) 100%);
}
.hero::after{
  content:"";position:absolute;inset:auto 0 -1px 0;height:2px;background:var(--ink);opacity:.12;
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center}
.hero h1{color:#fff;text-shadow:0 2px 0 rgba(37,39,9,.12)}
.hero h1 .cut{display:block;color:var(--yellow)}
.hero .lede{margin:22px 0 30px;color:#FAFBE8}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-meta{
  margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.32);
  font-family:var(--f-mono);font-size:12px;letter-spacing:.05em;color:#F0F2D8;
  display:flex;gap:8px 20px;flex-wrap:wrap;
}
.hero-art{position:relative;display:grid;place-items:center;min-height:320px}
.hero-art svg{width:min(100%,430px);height:auto;overflow:visible}
.plate{
  position:absolute;right:0;bottom:0;background:var(--white);border:1px solid var(--line);
  border-left:3px solid var(--amber);border-radius:var(--r);padding:14px 16px;max-width:250px;
  font-family:var(--f-mono);font-size:11.5px;line-height:1.75;color:var(--ink-2);
  box-shadow:0 18px 34px -26px rgba(18,38,30,.55);
}
.plate b{display:block;font-size:11px;letter-spacing:.14em;color:var(--amber-2);margin-bottom:6px}
.plate{border-left-color:var(--red)}

/* blade sweep animation */
@keyframes closeL{from{transform:rotate(-15deg)}to{transform:rotate(0)}}
@keyframes closeR{from{transform:rotate(15deg)}to{transform:rotate(0)}}
@keyframes traceIn{from{stroke-dashoffset:300}to{stroke-dashoffset:0}}
#armL{transform-origin:200px 214px;animation:closeL 1.1s cubic-bezier(.2,.8,.25,1) .25s both}
#armR{transform-origin:200px 214px;animation:closeR 1.1s cubic-bezier(.2,.8,.25,1) .25s both}
#cutArc{stroke-dasharray:300;animation:traceIn 1.2s ease .9s both}


/* ============ marks strip ============ */
.marks{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--white)}
.marks-in{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line)}
.mark{background:var(--white);padding:22px 18px;text-align:left}
.mark b{display:block;font-family:var(--f-display);font-size:26px;font-weight:800;font-stretch:110%;line-height:1;color:var(--ink)}
.mark{border-top:3px solid var(--olive)}
.mark span{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);display:block;margin-top:7px}