/* V2.5: one slower, soft upward color reveal for programs and audience scenes. */
.program-card .program-image > .program-color-wash {
  transition-duration: 1.6s, 1.6s, .6s;
}

.audience-scene-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .28s var(--ease);
}
.audience-scene-layer.is-front { opacity: 1; }
.audience-scene-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 43%;
}
.audience-color-wash { display: none; pointer-events: none; }
.audience-scene-photo.has-image-error { visibility: hidden; }

@supports (mask-image: radial-gradient(ellipse at 50% 100%, black, transparent)) or (-webkit-mask-image: radial-gradient(ellipse at 50% 100%, black, transparent)) {
  @media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    .audience-bloom-enabled .audience-scene-base { filter: grayscale(1); }
    .audience-bloom-enabled .audience-color-wash {
      display: block;
      -webkit-mask-image: radial-gradient(ellipse farthest-side at 50% 100%, #000 52%, transparent 72%);
      mask-image: radial-gradient(ellipse farthest-side at 50% 100%, #000 52%, transparent 72%);
      -webkit-mask-position: 50% 100%;
      mask-position: 50% 100%;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: 0% 0%;
      mask-size: 0% 0%;
      transition: -webkit-mask-size 1.6s cubic-bezier(.25,.1,.25,1),
                  mask-size 1.6s cubic-bezier(.25,.1,.25,1);
    }
    .audience-bloom-enabled .audience-scene-layer.is-color .audience-color-wash {
      -webkit-mask-size: 320% 320%;
      mask-size: 320% 320%;
    }
    .audience-bloom-enabled .audience-scene-layer.reset-color .audience-color-wash {
      transition: none;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .audience-scene-layer { transition: none; }
  .audience-bloom-enabled .audience-scene-base { filter: none; }
  .audience-bloom-enabled .audience-color-wash { display: none; }
}
html.reduce-motion .audience-scene-layer { transition: none; }
html.reduce-motion .audience-bloom-enabled .audience-scene-base { filter: none; }
html.reduce-motion .audience-bloom-enabled .audience-color-wash { display: none; }