/* Transition player styles. Behaviour lives in transition-player.js.
   The page provides these custom properties: --line, --edge, --overlay, --surface, --text, --muted, --select,
   --accent, --bg, --display, --mono. */
/* The player shows the captures at their native width (--sp-width), centred on the page. It is wider than the
   content column, so it breaks out of it, and it only shrinks when the window is narrower than the video.
   The width is also capped so the whole frame, with its controls, fits the window height (--sp-aspect = width / height). */
.sp { width: min(var(--sp-width, 1354px), calc(100vw - 32px), calc((100vh - 48px) * var(--sp-aspect, 1.875))); margin-left: 50%; transform: translateX(-50%); }
/* A framed preview screen: anything a clip draws beyond the frame is cropped. */
.sp-stage { position: relative; border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.sp-layer { position: absolute; inset: 0; }
.sp-layer.clip { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.sp-layer.clip.on { opacity: 1; }
.sp-layer video { width: 100%; height: 100%; object-fit: contain; }
/* On narrow screens the video is scaled down, so a player may magnify its captures (--sp-zoom) around the
   point where the subject sits (--sp-origin). Scaling around a point inside the frame never exposes an edge. */
@media (max-width: 719px) {
  .sp-layer video { transform: scale(var(--sp-zoom, 1)); transform-origin: var(--sp-origin, 50% 50%); }
}
.sp-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--accent); z-index: 2; }
.sp-title { margin: 0 0 14px; font: 700 clamp(22px, 2.4vw, 31px)/1.1 var(--display); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); text-align: center; }
/* The controls sit inside the frame, along its bottom edge, so they stay on screen with the video. */
.sp-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(transparent, rgba(0,0,0,.62)); z-index: 2; pointer-events: none; }
/* The caption and the controls share one bar along the bottom of the frame, caption directly above the buttons. */
.sp-bar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; width: min(560px, calc(100% - 24px)); display: flex; flex-direction: column; gap: 10px; }
.sp-controls { display: grid; grid-template-columns: repeat(var(--sp-columns, 3), 1fr); gap: 10px; }
/* The caption is centered. The sound icon sits at the right edge with no frame, and the volume slider opens to its left. */
.sp-info { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 12px; }
.sp-audio { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 6px; }
.sp-info .sp-caption { grid-column: 2; }
.sp-volume { flex: none; -webkit-appearance: none; appearance: none; width: clamp(80px, 10vw, 140px); height: 22px; margin: 0; background: transparent; cursor: pointer; filter: drop-shadow(0 1px 3px rgba(0,0,0,.9)); --v: 66%; }
.sp-volume[hidden] { display: none; }
.sp-volume::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--text) var(--v), var(--edge) var(--v)); }
.sp-volume::-moz-range-track { height: 4px; border-radius: 2px; background: var(--edge); }
.sp-volume::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--text); }
.sp-volume::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--text); border: 2px solid var(--text); }
.sp-volume::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--text); border: 2px solid var(--text); }
.sp-volume:focus-visible { outline: 2px solid var(--select); outline-offset: 4px; }
.sp-sound { flex: none; width: 36px; height: 36px; padding: 0; background: none; border: 0; cursor: pointer; color: #d63a62; display: grid; place-items: center; filter: drop-shadow(0 1px 3px rgba(0,0,0,.9)); }
.sp-sound svg { width: 100%; height: 100%; display: block; }
.sp-sound:hover { color: #ff6b8e; }
.sp-sound .sp-sound-on, .sp-sound[aria-pressed="true"] .sp-sound-off { display: none; }
.sp-sound[aria-pressed="true"] .sp-sound-on { display: inline; }
.sp-sound[aria-pressed="true"] { color: var(--text); }
/* Tooltip above the icon. While sound is off it stays visible as an invitation; once on, it shows on hover or focus only. */
.sp-sound { position: relative; }
/* The hint sits where the volume slider opens later: to the left of the icon. It is gone once the sound is on. */
.sp-sound::after { content: attr(data-tip); position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap; padding: .45em .8em; background: #d63a62; color: #fff; font: 600 13px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; border-radius: 3px; pointer-events: none; filter: none; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.sp-sound::before { content: ""; position: absolute; right: calc(100% + 4px); top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left-color: #d63a62; border-right: 0; pointer-events: none; }
.sp-sound[aria-pressed="true"]::after, .sp-sound[aria-pressed="true"]::before { display: none; }
.sp-sound[aria-pressed="false"] svg { animation: sp-sound-nudge 2.4s ease-in-out infinite; }
@keyframes sp-sound-nudge { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.22); } 90% { transform: scale(1); } }
.sp-btn { padding: 12px 10px; background: var(--overlay); border: 1px solid var(--edge); color: var(--text); cursor: pointer; font: 500 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.sp-btn:hover { border-color: var(--text); }
/* Play triangle drawn in CSS, in the accent colour. It turns white on the active (playing) button. */
.sp-ico { flex: none; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }
.sp-btn:not(.active) .sp-ico { border-left-color: #d63a62; }
.sp-btn.active { background: var(--select); border-color: var(--select); color: var(--bg); }
.sp-btn[aria-disabled="true"]:not(.active) { opacity: .45; cursor: default; }
/* Desktop: the buttons are 1.5x the base size (13px -> 19.5px) on wide windows, scaling down with the window. */
@media (min-width: 720px) {
  .sp-bar { width: min(840px, calc(100% - 48px)); bottom: 21px; gap: 14px; }
  .sp-controls { gap: 15px; }
  .sp-bar .sp-caption { font-size: clamp(14px, 1.2vw, 18px); }
  .sp-btn { font-size: clamp(13px, 1.44vw, 19.5px); padding: .92em .77em; gap: .62em; white-space: nowrap; }
  .sp-ico { border-width: .38em 0 .38em .62em; }
  /* The sound icon grows on wide windows. */
  .sp-sound { width: clamp(36px, 3.2vw, 48px); height: clamp(36px, 3.2vw, 48px); }
}
@media (max-width: 719px) {
  .sp-stage { aspect-ratio: auto !important; padding-top: calc(100% / var(--sp-aspect)); }
  .sp-layer { bottom: auto; width: 100%; aspect-ratio: var(--sp-aspect); overflow: hidden; }
  .sp-stage::after { display: none; }
  .sp-bar { position: relative; left: auto; bottom: auto; transform: none; width: 100%; padding: 12px; gap: 9px; background: var(--surface); }
  .sp-sound { width: 44px; height: 44px; }
  .sp-sound::after { font-size: 10px; padding: .4em .65em; right: calc(100% + 8px); }
  .sp-sound::before { border-width: 5px; border-right: 0; right: calc(100% + 3px); }
  .sp-info { grid-template-columns: 1fr auto; column-gap: 8px; }
  .sp-info .sp-caption { grid-column: 1; text-align: left; }
  .sp-audio { grid-column: 2; }
  .sp-sound::after, .sp-sound::before { display: none; }
  .sp-volume { width: 64px; }
  .sp-controls { gap: 6px; }
  .sp-bar .sp-caption { font-size: 12px; line-height: 1.35; }
  .sp-btn { min-height: 44px; padding: 8px 2px; font-size: 11px; letter-spacing: .02em; white-space: nowrap; gap: 5px; }
  .sp-ico { border-width: 4px 0 4px 6px; }
}
.sp-caption { margin: 0; font-style: italic; font-size: 15px; line-height: 1.4; color: var(--muted); text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 12px rgba(0,0,0,.8); pointer-events: none; }
.sp-caption b { display: block; color: var(--text); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .sp-sound[aria-pressed="false"] svg { animation: none; }
}