/* Shared motion layer. Business state and content remain owned by app.js. */
:root {
  --motion-fast: 120ms;
  --motion-ui: 180ms;
  --motion-panel: 240ms;
  --motion-ease: cubic-bezier(.2,.7,.2,1);
}
.hero-carousel { min-width:0; }
.hero-carousel .hero-object { width:100%; transition:opacity 180ms ease, transform 180ms var(--motion-ease); }
.hero-carousel .hero-object.is-changing { opacity:0; transform:translateX(-7px); }
.hero-carousel-controls { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding-top:9px; }
.hero-carousel-arrow,.hero-carousel-dot { color:#d3d5d8; background:transparent; border:none; cursor:pointer; }
.hero-carousel-arrow { width:32px; height:28px; font-size:17px; line-height:1; }
.hero-carousel-arrow:hover,.hero-carousel-arrow:focus-visible { color:#fff; }
.hero-carousel-dots { display:flex; align-items:center; gap:2px; }
.hero-carousel-dot { width:22px; height:28px; display:grid; place-items:center; }
.hero-carousel-dot::before { content:''; width:5px; height:5px; border-radius:50%; background:#8e9298; transition:background-color 180ms ease, transform 180ms ease; }
.hero-carousel-dot[aria-current="true"]::before { background:#bd3040; transform:scale(1.45); }
:is(.btn,.icon-btn,.quote-link,.text-link,.nav a,.nav-products summary,
  .element-tabs a,.pilot-kind-links a,.filter-chip button,#pagination button,
  #view-list,#view-grid,#reset-filters,input,select,textarea) {
  transition: color var(--motion-fast) ease, background-color var(--motion-ui) ease,
    border-color var(--motion-ui) ease, box-shadow var(--motion-ui) ease,
    translate var(--motion-ui) var(--motion-ease);
}
:is(.material-card,.photo-product,.industry-card,.hero-object,.element-tile,
  .pilot-product,.pilot-kind-grid>a,.element-material-card,.product-row) {
  transition: border-color var(--motion-ui) ease, background-color var(--motion-ui) ease,
    box-shadow var(--motion-ui) ease, transform var(--motion-ui) var(--motion-ease);
}
/* Neutralise older, larger lifts; motion is added only for precise hover below. */
.material-card:hover,.industry-card:hover,.hero-object:hover { transform:none; }
.material-card:hover img,.photo-product:hover img { transform:none; }
.element-tile.featured { transform:none; }
.material-art img,.product-photo img { transition:none; }
.nav-products summary>span { display:inline-block; transition:rotate var(--motion-ui) var(--motion-ease); }
.nav-products[open] summary>span { rotate:180deg; }
.nav-products[open] .nav-flyout,dialog[open] {
  animation:mw-panel-in var(--motion-panel) var(--motion-ease);
}
dialog[open]::backdrop { animation:mw-backdrop-in var(--motion-ui) ease; }
.nav.open { animation:mw-panel-in var(--motion-panel) var(--motion-ease); }
@keyframes mw-panel-in { from { opacity:.65; translate:0 -4px; } to { opacity:1; translate:0 0; } }
@keyframes mw-backdrop-in { from { opacity:0; } to { opacity:1; } }
:is(a,button,input,select,textarea,summary):focus-visible {
  outline:2px solid var(--red,#bd3040); outline-offset:4px;
}
:is(input,select,textarea):focus-visible { outline-offset:2px; }
:where(button,.btn):disabled { cursor:not-allowed; opacity:.55; translate:none; }
@media(hover:hover) and (pointer:fine) {
  .material-card:hover,.hero-object:hover,.pilot-product:hover,
  .pilot-kind-grid>a:hover,.element-material-card:hover { transform:translateY(-2px); }
  .industry-card:hover { transform:translateY(-1px); }
  .btn:not(:disabled):hover,.icon-btn:not(:disabled):hover { translate:0 -1px; }
  .btn:not(:disabled):active,.icon-btn:not(:disabled):active { translate:0 0; }
}
@media(hover:none),(pointer:coarse) {
  .element-tile:hover { transform:none; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .material-card:hover,.industry-card:hover,.hero-object:hover,.element-tile:hover,
  .element-tile:focus-visible,.pilot-product:hover,.pilot-kind-grid>a:hover,
  .element-material-card:hover { transform:none!important; }
  .btn,.icon-btn { translate:none!important; }
  .hero-carousel .hero-object.is-changing { opacity:1; transform:none; }
}