/* Core Web Vitals：使用原質感的高品質 WebP，預留空間並減少重排。 */
:root { --luminous-texture: url('../images/luminous-3d-1672.webp'); }
.hero-scene picture { display: block; width: 100%; height: 100%; }
.hero-scene.crystal-ready picture { opacity: 0; }
.hero-scene.crystal-ready picture img { animation: none !important; will-change: auto; }
.motion-control-slot { display: flex; align-items: center; justify-content: flex-end; flex: 0 0 100px; width: 100px; min-height: 44px; margin-left: auto; }
html[data-xz-motion] .motion-control-slot .motion-toggle { margin: 0; width: 100px; min-height: 44px; justify-content: center; white-space: nowrap; }
.hero-scene img { aspect-ratio: 1672 / 941; }
.project-image { aspect-ratio: 1000 / 740; }
.project-image img { aspect-ratio: 1000 / 740; }
#form-status { min-height: 1.9em; }
.result-status, .filter-status { min-height: 1.8em; }
[data-contact-info] { min-height: 3.8em; }
.article-row { transition-property: color, border-color, background, transform; }
.article-row:hover, .article-row:focus-visible { transform: translateX(4px); }
@media (max-width: 1280px) {
  :root { --luminous-texture: url('../images/luminous-3d-1280.webp'); }
}
@media (max-width: 800px) {
  :root { --luminous-texture: url('../images/luminous-3d-800.webp'); }
}
@media (max-width: 600px) {
  .hero-footer { min-height: 62px; }
  .motion-control-slot { flex-basis: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .article-row:hover, .article-row:focus-visible { transform: none; }
}