/* 06-components/_videoframe.css */
/* ── c-videoframe — a captioned video slot whose *placeholder* is a first-class state.
   With no source it renders a phosphor "screencast pending" poster (framed, dark, mono —
   the terminal/bootscreen language), never a broken <video>. With a source it renders a
   native <video poster preload=metadata controls>, click-to-play, no sound-on autoplay.
   Semantic tokens only; square corners; any motion folds through --motion-scale. */
.c-videoframe { display: flex; flex-direction: column; gap: var(--space-xs); }

/* the frame — a phosphor monitor bezel around either the video or the placeholder poster */
.c-videoframe__frame {
  position: relative;
  border: var(--bw) solid var(--line-strong);
  background: var(--surface-sunken);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* the real embed fills the bezel; the browser's own controls sit on top */
.c-videoframe__video { display: block; width: 100%; height: 100%; background: var(--surface-sunken); }

/* the placeholder poster — a centred glyph + label that reads as intentional, not broken */
.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);
  /* faint scanline wash, tying the empty slot to the CRT texture */
  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);
  /* subtle phosphor pulse; duration folds --motion-scale, so reduced motion holds it static */
  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);
}

/* the caption, matching c-figure's dim mono register */
.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; }
}