/* Custom video player styles (used on project pages).
 *
 * Pairs with /js/video.js, which builds the .video > video + controls
 * markup and wires play/pause/volume/fullscreen interaction.
 *
 * Also includes the :fullscreen rules so any media taken fullscreen
 * via the F-key handler in /js/video.js renders contained-not-cropped
 * against a black backdrop.
 */

/* ---------------- Video wrapper + controls ---------------- */
.video {
  position: relative;
  line-height: 0; /* kill descender gap below <video> */
}
.video > video { display: block; }

.video-controls {
  position: absolute;
  right: 14px; bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  color: #fff;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 2;
}
.video.is-active .video-controls,
.video.is-paused .video-controls { opacity: 1; pointer-events: auto; }

/* Hide the cursor when idle over a playing video. The `is-active`
   class is added on pointermove and removed after a short idle
   timeout (see JS), so this naturally fades the cursor out alongside
   the controls. Only applied while playing — on a paused video the
   cursor stays visible so the user can still click to resume. */
.video.is-playing:not(.is-active) { cursor: none; }
.video.is-playing:not(.is-active) * { cursor: none; }

.video-controls button {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px;
  margin: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  border-radius: 999px;
  transition: opacity 0.15s ease;
  opacity: 0.95;
}
.video-controls button:hover,
.video-controls button:focus-visible { opacity: 1; outline: none; }
.video-controls button svg {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
/* Show only the matching state icon */
.video-controls .icon-pause,
.video-controls .icon-fs-exit { display: none; }
.video.is-playing .video-controls .icon-play { display: none; }
.video.is-playing .video-controls .icon-pause { display: inline-block; }
.video.is-fullscreen .video-controls .icon-fs { display: none; }
.video.is-fullscreen .video-controls .icon-fs-exit { display: inline-block; }

.video-controls .video-volume {
  font-family: inherit;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: inherit;
  cursor: ns-resize;
  user-select: none;
  padding: 4px 6px;
  min-width: 4ch;
  text-align: center;
  opacity: 0.85;
  transition: opacity 0.15s ease;
  touch-action: none;
}
.video-controls .video-volume:hover,
.video-controls .video-volume:focus-visible { opacity: 1; outline: none; }

/* Hide controls when no pointer is available */
@media (hover: none) {
  .video .video-controls { opacity: 1; pointer-events: auto; }
}

/* ---------------- Fullscreen behaviour ----------------
 * Contain (fit), never crop, against a black backdrop. Applies to
 * any media element / wrapper taken fullscreen via the F key handler
 * in /js/video.js — images, videos, embeds and the hero alike.
 */
img:fullscreen,
video:fullscreen,
figure:fullscreen,
.video:fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  background: #000 !important;
  object-fit: contain !important;
}
img:-webkit-full-screen,
video:-webkit-full-screen,
figure:-webkit-full-screen,
.video:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  background: #000 !important;
  object-fit: contain !important;
}
figure:fullscreen img,
figure:fullscreen video,
.video:fullscreen > video {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  background: #000 !important;
}
figure:-webkit-full-screen img,
figure:-webkit-full-screen video,
.video:-webkit-full-screen > video {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  background: #000 !important;
}

::backdrop { background: #000; }
::-webkit-full-screen-document { background: #000; }