/** Tappable Stories click-to-play iframe video card. */
.ts-media--video .ts-video-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #111;
}

.ts-media--video .ts-video-iframe,
.ts-media--video .ts-video-poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.ts-media--video .ts-video-iframe {
  z-index: 1;
  background: #111;
}

.ts-media--video .ts-video-poster {
  z-index: 2;
  margin: 0;
  padding: 0;
  cursor: pointer;
  appearance: none;
  border: 0;
  border-radius: 0;
  background-color: #111;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 1;
  overflow: hidden;
  transition: opacity .8s ease, visibility .8s ease;
}

.ts-media--video .ts-video-wrapper.videoWrapperActive .ts-video-poster {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Mark's fabulous eye/play SVG restored from the working video-card Pen. */
.ts-media--video .ts-video-play {
  position: absolute;
  inset: 0;
  width: 25%;
  max-width: 225px;
  height: auto;
  margin: auto;
  opacity: .85;
  transform-origin: center;
  transition: opacity .2s ease;
}

.ts-media--video .lash-st0 { fill: #feaf00; }
.ts-media--video .lash-st1 { fill: #eb1d11; }
.ts-media--video .lash-st4 { fill: #fe6f02; }
.ts-media--video .lash-st5 { fill: #00a553; }
.ts-media--video .lash-st6 { fill: #67188b; }
.ts-media--video .lash-st8 { fill: #0096de; }
.ts-media--video .lash-st10 { fill: #d000a3; }
.ts-media--video .outer-eye { fill: #0096de; }
.ts-media--video .eye-pupil { fill: rgba(255, 255, 255, .5); }
.ts-media--video .drag-play-icon { fill: #cd00a1; transform-origin: center; }

.ts-media--video .ts-video-play [class^="lash-st"] {
  animation: tsVideoRainbowFlash 2.4s infinite ease-in-out;
}
.ts-media--video .ts-video-play .lash-st0 { animation-delay: 0s; }
.ts-media--video .ts-video-play .lash-st1 { animation-delay: .2s; }
.ts-media--video .ts-video-play .lash-st4 { animation-delay: .4s; }
.ts-media--video .ts-video-play .lash-st5 { animation-delay: .6s; }
.ts-media--video .ts-video-play .lash-st6 { animation-delay: .8s; }
.ts-media--video .ts-video-play .lash-st8 { animation-delay: 1s; }
.ts-media--video .ts-video-play .lash-st10 { animation-delay: 1.2s; }

.ts-media--video .ts-video-poster:hover .ts-video-play,
.ts-media--video .ts-video-poster:focus-visible .ts-video-play {
  animation: tsVideoEyeRollPop .8s ease-in-out;
  opacity: 1;
}

.ts-media--video .ts-video-poster:hover .drag-play-icon,
.ts-media--video .ts-video-poster:focus-visible .drag-play-icon {
  animation: tsVideoIconPulse 1.2s infinite ease-in-out;
}

.ts-media--video .ts-video-poster:hover .eye-pupil,
.ts-media--video .ts-video-poster:focus-visible .eye-pupil {
  animation: tsVideoPupilShine 1.2s infinite ease-in-out;
}

.ts-media--video .ts-video-poster:active .ts-video-play {
  transform: scale(.96);
}

.ts-media--video .ts-video-poster:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -6px;
}

/* Remove only generic media-card pseudo icons. The real SVG remains visible. */
.ts-media--video .ts-video-poster::before,
.ts-media--video .ts-video-poster::after,
.ts-media--video .ts-video-wrapper::before,
.ts-media--video .ts-video-wrapper::after {
  content: none !important;
  display: none !important;
}

@keyframes tsVideoRainbowFlash {
  0%, 100% { fill: #ff007f; }
  25% { fill: #ffa500; }
  50% { fill: #00ffff; }
  75% { fill: #8a2be2; }
}

@keyframes tsVideoEyeRollPop {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(5deg); }
  70% { transform: rotate(-5deg); }
}

@keyframes tsVideoIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

@keyframes tsVideoPupilShine {
  0%, 100% { fill: rgba(255, 255, 255, .5); }
  50% { fill: rgba(255, 255, 255, .85); }
}

@media (prefers-reduced-motion: reduce) {
  .ts-media--video .ts-video-play,
  .ts-media--video .ts-video-play *,
  .ts-media--video .drag-play-icon,
  .ts-media--video .eye-pupil {
    animation: none !important;
    transition: none !important;
  }
}