/* V2.4: a soft color bloom rises over the grayscale program photograph.
   Both layers use the same asset/crop/transform; only the color mask grows. */
.program-image > .program-color-wash {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

@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: 768px) and (hover: hover) and (pointer: fine) {
    .program-card .program-image > img:not(.program-color-wash) {
      filter: grayscale(1);
      transition: transform .6s var(--ease);
    }

    .program-card .program-image > .program-color-wash {
      display: block;
      filter: none;
      -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 .95s cubic-bezier(.25,.1,.25,1),
                  mask-size .95s cubic-bezier(.25,.1,.25,1),
                  transform .6s var(--ease);
    }

    .program-card:hover .program-image > .program-color-wash,
    .program-card:focus-visible .program-image > .program-color-wash {
      -webkit-mask-size: 320% 320%;
      mask-size: 320% 320%;
    }
  }
}

/* Touch and narrow screens keep the existing full-color presentation.
   Motion preferences take effect immediately, including the review switch. */
@media (prefers-reduced-motion: reduce) {
  .program-image > .program-color-wash { display: none !important; }
}
html.reduce-motion .program-image > .program-color-wash { display: none !important; }