/* Motion V1 is progressive enhancement: static styles remain the fallback. */

.archive-strip {
  --archive-strip-cycle: 103.75rem;
  --archive-strip-track: 207.5rem;
  --archive-strip-gap: 1rem;

  overflow: hidden;
}

.archive-strip__track {
  display: flex;
  flex: 0 0 var(--archive-strip-track);
  inline-size: var(--archive-strip-track);
  block-size: 100%;
  direction: ltr;
}

.archive-strip__set {
  display: flex;
  flex: 0 0 var(--archive-strip-cycle);
  gap: var(--archive-strip-gap);
  inline-size: var(--archive-strip-cycle);
  block-size: 100%;
}

html.motion-ready .archive-section.archive-loop-active .archive-strip__track {
  animation: archive-library-loop 26s linear infinite;
}

html.motion-ready .archive-section.archive-loop-paused .archive-strip__track {
  animation-play-state: paused;
}

/* Search remains semantically complete in markup; motion swaps only its visual query layer. */
.search-query__typing,
.search-query__caret {
  display: none;
}

html.motion-ready .search-query {
  direction: ltr;
  text-align: left;
  white-space: nowrap;
}

html.motion-ready .search-query__static {
  display: none;
}

html.motion-ready .search-query__typing {
  display: inline;
}

html.motion-ready .search-query__caret {
  display: none;
  inline-size: 0.09375rem;
  block-size: 1em;
  margin-inline-start: 0.125rem;
  vertical-align: -0.08em;
  background: currentColor;
}

html.motion-ready .search-section.search-is-typing .search-query__caret {
  display: inline-block;
  animation: search-caret-blink 460ms steps(1, end) infinite;
}

@keyframes search-caret-blink {
  50% { opacity: 0; }
}

@keyframes archive-library-loop {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

html.motion-ready .header-cta,
html.motion-ready .hero-button {
  transition:
    translate var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

html.motion-ready .header-cta:hover,
html.motion-ready .header-cta:focus-visible,
html.motion-ready .hero-button:hover,
html.motion-ready .hero-button:focus-visible {
  translate: 0 -0.125rem;
}

html.motion-ready .hero-button:hover,
html.motion-ready .hero-button:focus-visible {
  box-shadow: 0 0.875rem 2rem -0.75rem rgb(0 0 0 / 54%);
}

@media (max-width: 68.6875rem) {
  .archive-strip {
    --archive-strip-cycle: 39.425rem;
    --archive-strip-track: 78.85rem;
    --archive-strip-gap: 0.38rem;
  }

  html.motion-ready .archive-section.archive-loop-active .archive-strip__track {
    animation: none;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .archive-strip__track {
    animation: none !important;
    transform: none !important;
  }

  html.motion-ready .header-cta,
  html.motion-ready .hero-button {
    transition: none;
  }

}