/*!
 * coating-art.css — 賢御實業官網 3.1「塗層剖面實驗室」樣品板樣式
 * ---------------------------------------------------------------------------
 * 只負責 .specimen 容器與 .ct-* 內部節點；不污染全局。
 * 動效：Hero 分層落位 + 一次掃描線；息焰霧化/微膠囊極慢呼吸；樣品板 hover 光掠。
 * prefers-reduced-motion: reduce 時全部關閉。
 * ---------------------------------------------------------------------------
 */

/* ---------------------------------------------------------------- 容器 */
.specimen {
  display: block;
  position: relative;
  width: 100%;
  min-width: 0;
  line-height: 0;
  isolation: isolate;
}

.specimen[data-coat-art="hero"] {
  max-width: 640px;
}

.specimen .ct-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
}

/* 樣品板 4:3 卡（impact / fire / thermal）在深色面板上的最小表現 */
.specimen[data-coat-art="impact"],
.specimen[data-coat-art="fire"],
.specimen[data-coat-art="thermal"] {
  max-width: 640px;
}

.specimen[data-coat-art="strip"] {
  display: block;
  width: 100%;
  max-width: none;
}

/* ---------------------------------------------------------------- 動效 */
.ct-scan {
  opacity: 0;
  will-change: transform, opacity;
}

.ct-layer {
  will-change: transform, opacity;
}

.ct-mist {
  opacity: 0.82;
}

/* Hero：分層由展開狀態收攏落位（一次性，克制） */
@keyframes ct-layer-in {
  from {
    opacity: 0;
    transform: translateY(var(--ct-rise, 6px));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ct-layer {
  animation: ct-layer-in 1.08s cubic-bezier(0.22, 0.72, 0.24, 1) both;
}

.ct-d1 { --ct-rise: 9px; animation-delay: 0.24s; }
.ct-d2 { --ct-rise: 5px; animation-delay: 0.16s; }
.ct-d3 { --ct-rise: -4px; animation-delay: 0.08s; }
.ct-d4 { --ct-rise: -9px; animation-delay: 0s; }

/* Hero：一次掃描線（掃完即隱形，不循環） */
@keyframes ct-scan-pass {
  0% { opacity: 0; transform: translateX(-66px); }
  10% { opacity: 1; }
  86% { opacity: 1; }
  100% { opacity: 0; transform: translateX(398px); }
}

.ct-scan {
  animation: ct-scan-pass 2.35s cubic-bezier(0.3, 0.55, 0.35, 1) 0.55s 1 both;
}

/* 息焰：霧化極慢漂移（全頁唯一的循環動效，替代逐元素閃爍） */
@keyframes ct-mist-drift {
  from { opacity: 0.68; transform: translate(0, 0); }
  to { opacity: 0.94; transform: translate(-8px, -5px); }
}

.ct-mist {
  animation: ct-mist-drift 19s ease-in-out infinite alternate;
}

/* Hero 圖例聯動：lumine.js 會把 data-layer-active 寫在 .specimen-hero（或 .specimen）上，
   對應層以極輕微的亮度提升回應，其餘層不動。 */
.ct-layer-l1,
.ct-layer-l2,
.ct-layer-l3 {
  transition: filter 0.4s ease;
}

.specimen[data-layer-active="impact"] .ct-layer-l1,
.specimen-hero[data-layer-active="impact"] .ct-layer-l1 {
  filter: brightness(1.16) saturate(1.08);
}

.specimen[data-layer-active="fire"] .ct-layer-l2,
.specimen-hero[data-layer-active="fire"] .ct-layer-l2 {
  filter: brightness(1.2) saturate(1.1);
}

.specimen[data-layer-active="thermal"] .ct-layer-l3,
.specimen-hero[data-layer-active="thermal"] .ct-layer-l3 {
  filter: brightness(1.12) saturate(1.05);
}

/* 樣品板 hover：材質光極緩慢掠過（不位移版面） */
.ct-hover {
  opacity: 0;
  transition: opacity 0.55s ease;
  pointer-events: none;
}

.specimen:hover .ct-hover,
.specimen:focus-within .ct-hover {
  opacity: 1;
}

/* ---------------------------------------------------------------- 自適應 */
/* Hero 的註記量大，依「容器實際寬度」而不是視窗寬度決定是否顯示；
   這樣不管 Hero 被放成 640、520 還是 360 寬，都不會出現糊掉的小字。 */
.specimen-hero {
  container-type: inline-size;
}

@container (max-width: 560px) {
  .ct-anno,
  .ct-plate {
    display: none;
  }
}

/* 細小註記在窄版面會糊，直接讓位給形體與量測刻度（舊瀏覽器 fallback） */
@media (max-width: 639px) {
  .ct-anno,
  .ct-fine,
  .ct-plate {
    display: none;
  }

  .ct-tick-minor {
    display: none;
  }

  .ct-strip text {
    display: none;
  }

  .specimen[data-coat-art="strip"] .ct-svg {
    height: auto;
  }
}

/* 極窄容器：樣品板保留形體，去掉會變成灰點的細節 */
@media (max-width: 420px) {
  .specimen[data-coat-art="strip"] .ct-svg {
    min-height: 0;
  }
}

/* ---------------------------------------------------------------- 無障礙 */
@media (prefers-reduced-motion: reduce) {
  .specimen,
  .specimen * {
    animation: none !important;
    transition: none !important;
  }

  .specimen .ct-scan {
    opacity: 0 !important;
  }

  .specimen .ct-layer {
    opacity: 1 !important;
    transform: none !important;
  }

  .specimen .ct-mist {
    opacity: 0.82 !important;
  }

  .specimen .ct-hover {
    opacity: 0 !important;
  }
}

/* 高對比 / 強制色彩模式下不依賴顏色傳達層序 */
@media (forced-colors: active) {
  .ct-svg text {
    fill: CanvasText;
  }

  .ct-svg line,
  .ct-svg path,
  .ct-svg rect,
  .ct-svg circle,
  .ct-svg ellipse,
  .ct-svg polygon {
    forced-color-adjust: auto;
  }
}