[data-video-shell] {
  position: absolute;
  z-index: -2;
  inset: 0;
  overflow: hidden;
  background: var(--color-panel);
}

[data-video-shell] img,
[data-video-shell] video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--media-position-mobile, 50% 50%);
}

[data-video-shell] video {
  z-index: 0;
  opacity: 0;
  transition: opacity 420ms ease;
}

[data-video-shell].is-video-ready video {
  opacity: 1;
}

.hero [data-video-shell]::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(2 13 32 / 92%) 0%, rgb(3 20 47 / 66%) 43%, rgb(3 20 47 / 12%) 73%),
    linear-gradient(0deg, rgb(2 13 32 / 74%) 0%, transparent 42%, rgb(2 13 32 / 36%) 100%);
  content: "";
}

.hero [data-video-shell]::before {
  position: absolute;
  z-index: 0;
  inset: -2rem;
  background:
    linear-gradient(rgb(3 20 47 / 58%), rgb(2 13 32 / 86%)),
    var(--hero-poster) center / cover no-repeat;
  content: "";
  filter: blur(1rem) saturate(0.82);
  transform: scale(1.06);
}

.hero [data-video-shell] img {
  position: relative;
  z-index: 1;
  padding-inline: var(--space-3);
  object-fit: contain;
  object-position: center 15%;
}

.hero [data-video-shell] video {
  z-index: 1;
  padding-inline: var(--space-3);
  object-fit: contain;
  object-position: center 15%;
}

.project-card [data-video-shell]::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgb(2 13 32 / 96%) 0%, rgb(2 13 32 / 38%) 48%, transparent 78%);
  content: "";
}

.project-card [data-video-shell] img {
  transform: scale(1.015);
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1), filter var(--transition-smooth);
}

.project-card:hover [data-video-shell] img {
  transform: scale(1.045);
  filter: saturate(1.08) brightness(1.04);
}

@media (min-width: 56.25rem) {
  [data-video-shell] img,
  [data-video-shell] video {
    object-position: var(--media-position-desktop, 50% 50%);
  }

  .hero [data-video-shell]::after {
    background:
      linear-gradient(90deg, rgb(2 13 32 / 92%) 0%, rgb(3 20 47 / 60%) 37%, transparent 68%),
      linear-gradient(0deg, rgb(2 13 32 / 58%) 0%, transparent 38%, rgb(2 13 32 / 32%) 100%);
  }

  .hero [data-video-shell] img {
    padding-inline: 0;
    object-fit: cover;
    object-position: var(--media-position-desktop, 50% 50%);
  }

  .hero [data-video-shell] video {
    padding-inline: 0;
    object-fit: cover;
    object-position: var(--media-position-desktop, 50% 50%);
  }

  .hero [data-video-shell]::before {
    content: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-video-shell] video {
    display: none;
  }

  .project-card [data-video-shell] img,
  .project-card:hover [data-video-shell] img {
    transform: none;
  }
}