/* Full-motion comparison only. Content is visible before JS and after every animation. */
.motion-full .full-comparison { position: sticky; top: 0; z-index: 30; }
.motion-full .full-comparison button {
  border: 0; background: transparent; color: inherit; font: inherit;
  min-height: 44px; padding: 0; cursor: pointer;
}
.motion-full .full-comparison nav { align-items: center; flex-wrap: wrap; gap: 0 24px; }
.motion-full .full-motion-host { position: relative; }
.motion-full .hero-overlay-copy.full-motion-host { position: absolute; }
.motion-full .full-echo-rail {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  overflow: hidden; pointer-events: none; z-index: 2;
}
.motion-full .section-label > .full-echo-rail { bottom: -14px; right: auto; width: min(260px, 70%); }
.motion-full .profile-experience > .full-echo-rail { top: 0; bottom: auto; }
.motion-full .profile-evidence > div > .full-echo-rail { top: 0; bottom: auto; }
.motion-full .hero-overlay-copy > .full-echo-rail { right: auto; bottom: 0; width: min(300px, 60%); }
.motion-full .full-echo-rail > b {
  display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 42%;
  opacity: 0; background: var(--echo-violet); transform-origin: left center;
}
.motion-full .full-echo-rail > b:nth-child(2) { background: var(--echo-blue); }
.motion-full .full-echo-rail > b:nth-child(3) { background: var(--echo-teal); }
.motion-full .full-echo-rail > b:nth-child(4) { background: var(--echo-lime); }
.motion-full .full-echo-rail > b:last-child { background: currentColor; }
.motion-full .full-arrow-echo {
  position: absolute; inset: 0; opacity: 0; font: inherit;
  pointer-events: none; color: var(--echo-violet);
}
.motion-full .full-arrow-echo:nth-of-type(2) { color: var(--echo-blue); }
.motion-full .full-arrow-echo:nth-of-type(3) { color: var(--echo-teal); }
.motion-full .full-arrow-echo:nth-of-type(4) { color: var(--echo-lime); }
.motion-full .full-arrow-host { position: relative; }
.motion-full .full-motion-target { scroll-margin-top: 100px; }
.motion-full main > section[id] { scroll-margin-top: 90px; }
@media(max-width:760px) {
  .motion-full .full-comparison > div { gap: 0; padding-block: 2px; }
  .motion-full .full-comparison nav { width: 100%; justify-content: space-between; gap: 0 8px; }
  .motion-full .full-comparison button,.motion-full .full-comparison a { font-size: 12px; }
  .motion-full .full-echo-rail { height: 2px; }
  .motion-full .section-label > .full-echo-rail { width: min(180px, 65%); }
}
@media(prefers-reduced-motion:reduce) {
  .motion-full .full-echo-rail,.motion-full .full-arrow-echo { display: none; }
}