.project-film {
  position: fixed;
  z-index: 80;
  width: 224px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(239,68,68,.28);
  border-radius: 9px;
  background: #090909;
  box-shadow: 0 16px 48px #0009;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  pointer-events: none;
}
.project-film.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.project-film.is-inline { position: relative; z-index: 1; width: 100%; margin-top: 20px; box-shadow: none; }
.project-film.is-inline video { height: 110px; aspect-ratio: auto; }
.project-film.is-inline[hidden] { display: none; }
.project-film video { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; filter: saturate(.65) brightness(.85); }
.project-film figcaption { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; color: #a3a3a3; font: 9px/1.4 monospace; letter-spacing: .08em; }
.project-film figcaption::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #ef4444; margin-right: 7px; }
.project-film a { margin-left: auto; font-size: 8px; color: #737373; pointer-events: auto; }
.project-film a:hover { color: #f87171; }
.project-film-close { position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; border: 1px solid #ffffff30; border-radius: 50%; background: #090909b3; color: #fff; pointer-events: auto; font: 18px/1 monospace; }
.project-film-trigger { margin-left: auto; margin-right: 12px; padding: 4px 0; border: 0; background: transparent; color: #a3a3a3; font: 9px/1.4 monospace; letter-spacing: .08em; opacity: 0; transition: opacity 180ms, color 180ms; }
[data-project-film]:hover .project-film-trigger, [data-project-film]:focus-within .project-film-trigger { opacity: 1; }
.project-film-trigger:hover { color: #f87171; }
.project-film-trigger:focus-visible, .project-film-close:focus-visible { outline: 1px solid #f87171; outline-offset: 4px; }
@media (hover: none) { .project-film-trigger { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .project-film, .project-film-trigger { transition: none; } .project-film-trigger { opacity: 1; } }