/* =====================================================================
 * Self-view — Soft light
 * ---------------------------------------------------------------------
 * Always-on, display-only treatment for Speech, Interview, Shadow
 * Interview, and Pitch Shadow. Does not touch the MediaStream, replay,
 * or on-device coaching.
 * ===================================================================== */

.speech-soft-light-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background:
    radial-gradient(ellipse 85% 58% at 50% 16%, rgba(255, 236, 214, 0.20), transparent 64%),
    radial-gradient(ellipse 95% 72% at 50% 108%, rgba(12, 19, 24, 0.32), transparent 58%);
}

.ted-recording-self-view.is-on .speech-soft-light-veil,
.kouli-self-view.is-on .speech-soft-light-veil,
.sc-self-view.is-on .speech-soft-light-veil,
.interview-self-view-wrap:has(.interview-self-view-video[style*="block"]) .speech-soft-light-veil {
  opacity: 1;
}

.ted-recording-self-view .ted-recording-self-view-video,
.interview-self-view-wrap .interview-self-view-video,
.kouli-self-view .kouli-self-view-video {
  transform: scaleX(-1) scale(1.02);
  filter: brightness(1.07) contrast(1.05) saturate(1.07) blur(0.42px);
}

.sc-self-view .sc-self-view-video {
  transform: scaleX(-1) scale(1.05);
  filter: brightness(1.16) contrast(0.96) saturate(1.04) blur(0.85px);
}

@media (prefers-reduced-motion: reduce) {
  .ted-recording-self-view .ted-recording-self-view-video,
  .interview-self-view-wrap .interview-self-view-video,
  .kouli-self-view .kouli-self-view-video {
    transform: scaleX(-1);
    filter: brightness(1.07) contrast(1.05) saturate(1.07);
  }

  .sc-self-view .sc-self-view-video {
    transform: scaleX(-1);
    filter: brightness(1.14) contrast(0.98) saturate(1.04);
  }
}