/* Motion is finite, lightweight, and honors the visitor's system preference. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .brand-banner { position: relative; overflow: hidden; isolation: isolate; }
  .brand-banner::after { content: ''; position: absolute; z-index: -1; inset: -60% -40%; pointer-events: none; background: linear-gradient(110deg, transparent 35%, #ffc88040 48%, #ffffff55 50%, transparent 64%); transform: translateX(100%); animation: banner-sweep 4200ms 350ms cubic-bezier(.2,.6,.3,1) both; }
  @keyframes banner-sweep { from { transform: translateX(-100%) rotate(-8deg); } to { transform: translateX(100%) rotate(-8deg); } }
  .overview figure, .product-visual, .before-after figure { overflow: hidden; }
  .section-heading h2 { position: relative; padding-bottom: 17px; }
  .section-heading h2::after { content: ''; position: absolute; bottom: 0; left: 0; width: 72px; height: 3px; background: linear-gradient(90deg, #cc6333, #edb579); }
  .coating-card, .gallery-card, .video-card { transition: transform 650ms cubic-bezier(.2,.65,.25,1), box-shadow 650ms ease, border-color 350ms ease; }
  .coating-card:hover, .coating-card:focus-visible, .gallery-card:hover, .video-card:hover { transform: perspective(1000px) translateY(-10px) rotateX(2deg); box-shadow: 0 18px 38px #2e180f26; border-color: #cc6333; }
  .photo-open img { transition: transform 1400ms cubic-bezier(.2,.65,.25,1); }
  .photo-open:hover img { transform: scale(1.09); }
  .button { position: relative; overflow: hidden; isolation: isolate; }
  .button::after { content: ''; position: absolute; inset: -100% -50%; pointer-events: none; background: linear-gradient(110deg, transparent 40%, #ffffff55 50%, transparent 60%); transform: translateX(-110%); transition: transform 1000ms cubic-bezier(.2,.65,.25,1); }
  .button:hover::after, .button:focus-visible::after { transform: translateX(110%); }
  .button { transition: background-color 180ms ease, color 180ms ease, transform 200ms ease, box-shadow 200ms ease; }
  .button:hover, .button:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 16px #0002; }
  .button:active { transform: translateY(0); box-shadow: none; }
  .button > span, .text-link > span, .product-nav strong > span { display: inline-block; transition: transform 200ms ease; }
  .button:hover > span, .button:focus-visible > span, .text-link:hover > span, .product-nav a:hover strong > span { transform: translateX(3px); }
  .document, .tabs button, .filter-bar button, .product-nav a { transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease; }
  .document:hover, .document:focus-visible { background-color: #f8eee8; }
  .video-poster > span { transition: transform 200ms ease, background-color 200ms ease; }
  .video-link:hover .video-poster > span, .video-link:focus-visible .video-poster > span { transform: translate(-50%,-50%) scale(1.08); }
  .lightbox[open]::backdrop { animation: backdrop-in 600ms ease; }
  @keyframes backdrop-in { from { background-color: #0000; } to { background-color: #000d; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .coating-card:hover, .photo-open:hover img, .gallery-card:hover, .video-card:hover { transform: none; }
}