/* issue 174 motion layer. Hidden states only via .mo (JS-added) inside no-preference; tokens from design-tokens.css. */

/* ---- finish (no movement) ---- */
::selection { background: color-mix(in srgb, var(--cloudforce-blue) 32%, var(--paper)); color: var(--ink); }
html { scrollbar-color: color-mix(in srgb, var(--muted) 55%, var(--paper)) var(--surface-sunken); }
.cta-band :focus-visible, .band-dark :focus-visible, .tile-grid--dark :focus-visible { outline-color: var(--on-dark-eyebrow); }
@media (forced-colors: active) { :focus-visible { outline-color: Highlight; } }
.mo-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mo-img { background: var(--wash); }

:is(.nav-cta, .secondary-cta, .text-link) > span[aria-hidden] { display: inline-block; }
/* Full-bleed pseudo-elements: no horizontal scrollbar. */
/* Insights: 1-2 cards fill the row. */
.article-results:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.article-results:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Cover-less article card: gradient, grid, rings. */
.post-thumb { background: radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--cloudforce-blue) 22%, transparent), transparent 50%), linear-gradient(135deg, var(--dark-gradient-start), var(--dark-gradient-end)); overflow: hidden; isolation: isolate; }
.post-thumb::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, color-mix(in srgb, var(--paper) 7%, transparent) 1px, transparent 1px) 0 0 / 1.625rem 1.625rem, linear-gradient(to bottom, color-mix(in srgb, var(--paper) 7%, transparent) 1px, transparent 1px) 0 0 / 1.625rem 1.625rem; -webkit-mask-image: linear-gradient(135deg, transparent 20%, black); mask-image: linear-gradient(135deg, transparent 20%, black); }
.post-thumb::after { content: ""; position: absolute; width: 72%; aspect-ratio: 1; right: -36%; bottom: -66%; border-radius: 50%; z-index: -1; background: repeating-radial-gradient(circle, transparent 0 1.1rem, color-mix(in srgb, var(--orbit-ring) 45%, transparent) 1.1rem calc(1.1rem + 1px)); }
/* Brand-card image edge overlay. */
.brand-card:has(> .brand-card-image)::after { content: ""; position: absolute; inset: 0 0 auto; height: 13.125rem; pointer-events: none; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--ink) 18%, transparent), inset 0 0 28px color-mix(in srgb, var(--ink) 14%, transparent); }
/* Inner page heads (texture, glow, rounded bottom) live in inner.css since issue 176. */
/* CTA band: faint grid and glow, hover sweep (behind content). */
.cta-band::before { content: ""; position: absolute; inset: -30%; z-index: -1; pointer-events: none; background: radial-gradient(28% 36% at 24% 42%, color-mix(in srgb, var(--cloudforce-blue) 16%, transparent), transparent 70%), radial-gradient(color-mix(in srgb, var(--paper) 9%, transparent) 1px, transparent 1.5px) 0 0 / 1.75rem 1.75rem; -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, black, transparent); mask-image: radial-gradient(60% 60% at 50% 50%, black, transparent); }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: linear-gradient(105deg, transparent 40%, color-mix(in srgb, var(--paper) 16%, transparent) 50%, transparent 60%); }
/* Cards: spotlight layer + hover look. */
:is(.catalog-card, .brand-card, .product-card, .document-card, .contact-start-card) {
  position: relative; isolation: isolate;
  &::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: radial-gradient(18rem circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--cloudforce-blue) 13%, transparent), transparent 70%); }
  &:is(:hover, :has(:focus-visible)) { border-color: color-mix(in srgb, var(--action) 40%, var(--line)); box-shadow: var(--elevation-raised); }
}

/* ---- motion (only when allowed) ----
   Entrance and ambient drift need both: the OS does not ask for reduced motion, and the visitor has not pressed the global
   "pause motion" button (html[data-motion="off"], set by site.js before first paint and toggled by chrome.js). */
@media (prefers-reduced-motion: no-preference) {
  /* Scroll entrance. */
  html:not([data-motion="off"]) .mo { opacity: 0; transform: translate3d(0, var(--motion-rise), 0); }
  html:not([data-motion="off"]) .mo.mo-in { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo); transition-delay: calc(var(--mo-i, 0) * var(--motion-stagger)); }

  /* Cross-page transition. */
  /* issue 392：換頁時 DevaEye 標誌在深藍遮罩上眨一下眼（總長 0.8 秒）。舊頁 0.13 秒淡出露出遮罩，弧線在 30%–48% 合上、66% 睜開，
     新頁 0.5 秒後用 0.3 秒淡入蓋過遮罩。標誌是原廠白色版拆成「中線」「上下弧線」兩層，只壓扁弧線那層，不重畫、不改色。 */
  @view-transition { navigation: auto; }
  ::view-transition { background: url("../assets/brand/devaeye-mark-line-white.png") center / 11rem 5rem no-repeat, url("../assets/brand/devaeye-mark-arcs-white.png") center / 11rem 5rem no-repeat, var(--deeper); animation: cf-vt-blink var(--dur-slow) linear; }
  ::view-transition-old(root) { animation-duration: 0.13s; animation-timing-function: ease-out; }
  ::view-transition-new(root) { animation-duration: 0.3s; animation-delay: 0.5s; animation-fill-mode: both; animation-timing-function: ease-out; }
  @keyframes cf-vt-blink {
    0%, 30% { background-size: 11rem 5rem, 11rem 5rem, auto; animation-timing-function: ease-in; }
    42%, 48% { background-size: 11.6rem 5rem, 11rem 0.6rem, auto; animation-timing-function: var(--ease-out-expo); }
    66%, 100% { background-size: 11rem 5rem, 11rem 5rem, auto; }
  }
  html[data-motion="off"]::view-transition { background: none; animation: none; }
  html[data-motion="off"]::view-transition-old(root), html[data-motion="off"]::view-transition-new(root) { animation: none; }

  /* Cards. */
  /* issue 189（B3）：卡片本身 hover 時不再上浮——上浮後游標在下緣 1～2px 會離開卡片、卡片落回、又被滑過，反覆閃爍。
     卡片只換陰影與框線；位移留給卡片內層（圖片放大、箭頭右推、編號亮起），不影響卡片的感應範圍。 */
  :is(.catalog-card, .brand-card, .product-card, .document-card, .contact-start-card) { transition: box-shadow var(--dur-base) var(--ease-out-expo), border-color var(--dur-base) ease; }
  .brand-card-image { transition: transform 1.2s var(--ease-out-expo); }
  .brand-card:is(:hover, :has(:focus-visible)) .brand-card-image { transform: scale(1.05); }
  .mo-img-in { animation: cf-img-in 0.7s var(--ease-out-expo); }
  @keyframes cf-img-in { from { transform: scale(1.06); } }

  /* Link underline. */
  :is(.text-link, .scenario-grid h3 a, .brand-card h3 a, .breadcrumb a):is(:hover, :focus-visible) {
    text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - .08em) / 100% 1px no-repeat; animation: cf-underline var(--dur-base) var(--ease-out-expo);
    &.text-link { background-position: 0 calc(100% - .3em); }
  }
  @keyframes cf-underline { from { background-size: 0 1px; } }

  /* Inner-page buttons. */
  .nav-cta, .secondary-cta { transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow var(--dur-base) ease, transform var(--dur-fast) var(--ease-out-expo); }
  .nav-cta:active, .secondary-cta:active { transform: scale(.97); }
  :is(.nav-cta, .secondary-cta, .text-link) > span[aria-hidden] { transition: transform var(--dur-base) var(--ease-out-expo); }
  :is(.nav-cta, .secondary-cta, .text-link):is(:hover, :focus-visible) > span[aria-hidden] { transform: translate3d(.3em, 0, 0); }

  /* Nav dropdown. */
  .nav-disclosure[open] > ul { animation: cf-pop var(--dur-base) var(--ease-out-expo); }
  @keyframes cf-pop { from { opacity: 0; transform: translate3d(0, -.5rem, 0); } }

  /* CTA band: slow ambient drift, hover sweep; page-head entrance. */
  @keyframes cf-glow { from { transform: translate3d(0, -3%, 0); } to { transform: translate3d(0, 3%, 0); } }
  html.js:not([data-motion="off"]) .cta-band::before { animation: cf-glow 40s var(--ease-in-out) infinite alternate; }
  .cta-band::after { transform: translate3d(-100%, 0, 0); transition: transform 1.2s var(--ease-out-expo), opacity var(--dur-base) ease; }
  .cta-band:hover::after { opacity: 1; transform: translate3d(100%, 0, 0); }
  html.js:not([data-motion="off"]) :is(.page-head > .eyebrow, .page-head > .hero-actions) { animation: cf-slide 1s var(--ease-out-expo) backwards; }
  html.js:not([data-motion="off"]) .page-head > .lead { animation: cf-slide 1s var(--ease-out-expo) .12s backwards; }
  html.js:not([data-motion="off"]) .page-head > .hero-actions { animation-delay: .24s; }
  /* 頁首文字（LCP 候選）只位移、不淡入：opacity 0 起手會讓 LCP 等動畫播完。 */
  @keyframes cf-slide { from { transform: translate3d(0, var(--motion-rise), 0); } }

  /* Section eyebrow: the rule (drawn by chrome/inner.css before the label) grows first, then the label appears (entrance only; inner pages). */
  .section-heading:is(.mo, .mo-in) .eyebrow { position: relative; opacity: 0; }
  .section-heading:is(.mo, .mo-in) .eyebrow::before { transform: scaleX(0); transform-origin: left; }
  .section-heading.mo-in .eyebrow { opacity: 1; transition: opacity .5s ease calc(var(--mo-i, 0) * var(--motion-stagger) + .2s); }
  .section-heading.mo-in .eyebrow::before { transform: none; transition: transform .7s var(--ease-out-expo) calc(var(--mo-i, 0) * var(--motion-stagger)); }
}

/* Card spotlight: mouse only. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  :is(.catalog-card, .brand-card, .product-card, .document-card, .contact-start-card):hover::before { opacity: 1; transition: opacity var(--dur-base) ease; }
}

/* Print never waits for IntersectionObserver. */
@media print { .mo { opacity: 1; transform: none; } }

/* issue 311：區段捲出視窗時（motion.js 加 is-offscreen）暫停其內所有動畫，捲回來從原處繼續。場景規則多寫在
   html:not([data-motion="off"]) .page-blocks … 之下，頁首效果（hero-fx）還有 html:not([data-motion="off"]) .hfx-… #id（1,2,1）；
   這裡用 :not(#motion-offscreen) 帶入 ID 權重、class 重複到 1,3,1，嚴格高於它（它的樣式表較晚載入，同分會輸），不必強制覆寫。 */
@media (prefers-reduced-motion: no-preference) {
  html:not(#motion-offscreen) .is-offscreen.is-offscreen.is-offscreen *, html:not(#motion-offscreen) .is-offscreen.is-offscreen.is-offscreen *::before, html:not(#motion-offscreen) .is-offscreen.is-offscreen.is-offscreen *::after { animation-play-state: paused; }
}