.scene.podcast { overflow: clip; }

.podcast-carousel {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  min-width: 0;
  width: 100%;
  padding: 28px 0 48px;
  border: 0;
  background: transparent;
  transform: none;
  overflow: visible;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.podcast-carousel > .podcast-monitor {
  display: block;
  grid-area: 1 / 1;
  align-self: center;
  min-width: 0;
  width: min(calc(100% - 40px), 560px);
  margin: 0;
  transform: none;
  transform-origin: center;
  touch-action: pan-y pinch-zoom;
  will-change: transform, opacity;
}

.podcast-carousel > .podcast-monitor.is-active {
  border-color: #eab38466;
  box-shadow: 0 16px 36px #0005;
}

.podcast-carousel.is-dragging {
  cursor: grabbing;
}

.podcast-carousel .podcast-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: #0b100e;
}

.podcast-carousel .has-video .podcast-media {
  aspect-ratio: auto;
}

.podcast-carousel .has-photo .podcast-media {
  aspect-ratio: 3 / 2;
}

.podcast-carousel .podcast-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  -webkit-user-drag: none;
}

.podcast-carousel .has-photo .podcast-media > img {
  object-fit: contain;
}

.podcast-video-window {
  position: relative;
  margin: 0 4px;
  border: 1px solid #eeeade73;
  padding: 6px;
  background: #0b100e;
}

.podcast-carousel .podcast-video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: contain;
  background: #0b100e;
  pointer-events: none;
}

.podcast-carousel .is-coming-soon .podcast-media > img { opacity: .2; }

.podcast-coming-soon {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--accent);
  font: 400 clamp(14px, 2vw, 19px)/1.4 var(--mono);
  letter-spacing: .025em;
  text-shadow: 0 2px 18px #000;
  pointer-events: none;
}

.podcast-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 48%, transparent 22%, #0005 55%, #000d 80%, #000 100%);
  pointer-events: none;
}

.podcast-monitor.is-active .podcast-vignette { animation: podcast-vignette-fade .9s ease-out both; }
.podcast-carousel .is-coming-soon .monitor-safe::after { content: none; }
.podcast-carousel .is-coming-soon .monitor-safe { opacity: 0; }
.podcast-carousel .is-coming-soon.is-active .monitor-safe { animation: podcast-safe-fade .7s ease-out both; }
@keyframes podcast-vignette-fade {
  from { opacity: .25; }
  to { opacity: 1; }
}
@keyframes podcast-safe-fade {
  from { opacity: .7; }
  to { opacity: 0; }
}

.podcast-video-play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  padding: 10px 16px;
  color: var(--text);
  background: #0b100ed9;
  font: 11px/1.6 var(--mono);
  cursor: pointer;
}
.podcast-video-play[hidden] { display: none; }
.podcast-video-play:disabled { cursor: wait; opacity: .5; }
.podcast-video-play:hover:not(:disabled) { color: var(--accent); }
.podcast-video-play:focus-visible,
.podcast-video-sound:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.monitor-footer-controls { display: inline-flex; align-items: center; gap: 13px; }
.podcast-video-sound {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 18px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.podcast-video-sound::before { content: ''; position: absolute; inset: -6px -3px; }
.podcast-video-sound svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.podcast-video-sound[aria-pressed="true"], .podcast-video-sound:hover:not(:disabled) { color: var(--accent); }
.podcast-video-sound:disabled { opacity: .35; cursor: default; }
.podcast-speaker-on { display: none; }
.podcast-video-sound[aria-pressed="true"] .podcast-speaker-on { display: block; }
.podcast-video-sound[aria-pressed="true"] .podcast-speaker-muted { display: none; }

.podcast-carousel .red-dot { animation: podcast-record-pulse 2.2s ease-in-out infinite; }
@keyframes podcast-record-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px #ee775e28; }
  50% { opacity: .35; box-shadow: 0 0 2px #ee775e08; }
}

.podcast-carousel .audio-meter i {
  animation-name: podcast-meter;
  transform-origin: center;
}

.podcast-carousel .podcast-monitor[aria-hidden="true"] .audio-meter i,
.podcast-carousel .podcast-monitor[aria-hidden="true"] .red-dot,
.podcast-carousel.is-dragging .audio-meter i,
.podcast-carousel:not(.is-in-view) :is(.audio-meter i, .red-dot, .podcast-vignette, .monitor-safe),
.podcast-carousel.is-page-hidden :is(.audio-meter i, .red-dot, .podcast-vignette, .monitor-safe) {
  animation-play-state: paused;
}

@keyframes podcast-meter {
  to { transform: scaleY(.25); opacity: .45; }
}

.podcast-carousel:focus-visible {
  outline-offset: 3px;
}

@media (max-width: 820px) {
  .podcast-carousel {
    width: calc(100% + 2 * var(--gutter));
    margin: 0 calc(-1 * var(--gutter));
  }

  .podcast-carousel > .podcast-monitor {
    width: min(84vw, 500px);
  }

  .podcast-carousel:focus-visible {
    outline-offset: -3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .podcast-carousel > .podcast-monitor {
    transition: none;
  }
  .podcast-carousel :is(.red-dot, .audio-meter i, .podcast-vignette, .monitor-safe) { animation: none; }
}