/* pages/_videoframe renders the poster below instead of a <video> when the source it was given
   resolves to nothing, so the empty state is drawn rather than broken. */
.c-videoframe { display: flex; flex-direction: column; gap: var(--space-xs); }

.c-videoframe__frame {
  position: relative;
  border: var(--bw) solid var(--line-strong);
  background: var(--surface-sunken);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.c-videoframe__video { display: block; width: 100%; height: 100%; background: var(--surface-sunken); }

.c-videoframe__poster {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: var(--space-sm);
  align-items: center; justify-content: center;
  color: var(--text-dim);
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 3px, var(--surface-raised) 3px, var(--surface-raised) 4px);
}
.c-videoframe__glyph {
  font-size: var(--text-3xl);
  line-height: 1;
  color: var(--accent);
  /* The duration folds --motion-scale, so reduced motion holds the glyph still. */
  animation: gantry-videoframe-pulse calc(2.4s * var(--motion-scale)) ease-in-out infinite;
}
.c-videoframe__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-dim);
}

.c-videoframe__caption { color: var(--text-dim); font-size: var(--text-xs); }
.c-videoframe__caption::before { content: "─ "; color: var(--line-strong); }
.c-videoframe__caption-link { color: inherit; text-decoration-color: var(--line-strong); }
.c-videoframe__caption-link:hover { color: var(--text); text-decoration-color: var(--accent); }

@keyframes gantry-videoframe-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}