/*
 * Cloudflare Stream player — shared visuals for embedded and standalone consumers.
 * Vanilla port of the Raisely cause-video-player UX. See .claude/skills/sync-stream-player.
 *
 * The caller controls the outer container's sizing and chrome (border, background,
 * aspect-ratio, max-width). This stylesheet only owns the player's INTERNAL layout
 * (poster stacked behind video, overlay above video, pill on top, Plyr theming).
 */

.stream-player {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
}

.stream-player__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.92;
  z-index: 0;
  pointer-events: none;
}

.stream-player__video {
  position: relative;
  width: 100%; height: 100%;
  z-index: 1;
  background: transparent;
  border-radius: inherit;
}

.stream-player[data-layout="portrait-card"] .stream-player__video { object-fit: contain; }
.stream-player[data-layout="landscape-fill"] .stream-player__video { object-fit: cover; }

/* Plyr theme — HIA pastel blue accents; mirrors the Raisely cause-video-player. */
.stream-player .plyr {
  --plyr-color-main: #97CEFF;
  --plyr-video-control-color: #ffffff;
  --plyr-video-control-color-hover: #000000;
  --plyr-video-control-background-hover: #97CEFF;
  --plyr-range-fill-background: #97CEFF;
  --plyr-range-thumb-background: #97CEFF;
  --plyr-control-radius: 999px;
  --plyr-font-family: 'Chakra Petch', sans-serif;
  width: 100%; height: 100%;
  border-radius: inherit;
  position: relative; z-index: 1;
}
.stream-player .plyr video { background: transparent; }
.stream-player[data-layout="portrait-card"] .plyr video { object-fit: contain; }
.stream-player[data-layout="landscape-fill"] .plyr video { object-fit: cover; }
.stream-player .plyr__control--overlaid {
  background: #97CEFF;
  color: #000;
}

/* Tap-to-unmute affordance — TikTok/IG-style; mirrors the Raisely player. */
.stream-player__overlay {
  position: absolute; inset: 0; z-index: 5;
  background: transparent; cursor: pointer;
  transition: opacity 220ms ease;
}
.stream-player__overlay[hidden] { display: none; }

.stream-player__pill {
  position: absolute; z-index: 9;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  background: rgba(0,0,0,0.55); color: #fff;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 999px;
  font-family: 'Chakra Petch', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.02em; line-height: 1; cursor: pointer;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition:
    opacity 220ms ease, transform 220ms ease,
    width 280ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.stream-player[data-layout="portrait-card"] .stream-player__pill { right: 10px; bottom: 48px; }
.stream-player[data-layout="landscape-fill"] .stream-player__pill { right: 16px; bottom: 80px; height: 40px; padding: 0 16px; font-size: 14px; }
.stream-player[data-layout="landscape-fill"] .stream-player__pill[data-collapsed="1"] { width: 40px; height: 40px; }
.stream-player[data-layout="landscape-fill"] .stream-player__pill svg { width: 18px; height: 18px; flex: 0 0 18px; }

.stream-player__pill[data-visible="1"] {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.stream-player__pill[data-collapsed="1"] {
  width: 32px; padding: 0; justify-content: center;
}
.stream-player__pill[data-collapsed="1"] span {
  opacity: 0; max-width: 0; overflow: hidden;
}
.stream-player__pill svg { width: 14px; height: 14px; flex: 0 0 14px; }
.stream-player__pill span {
  white-space: nowrap;
  transition: opacity 200ms ease, max-width 280ms cubic-bezier(0.22, 1, 0.36, 1);
  max-width: 140px;
}
.stream-player__pill:hover,
.stream-player__pill:focus-visible {
  background: rgba(0,0,0,0.75);
  outline: none;
}