/* issue 193／237 場景 netskope-herochips：頁首圖加浮動標籤（深色底；只讀官網 token 與 --accent*，輔色 --accent-spark）。
   玻璃框、四角標記、掃描光束與標籤進場只在 prefers-reduced-motion: no-preference 且 html:not([data-motion="off"]) 播放一次，標籤再緩慢浮動；否則靜止。
   標籤 1–3 個沿用舊位置（左上、右中、左下）；4 個＝左上、右上、左下、右下；5 個＝左上、右上、左中、右中、左下。 */
.page-blocks .nh { margin: 0; }
.page-blocks .nh-frame { position: relative; padding: .625rem; border: 1px solid color-mix(in srgb, var(--accent-dark) 30%, transparent); border-radius: 1.375rem; background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 14%, var(--deeper)), color-mix(in srgb, var(--accent) 6%, transparent)); box-shadow: 0 2.5rem 5.5rem color-mix(in srgb, var(--deeper) 70%, transparent), 0 0 5rem color-mix(in srgb, var(--accent) 18%, transparent), inset 0 1px 0 color-mix(in srgb, var(--paper) 10%, transparent); }
@supports (backdrop-filter: blur(1px)) { .page-blocks .nh-frame { backdrop-filter: blur(14px) saturate(1.3); } }
.page-blocks .nh-in { position: relative; overflow: hidden; border-radius: .875rem; }
.page-blocks .nh-img { display: block; width: 100%; height: auto; }
.page-blocks .nh-scan { position: absolute; inset-block: 0; left: -30%; width: 22%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-dark) 38%, transparent), color-mix(in srgb, var(--paper) 22%, transparent), transparent); opacity: 0; pointer-events: none; }
.page-blocks .nh-tick { position: absolute; width: .875rem; height: .875rem; border: 2px solid var(--accent-dark); opacity: .85; pointer-events: none; }
.page-blocks .nh-tick.t1 { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: .625rem; }
.page-blocks .nh-tick.t2 { top: -1px; right: -1px; border-left: 0; border-bottom: 0; border-top-right-radius: .625rem; }
.page-blocks .nh-tick.t3 { bottom: -1px; left: -1px; border-right: 0; border-top: 0; border-bottom-left-radius: .625rem; }
.page-blocks .nh-tick.t4 { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: .625rem; }
.page-blocks .nh-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: .5rem; padding: .4375rem .875rem; border: 1px solid color-mix(in srgb, var(--accent-dark) 45%, transparent); border-radius: var(--r-pill); background: var(--deeper); color: var(--accent-dark); font-size: .8125rem; font-weight: 700; line-height: 1.2; white-space: nowrap; box-shadow: 0 .5rem 1.5rem color-mix(in srgb, var(--deeper) 55%, transparent); }
.page-blocks .nh-chip::before { content: ""; width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 .5rem var(--accent); }
.page-blocks .nh-chip--accent { border-color: color-mix(in srgb, var(--accent-spark, var(--accent-dark)) 60%, transparent); color: color-mix(in srgb, var(--accent-spark, var(--accent-dark)) 55%, var(--paper)); }
.page-blocks .nh-chip--accent::before { background: var(--accent-spark, var(--accent)); box-shadow: 0 0 .5rem var(--accent-spark, var(--accent)); }
/* 1–3 個（舊版位置） */
.page-blocks .nh-chip.c1 { top: 8%; left: .25rem; }
.page-blocks .nh-chip.c2 { top: 46%; right: .25rem; }
.page-blocks .nh-chip.c3 { bottom: 12%; left: 1.5rem; }
/* 4 個：左上、右上、左下、右下 */
.page-blocks .nh--4 .nh-chip.c1 { top: 8%; left: .25rem; }
.page-blocks .nh--4 .nh-chip.c2 { top: 12%; right: .25rem; bottom: auto; left: auto; }
.page-blocks .nh--4 .nh-chip.c3 { top: auto; bottom: 22%; left: .25rem; }
.page-blocks .nh--4 .nh-chip.c4 { top: auto; bottom: 9%; right: .25rem; }
/* 5 個：左上、右上、左中、右中、左下 */
.page-blocks .nh--5 .nh-chip.c1 { top: 7%; left: .25rem; }
.page-blocks .nh--5 .nh-chip.c2 { top: 5%; right: .25rem; bottom: auto; left: auto; }
.page-blocks .nh--5 .nh-chip.c3 { top: 30%; bottom: auto; left: .25rem; }
.page-blocks .nh--5 .nh-chip.c4 { top: 50%; right: .25rem; }
.page-blocks .nh--5 .nh-chip.c5 { bottom: 17%; left: .25rem; }
@media (min-width: 62rem) {
  .page-blocks .nh-chip.c1 { left: -4%; } .page-blocks .nh-chip.c2 { right: -3%; }
  .page-blocks .nh--4 .nh-chip.c1 { left: -4%; } .page-blocks .nh--4 .nh-chip.c2 { right: -3%; } .page-blocks .nh--4 .nh-chip.c3 { left: -5%; } .page-blocks .nh--4 .nh-chip.c4 { right: -3%; }
  .page-blocks .nh--5 .nh-chip.c1 { left: -4%; } .page-blocks .nh--5 .nh-chip.c2 { right: -3%; } .page-blocks .nh--5 .nh-chip.c3 { left: -5%; } .page-blocks .nh--5 .nh-chip.c4 { right: -5%; } .page-blocks .nh--5 .nh-chip.c5 { left: -3%; }
}
/* 窄螢幕：標籤收在圖內；5 個時中段兩個先收起，免得壓住主圖。 */
@media (max-width: 30rem) {
  .page-blocks .nh-chip { font-size: .75rem; padding: .375rem .625rem; }
  .page-blocks .nh--5 :is(.nh-chip.c3, .nh-chip.c4) { display: none; }
}
.page-blocks .nh-cap { margin: .75rem 0 0; padding-inline: .25rem; color: var(--muted-on-dark); font-size: .78125rem; line-height: 1.7; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .page-blocks .nh-chip { animation: nh-pop .6s var(--ease) both, nh-bob 6s ease-in-out .9s infinite; }
  html:not([data-motion="off"]) .page-blocks .nh-chip.c1 { animation-delay: .7s, 1.3s; }
  html:not([data-motion="off"]) .page-blocks .nh-chip.c2 { animation-delay: .92s, -2s; }
  html:not([data-motion="off"]) .page-blocks .nh-chip.c3 { animation-delay: 1.14s, -4s; }
  html:not([data-motion="off"]) .page-blocks .nh-chip.c4 { animation-delay: 1.36s, -1s; }
  html:not([data-motion="off"]) .page-blocks .nh-chip.c5 { animation-delay: 1.58s, -3s; }
  html:not([data-motion="off"]) .page-blocks .nh-scan { animation: nh-sweep 1.9s ease-in-out .5s both; }
  html:not([data-motion="off"]) .page-blocks .nh-tick { animation: nh-tick .7s ease-out .1s both; }
  /* 浮動用 translate，進場用 transform，兩個動畫不互相蓋掉。 */
  @keyframes nh-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.5rem; } }
  @keyframes nh-pop { from { opacity: 0; transform: translateY(.75rem) scale(.88); } to { opacity: 1; transform: none; } }
  @keyframes nh-sweep { 0% { left: -30%; opacity: 0; } 12%, 88% { opacity: 1; } 100% { left: 112%; opacity: 0; } }
  @keyframes nh-tick { from { opacity: 0; transform: scale(1.8); } to { opacity: .85; transform: none; } }
}