/* Claim video player: the claimviral.com course player (Oct 2026) for the
   creator sales video on claimtrial.com, claimcreators.com and the three
   thanks-for-booking pages. Same cover, big play button, glass control bar,
   back 10, scrubber, 1x to 2x speed and full screen as the course; scrubbing
   is free here (the course blocks skipping ahead).
   Source of truth: creator-landing-site/site/player/. tools/sync-player.sh
   copies it into claimtrial-site and claimcreators-site.
   Everything is scoped under .cp so it never touches the host page. */

.cp {
  --cp-ink: #0b0b0f;
  --cp-i60: rgba(11, 11, 15, 0.6);
  --cp-i30: rgba(11, 11, 15, 0.3);
  --cp-i12: rgba(11, 11, 15, 0.12);
  --cp-i06: rgba(11, 11, 15, 0.06);
  --cp-ease: cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  container-type: inline-size;
  aspect-ratio: 16 / 9;
  border-radius: var(--cp-radius, 16px);
  overflow: hidden;
  box-shadow: var(--cp-shadow, 0 1px 2px rgba(20, 20, 40, 0.05), 0 18px 44px -18px rgba(40, 40, 90, 0.3));
  background: #fff; /* never black: iPhones drew the poster a hair short and a black line showed */
  isolation: isolate;
  color: var(--cp-ink);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
}
.cp video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; background: transparent; }
/* Zero specificity, so the player's own rules (the centered play button's margins) always win */
:where(.cp) button { font: inherit; color: inherit; margin: 0; }

/* The cover stays until frames are really on screen, then fades away */
.cp-cover { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: opacity 0.32s ease; }
.cp.live .cp-cover { opacity: 0; }

.cp-big {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 74px;
  height: 74px;
  margin: -37px 0 0 -37px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s var(--cp-ease), opacity 0.25s;
}
.cp-big svg { width: 26px; height: 26px; fill: var(--cp-ink); }
.cp-big:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .cp-big:hover { transform: scale(1.05); } }
.cp.playing .cp-big, .cp.menu .cp-big { opacity: 0; pointer-events: none; }

.cp-controls {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s var(--cp-ease);
}
.cp.playing.show .cp-controls, .cp.paused .cp-controls { opacity: 1; transform: none; pointer-events: auto; }
.cp-controls > button, .cp-speed > button {
  height: 34px;
  min-width: 34px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
}
@media (hover: hover) and (pointer: fine) { .cp-controls > button:hover, .cp-speed > button:hover { background: var(--cp-i06); } }
.cp-controls svg { width: 18px; height: 18px; fill: var(--cp-ink); }
.cp-time { font-size: 12.5px; font-weight: 600; line-height: 1; color: var(--cp-i60); white-space: nowrap; padding: 0 4px; font-variant-numeric: tabular-nums; letter-spacing: 0; }

.cp-scrub { position: relative; flex: 1; min-width: 40px; height: 30px; margin: 0 6px; cursor: pointer; touch-action: none; outline: none; }
.cp-scrub span { position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; }
.cp-scrub .cp-rail { right: 0; background: var(--cp-i12); }
.cp-scrub .cp-buf { width: 0; background: var(--cp-i30); }
.cp-scrub .cp-cur { width: 0; background: var(--cp-ink); }
.cp-scrub .cp-knob { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: var(--cp-ink); }

.cp-speed { position: static; flex: none; }
.cp-speed > button { padding: 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0; }
.cp-rates {
  position: absolute;
  right: 0;
  bottom: 48px;
  display: none;
  flex-direction: row;
  gap: 2px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.16);
}
.cp-rates.open { display: flex; }
.cp-rates button {
  height: 34px;
  min-width: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-align: center;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .cp-rates button:hover { background: var(--cp-i06); } }
.cp-rates button.on { background: var(--cp-ink); color: #fff; }

/* Full screen: the whole frame, letterboxed on black */
.cp:fullscreen { border-radius: 0; background: #000; }
.cp:fullscreen video, .cp:fullscreen .cp-cover { object-fit: contain; }
.cp:-webkit-full-screen { border-radius: 0; background: #000; }
.cp:-webkit-full-screen video, .cp:-webkit-full-screen .cp-cover { object-fit: contain; }

/* Small players (phones) */
@container (max-width: 520px) {
  .cp-big { width: 62px; height: 62px; margin: -31px 0 0 -31px; }
  .cp-big svg { width: 22px; height: 22px; }
  .cp-controls { left: 6px; right: 6px; bottom: 6px; padding: 3px 4px; gap: 0; }
  .cp-controls > button, .cp-speed > button { height: 32px; min-width: 32px; }
  .cp-controls svg { width: 17px; height: 17px; }
  .cp-time { display: none; }
  .cp-scrub { margin: 0 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .cp *, .cp { transition: none !important; }
}