.archive-video-card {
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
}

.archive-video {
  border-radius: inherit;
  object-fit: cover;
}

.archive-cover-animation {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.archive-cover-animation img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  opacity: 0;
  transition: opacity 700ms cubic-bezier(.22,.61,.36,1);
}

.archive-cover-animation img.is-visible { opacity: 1; }

.archive-entry { display: grid; gap: 9px; }

.archive-vehicle-meta {
  margin: 0;
  color: #4d535c;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .065em;
  line-height: 1.25;
  text-align: center;
}

.archive-vehicle-meta span {
  margin-right: 5px;
  color: #ff859a;
}

.archive-video-card .archive-play { z-index: 2; }

.archive-video-card.has-animated-cover:not(.is-playing) .archive-video {
  visibility: hidden;
}

.archive-video-card.is-playing .archive-cover-animation,
.archive-video-card.is-playing .archive-play,
.archive-video-card.is-inline-playing .archive-cover-animation,
.archive-video-card.is-inline-playing .archive-play {
  display: none;
}

.archive-video-card:fullscreen,
.archive-video-card:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  max-height: none;
  border: 0;
  border-radius: 0;
  background: #000;
}

.archive-video-card:fullscreen .archive-video,
.archive-video-card:-webkit-full-screen .archive-video {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: contain;
}

.archive-video:fullscreen,
.archive-video:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  border-radius: 0;
  object-fit: contain;
  background: #000;
}

.archive-video-card:fullscreen .archive-cover-animation,
.archive-video-card:fullscreen .archive-play,
.archive-video-card:-webkit-full-screen .archive-cover-animation,
.archive-video-card:-webkit-full-screen .archive-play {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .archive-cover-animation img { transition: none; opacity: 0; }
  .archive-cover-animation img:first-child { opacity: 1; }
}