/* Motion tests family (rainbow, rolling buffer, motion clarity): the shared heading, the full-width glass tab switch
   (same track and thumb as the ADL calculator tabs; the thumb is .g-seg::before from main.js), the compact test menu
   in the fullscreen dock, the fullscreen hint after a switch, and the page transition between the three pages. */
main .article-hero.mt-hero { padding-top: 32px; padding-bottom: 20px; }   /* same top as the throw calculator */
.mt-tabs { display: flex; gap: 0; padding: 3px; margin: 0; border-radius: 999px;   /* the same capsule as the ADL calculator tabs */
  background: var(--gl-track, rgba(118,118,128,.12)); box-shadow: var(--gl-track-in, inset 0 1px 2px rgba(0,0,0,.06)); }
[data-theme="dark"] .mt-tabs { background: rgba(118,118,128,.24); box-shadow: inset 0 1px 2px rgba(0,0,0,.3); }
.mt-tab { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px;
  color: var(--text-3); font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: color .25s; }
.mt-tab svg { width: 19px; height: 19px; flex: none; }
.mt-tab:hover { color: var(--text); }
.mt-tabs.g-seg::before { border-radius: 999px; }
.g-seg.mt-tabs > .mt-on { color: var(--text); }
/* before main.js runs the current tab carries the thumb itself */
.mt-tabs:not(.g-seg) > .mt-on { background: var(--g-thumb); box-shadow: var(--g-thumb-shadow); color: var(--text); }
.mt-short { display: none; }
/* one line on wide screens, two lines reserved on narrow ones, so the test below starts at the same height on every tab */
.mt-lead { margin: 16px 0 0; color: var(--text-3); font-size: 17px; line-height: 1.5; min-height: 1.5em; }
@media (max-width: 1100px) { .mt-lead { min-height: 3em; } }
.mt-desc { margin: 0; }

@media (max-width: 600px) {
  main .article-hero.mt-hero { padding-top: 32px; padding-bottom: 16px; }
  .mt-tab { gap: 6px; padding: 0 4px; font-size: 14px; }
  .mt-tab svg { width: 17px; height: 17px; }
  .mt-full { display: none; }
  .mt-short { display: inline; }
  .mt-lead { font-size: 15.5px; min-height: 4.5em; }
}
@media (max-width: 359px) { .mt-tab svg { display: none; } }

/* the dock's test menu: fullscreen only (on the page the tabs above do the job) */
.tst:not(.tst-fs) :is(.tst-famwrap, .tst-famsep) { display: none; }
.tst-fam { padding-left: 10px; }
.tst-fammenu > a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--gl-text);
  font-size: 14px; text-decoration: none; white-space: nowrap; }
.tst-fammenu > a svg { width: 18px; height: 18px; flex: none; }
.tst-fammenu > a:hover { background: var(--gl-hover); }
.tst-fammenu > a[aria-current] { background: rgba(255,255,255,.12); font-weight: 600; }
@media (max-width: 600px) {
  .tst-fam-name { display: none; }
  .tst-fammenu.gl-sheet > a { padding: 12px; font-size: 15px; }
}

/* fullscreen carried over from the previous test: the page can't re-enter it by itself, so the picture covers the window
   and this pill asks for the click or key that makes it real fullscreen */
.tst-fshint { position: absolute; left: 50%; top: 24px; transform: translateX(-50%); z-index: 4; padding: 8px 16px; border-radius: 999px;
  background: rgba(28,28,32,.9); border: 1px solid rgba(255,255,255,.14); color: #f2f2f7; font-size: 14px; font-weight: 500;
  white-space: nowrap; pointer-events: none; animation: tst-fshint .4s ease-out; }
@keyframes tst-fshint { from { opacity: 0; transform: translate(-50%, -6px); } }
.tst:not(.tst-fs) .tst-fshint { display: none; }
@media (max-width: 600px) { .tst-fshint { top: 12px; font-size: 13px; white-space: normal; width: max-content; max-width: calc(100% - 32px); text-align: center; } }
@media (prefers-reduced-motion: reduce) { .tst-fshint { animation: none; } }

/* ── Page transition between the three tests (html.mt-vt, set by MotionHead.astro) ──
   The page under everything swaps at once (header and heading are the same); the tabs show the new page live, so the
   thumb slides from the old tab; the frame, dock, picture, intro line and text below cross-fade where they stand. */
html.mt-vt .mt-tabs { view-transition-name: mt-tabs; }
html.mt-vt .mt-lead { view-transition-name: mt-lead; }
html.mt-vt .tst { view-transition-name: mt-frame; }
html.mt-vt .tst > canvas { view-transition-name: mt-pic; }
html.mt-vt .tst-dock { view-transition-name: mt-dock; }
html.mt-vt .mt-desc { view-transition-name: mt-desc; }
html.mt-vt::view-transition-old(root), html.mt-vt::view-transition-old(mt-tabs) { display: none; }
html.mt-vt::view-transition-new(root), html.mt-vt::view-transition-new(mt-tabs) { animation: none; }
html.mt-vt::view-transition-group(*) { animation-duration: .3s; }
html.mt-vt::view-transition-old(*), html.mt-vt::view-transition-new(*) { animation-duration: .3s; }
html.mt-vt::view-transition-group(mt-desc) { overflow: clip; }
/* the picture leaves the frame's clip while it cross-fades: give it the frame's rounded top corners */
html.mt-vt::view-transition-group(mt-pic) { border-radius: var(--radius-sm) var(--radius-sm) 0 0; overflow: clip; }
html.mt-vt::view-transition-group(mt-dock) { overflow: clip; }

/* "How it looks on our projectors": three mini cards at the end of .mt-desc (SeenCards.astro) */
.mt-seen-cards { margin: 36px 0 0; }
.mt-seen-cards h3 { font-size: 20px; font-weight: 700; margin: 0 0 14px; color: var(--text); }
.mt-seen-cards .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mt-seen-cards a { display: flex; align-items: center; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface);
  border: 1px solid var(--border); text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
.mt-seen-cards a:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.mt-seen-cards img { display: block; width: 120px; flex: none; align-self: stretch; min-height: 80px; object-fit: cover; background: var(--surface-2); }
.mt-seen-cards .t { padding: 10px 14px; min-width: 0; }
.mt-seen-cards .m { display: block; font-size: 13px; color: var(--text-3); line-height: 1.3; }
.mt-seen-cards .s { display: block; margin-top: 3px; font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.3; }
.mt-seen-cards .s::after { content: " \2192"; color: var(--accent); }
@media (max-width: 900px) { .mt-seen-cards .cards { grid-template-columns: 1fr; gap: 10px; } }
@media (max-width: 600px) { .mt-seen-cards h3 { font-size: 18px; } .mt-seen-cards img { width: 104px; } }
@media (prefers-reduced-motion: reduce) { .mt-seen-cards a { transition: none; } .mt-seen-cards a:hover { transform: none; } }