/* Isolated sample: the approved homepage and its movie are unchanged. */
.motion-preview {
  --echo-violet: #8465db;
  --echo-blue: #71b4db;
  --echo-teal: #74c7bc;
  --echo-lime: #d8e69c;
}
.motion-preview .motion-preview-bar {
  border-bottom: 1px solid var(--line);
  background: #eeece8;
  font-size: 12px;
  line-height: 1.6;
}
.motion-preview .motion-preview-bar > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
}
.motion-preview .motion-preview-bar nav { display: flex; gap: 24px; }
.motion-preview .motion-preview-bar a { display: inline-flex; align-items: center; min-height: 44px; }
.motion-preview .example-tabs { position: relative; isolation: isolate; }
.motion-preview .motion-tab-trails {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
.motion-preview .motion-tab-trails i {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  transform-origin: left center;
  background: var(--echo-violet);
}
.motion-preview .motion-tab-trails i:nth-child(2) { background: var(--echo-blue); }
.motion-preview .motion-tab-trails i:nth-child(3) { background: var(--echo-teal); }
.motion-preview .motion-tab-trails i:nth-child(4) { background: var(--echo-lime); }
.motion-preview .motion-tab-trails i:last-child { background: #faf9f5; }
.motion-preview .footer-wordmark > .motion-signature {
  position: relative;
  isolation: isolate;
}
.motion-preview .motion-signature-echo {
  position: absolute;
  inset: 0;
  opacity: 0;
  color: var(--echo-violet);
  pointer-events: none;
  z-index: -1;
  font-style: normal;
}
.motion-preview .motion-signature-echo:nth-child(2) { color: var(--echo-blue); }
.motion-preview .motion-signature-echo:nth-child(3) { color: var(--echo-teal); }
.motion-preview .motion-signature-echo:nth-child(4) { color: var(--echo-lime); }
.motion-preview .footer-bottom { position: relative; }
.motion-preview .motion-signature-rule {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
  overflow: hidden;
}
.motion-preview .motion-signature-rule i {
  display: block;
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(90deg, var(--echo-violet), var(--echo-blue), var(--echo-teal), var(--echo-lime));
  transform-origin: left center;
}
@media (max-width: 760px) {
  .motion-preview .motion-preview-bar > div { flex-wrap: wrap; gap: 0 12px; padding-block: 3px; }
  .motion-preview .motion-preview-bar nav { gap: 18px; }
  .motion-preview .motion-tab-trails i { height: 2px; }
  .motion-preview .motion-tab-trails i:last-child { background: #141413; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-preview .motion-signature-echo,
  .motion-preview .motion-signature-rule { display: none; }
}