/* video-overlay.css — bottom-left video pill overlays.
 * Applies at all breakpoints (video cards exist on mobile and desktop).
 * All z-index values come from layers.css --z-* variables.
 */

/* ── Facet(video_bottom_pills) — single shared black box, bottom-left ── */
.video-bottom-pills {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  z-index: var(--z-card-content);
  pointer-events: none;
  /* Shared box — auto-sizes to content */
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 8px;
  padding: 5px 12px;
}

/* ── Facet(video_timer_pill) — countdown, no own background ───────────── */
.video-timer-pill {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono, ui-monospace, monospace);
  white-space: nowrap;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

/* ── Facet(video_creator_pill) — creator name, no own background ─────── */
.video-creator-pill {
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  pointer-events: auto;
  text-decoration: none;
  display: inline-block;
  line-height: 1.5;
}

.video-creator-pill:hover {
  color: #fff;
}

/* Slide bottom pills up when controls bar is visible to avoid overlap */
.vp-wrap:has(.vp-ctrl-visible) .video-bottom-pills {
  bottom: 52px;
  transition: bottom 0.18s;
}

/* Hide the controls-bar elapsed/total text — timer pill owns that info now */
.vp-time {
  display: none !important;
}

/* ── Fullscreen: video and container fill the entire screen ─────────────── */
/* Standard fullscreen API (Android Chrome, Firefox, desktop) */
.vp-wrap:fullscreen,
.vp-wrap:-webkit-full-screen {
  width: 100vw;
  height: 100dvh;
  max-height: none;
  border-radius: 0;
  background: #000;
}
.vp-wrap:fullscreen video,
.vp-wrap:-webkit-full-screen video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* letterbox — never crop */
  max-height: none;
  border-radius: 0;
}
/* When the video element itself is the fullscreen target (Android fallback) */
video:fullscreen,
video:-webkit-full-screen {
  width: 100vw;
  height: 100dvh;
  max-height: none;
  object-fit: contain;
  background: #000;
}
/* Slide bottom pills up in fullscreen so they clear the controls bar */
.vp-wrap:fullscreen .video-bottom-pills,
.vp-wrap:-webkit-full-screen .video-bottom-pills {
  bottom: 56px;
}

/* ── Facet(pial_watermark) — client-side drifting overlay (shown until server burn is ready) ── */
.pial-watermark {
  position: absolute;
  color: rgba(255,255,255,0.18);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  pointer-events: none;
  z-index: 3;
  white-space: nowrap;
  user-select: none;
  animation: pial-drift 18s linear infinite;
}
@keyframes pial-drift {
  0%   { top: 15%; left: 5%;  }
  25%  { top: 65%; left: 60%; }
  50%  { top: 30%; left: 75%; }
  75%  { top: 75%; left: 20%; }
  100% { top: 15%; left: 5%;  }
}

/* ── Facet(vp_ios_lineage_flash) — lineage credit shown briefly on iOS element fullscreen ── */
.vp-ios-lineage-flash {
  position: fixed;
  bottom: 24px;
  left: 16px;
  z-index: 9999;
  background: rgba(0,0,0,0.72);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  pointer-events: none;
  animation: vp-flash-fade 3s ease forwards;
}
@keyframes vp-flash-fade {
  0%   { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}