/* Existing real scene images stay visible until an active film presents a frame. */
.card-media > :where(.approach-film-video, #idea-video, #experience-video, #impact-video) {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--approach-film-position, 50% 50%);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.card-media[data-approach-film="ready"] > :where(.approach-film-video, #idea-video, #experience-video, #impact-video) {
  opacity: 1;
  visibility: visible;
}
.card-media[data-approach-film="ready"] > img { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .card-media > :where(.approach-film-video, #idea-video, #experience-video, #impact-video) { display: none; }
  .card-media[data-approach-film] > img { opacity: 1; }
  /* Motion is opt-in here: a deliberate tap/Enter/Space may play the film. */
  .card-media[data-approach-explicit="true"] > :where(.approach-film-video, #idea-video, #experience-video, #impact-video) { display: block; }
  .card-media[data-approach-explicit="true"][data-approach-film="ready"] > img { opacity: 0; }
}

/* This surface exists only inside the completed Idea card; it never owns the
   hero scroll position. Its first frame and crop match the docked hero. */
#idea .idea-card .idea-media-slot > #idea-video {
  object-position: 57% 50%;
  transition: opacity .18s ease, visibility 0s linear .18s;
}
#idea .idea-card .idea-media-slot[data-approach-film="ready"] > #idea-video {
  transition: none;
}
.motion-enabled #idea .idea-card .idea-media-slot[data-approach-film="ready"] > img.idea-image,
#idea .idea-card .idea-media-slot[data-approach-film="ready"] > img.idea-image { opacity: 0; }
.motion-enabled.idea-copy-in-flight #idea .idea-card .idea-media-slot > #idea-video {
  opacity: 0;
  visibility: hidden;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  #idea .idea-card .idea-media-slot > #idea-video { transition: none; }
}