/* Loaded only by the Technologies page. Native video controls stay unobstructed. */
.technology-motion { --motion-gap: 20px; min-width: 0; }
.technology-motion .motion-heading { align-items: end; gap: 24px; }
.motion-heading > div:first-child { flex: 1 1 34rem; min-width: 0; }
.motion-navigation { display: flex; gap: 10px; flex-shrink: 0; }
.technology-motion .motion-navigation button { display: grid; place-items: center; width: 48px; min-height: 48px; padding: 8px; border-radius: 50%; font-size: 1.3rem; }
.motion-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--motion-gap)) / 3); gap: var(--motion-gap); min-width: 0; width: 100%; padding: 4px 3px 16px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #439cba #0b2341; }
.motion-card { display: flex; flex-direction: column; min-width: 0; margin: 0; border: 1px solid var(--tx-line); border-radius: 12px; background: linear-gradient(145deg, #1646613d, transparent 75%), var(--panel-fill); scroll-snap-align: start; transition: border-color .2s, box-shadow .2s; }
.motion-card:is(:hover, :focus-within), .motion-card.is-active { border-color: #79dbe9; box-shadow: 0 0 0 2px #5bdae712, 0 12px 30px #010c202b; }
.motion-frame { position: relative; isolation: isolate; aspect-ratio: 16 / 9; min-width: 0; width: 100%; border-radius: 11px 11px 0 0; background: #041421; }
.motion-frame video { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: inherit; background: #041421; }
.technology-motion .motion-category { position: absolute; top: 12px; left: 12px; max-width: calc(100% - 65px); margin: 0; padding: 6px 9px; border: 1px solid #8ce7f747; border-radius: 5px; background: rgb(5 22 42 / .9); color: #c9f5ff; font: 500 .6875rem/1.5 var(--display); letter-spacing: .045em; pointer-events: none; overflow-wrap: anywhere; }
.motion-index { position: absolute; top: 15px; right: 13px; padding: 2px 5px; border-radius: 3px; background: #071a32bf; color: #d3eef7; font: 500 .625rem/1.5 var(--display); pointer-events: none; }
.motion-caption { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 20px; border-top: 1px solid #71c3db26; background: linear-gradient(145deg, #16405b38, #071c32a6); }
.technology-motion .motion-caption h3 { margin: 0 0 12px; font-size: 1.05rem; line-height: 1.45; letter-spacing: -.02em; }
.technology-motion .motion-description { flex: 1; margin: 0 0 20px; color: #c6dcea; font-size: .875rem; line-height: 1.7; }
.motion-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.technology-motion .motion-actions button { min-width: 0; min-height: 44px; padding: 9px 12px; background: #154158a6; font-size: .8125rem; }
.motion-actions > a { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; color: #ade7f3; font-size: .8125rem; }
.technology-motion .motion-credit { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid #7dc3de24; color: #92b8cf; font-size: .6875rem; line-height: 1.6; overflow-wrap: anywhere; }
.motion-credit a { color: #a9c9dc; }
.technology-motion .motion-error { margin: 12px 0 0; color: #f4d7a8; font-size: .8rem; }
.motion-footer { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 12px 24px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--tx-line); }
.motion-footer output { color: #97e1ef; font: 500 .75rem/1.6 var(--display); }
.technology-motion .motion-footer p { max-width: 54ch; margin: 0; color: #b0c9dc; font-size: .8rem; }
.technology-motion > .tx-note { margin: 20px 0 0; font-size: .8rem; }
@media (max-width: 1050px) and (min-width: 601px) {
  .motion-track { grid-auto-columns: calc((100% - var(--motion-gap)) / 2); }
}
@media (max-width: 600px) {
  .technology-motion { --motion-gap: 16px; }
  .motion-track { grid-auto-columns: 88%; }
  .motion-navigation { margin-left: auto; }
  .motion-caption { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-track { scroll-behavior: auto; }
  .motion-card { transition: none; }
}