/* Full-card photograph: only the decorative image is blurred or veiled. */
:root .mission-panel.card-morph-glass {
  --mission-veil: rgb(245 251 252 / .78);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
:root[data-theme="dark"] .mission-panel.card-morph-glass {
  --mission-veil: rgb(20 42 55 / .82);
}
.mission-panel .mission-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  /* A real iPhone draws the playing video on its own GPU layer, which ignores overflow + border-radius and
     leaves square dark corners; a clip path and a mask make the photo and the film fill the rounded card. */
  clip-path: inset(0 round var(--r3, 24px));
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
  mask-image: radial-gradient(#fff, #000);
  transform: translateZ(0);
}
.mission-panel .mission-background img {
  display: block;
  position: absolute;
  inset: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  max-width: none;
  object-fit: cover;
  object-position: 65% 45%;
  filter: blur(.65px);
  opacity: 1;
}
.mission-panel .mission-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mission-veil);
  pointer-events: none;
}
@media (max-width: 700px) {
  :root .mission-panel.card-morph-glass { --mission-veil: rgb(245 251 252 / .82); }
  :root[data-theme="dark"] .mission-panel.card-morph-glass { --mission-veil: rgb(20 42 55 / .86); }
  .mission-panel .mission-background img { object-position: 70% 45%; }
}

/* Optional looping video (mission-video.js): same crop, blur and veil as the
   photo; the photo shows until the video is actually playing. */
.mission-panel .mission-background video {
  display: block;
  position: absolute;
  inset: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  object-fit: cover;
  object-position: 50% 22%;
  filter: blur(.65px);
  opacity: 0;
  transition: opacity .6s ease;
}
.mission-panel .mission-background.has-video video { opacity: 1; }
@media (max-width: 700px) {
  .mission-panel .mission-background video { object-position: 50% 25%; }
}
@media (prefers-reduced-motion: reduce) {
  .mission-panel .mission-background video { display: none; }
}