/* shared interaction layer — cursor, curtain, reveals, micro-interactions */
#cur { position: fixed; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%;
  background: #ffcf7d; z-index: 200; pointer-events: none; opacity: 0;
  transform: translate(-50%,-50%); mix-blend-mode: difference;
  transition: width .22s cubic-bezier(.19,1,.22,1), height .22s cubic-bezier(.19,1,.22,1), opacity .3s; }
#cur.big { width: 46px; height: 46px; }
@media (hover: none), (pointer: coarse) { #cur { display: none; } }

#curtain { position: fixed; inset: -2% 0; background: #070604; z-index: 150;
  transform: translateY(104%); pointer-events: none;
  transition: transform .55s cubic-bezier(.72,0,.18,1); }
#curtain::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: #e8b45a; }
#curtain.on { transform: none; }
#curtain.out { transform: translateY(-104%); }
#curtain.snap { transition: none; }

.hud .links a { position: relative; }
.hud .links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -4px;
  height: 1.5px; background: #e8b45a; transition: right .28s cubic-bezier(.19,1,.22,1); }
.hud .links a:hover::after { right: 0; }

.sec { opacity: 0; transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.19,1,.22,1), transform .7s cubic-bezier(.19,1,.22,1); }
.sec.in { opacity: 1; transform: none; }
.pagehero h1 { clip-path: inset(0 0 100% 0); transition: clip-path .9s cubic-bezier(.19,1,.22,1); }
.pagehero.in h1 { clip-path: inset(0 0 -8% 0); }

.card, .ncard { opacity: 0; transform: translateY(18px); }
.card.in, .ncard.in { opacity: 1; transform: none;
  transition: opacity .55s cubic-bezier(.19,1,.22,1), transform .55s cubic-bezier(.19,1,.22,1),
    border-color .2s; }
.card .ph { overflow: hidden; }
.card .ph img { transition: transform .45s cubic-bezier(.19,1,.22,1); }
.card:hover .ph img { transform: scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .sec, .card, .pagehero h1 { opacity: 1; transform: none; clip-path: none; transition: none; }
}

.hud .brandimg { height: 48px; width: auto; display: block; }
.mm2 { position: relative; }
.mm2 .pnl { position: absolute; top: calc(100% + 10px); left: -14px; min-width: 230px;
  background: rgba(12,10,7,.97); border: 1px solid rgba(232,180,90,.14); border-radius: 12px;
  padding: 8px 0; opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
  transition: opacity .22s cubic-bezier(.19,1,.22,1), transform .22s cubic-bezier(.19,1,.22,1), visibility .22s; }
.mm2:hover .pnl, .mm2.open .pnl { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.mm2 .pnl a { display: block; padding: 9px 18px; font-size: 12.5px; }
.mm2 .pnl a:hover { color: #ffcf7d; background: rgba(232,180,90,.07); }
.mm2 .pnl a::after { display: none; }

/* mobile nav row — show the full menu on phones (must load last) */
@media (max-width: 700px) {
  .hud { backdrop-filter: none; background: rgba(10,9,6,.96); }
  .hud { flex-wrap: wrap; gap: 4px 6px; padding: 10px 12px; }
  .hud .brandimg { height: 30px; }
  .hud .links { gap: 10px; flex-wrap: wrap; }
  .hud .links a { font-size: 11px; letter-spacing: .02em; }
  .hud .links a:not(.keep) { display: inline; }
/* kc-mobile-nav —— 上面那條把手機導覽全部顯示出來，但 v5 首頁的導覽項目已經長到
   會擠成兩行蓋住主視覺。改成單行可橫向滑動：所有連結都到得了，也不爆版。 */
.hud .links { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 15px; }
.hud .links::-webkit-scrollbar { display: none; }
.hud .links > a, .hud .links > .mm > a, .hud .links > .mm2 > a { white-space: nowrap; }
.hud .links > * { flex: none; }
  .mm2 .pnl { display: none; }
}

/* nav vertical align — dropdown wrappers vs plain links on one line */
.hud .links { align-items: center; }
.hud .links .mm > a, .hud .links .mm2 > a { display: inline-block; line-height: 1.2; }
.hud .links a { line-height: 1.2; }

/* ── header v2:加大加清晰(王教授 08-03「大 banner,logo/產品/主題一眼可見」)＋詢料車/搜尋 ── */
.hud { padding: 18px clamp(16px,3vw,44px); font-size: 13px; }
.hud .brandimg { height: 58px; }
.kc-ico { display: inline-flex; align-items: center; gap: 7px; position: relative; }
.kc-ico svg { width: 17px; height: 17px; display: block; }
.kc-badge { position: absolute; top: -9px; right: -13px; min-width: 17px; height: 17px; border-radius: 999px;
  background: #e8b45a; color: #171207; font-weight: 700; font-size: 10.5px; line-height: 17px; text-align: center;
  padding: 0 4px; font-variant-numeric: tabular-nums; }
.kc-badge[hidden] { display: none; }
@media (max-width: 700px) {
  .hud .brandimg { height: 34px; }
  .hud { font-size: 11px; }
  .kc-ico .kc-lbl { display: none; }
  .kc-badge { top: -7px; right: -9px; }
}
@media (max-width: 1280px) {
  .hud { font-size: 12px; }
  .hud .links { gap: clamp(10px,1.6vw,20px); }
  .kc-ico .kc-lbl { display: none; }
}
@media (max-width: 1080px) and (min-width: 701px) {
  .kc-ind { display: none; }
  .hud .brandimg { height: 44px; }
}