/* Portrait photo fade -- the ONE definition, shared by every page that draws a
   template portrait: create.html (family designer), login.html (partner editor,
   review panel, keepsake capture) and memorial.html. Both copies of the render
   engine add class obituary-photo to each portrait img (initPhotoDrag /
   applyPhotoTreatment); this file is what makes that class do something. It
   used to live inline in create.html only, so the partner side never faded. */

/* ═══ Portrait photo treatment — CSS mask-image fade ════════════════════
   TOP FADE: starts at 55% opacity, not 0. It used to run from fully
   transparent at the top edge down to solid at 21%, which dissolved the
   top of anyone whose head reached the top of the frame -- a forehead
   would blend into the background art and read as a cut-off head. The
   blend into the plate still happens, it just no longer erases.
   Usage: add class="tpv-photo-wrap" to the immediate photo container div.
   The JS utility applyPhotoTreatment(el) adds .obituary-photo to the img.
   initPhotoDrag(img) also adds .obituary-photo directly on load.          */
.tpv-photo-wrap {
  overflow: visible !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  position: relative;
}
img.obituary-photo {
  -webkit-mask-image:
    radial-gradient(ellipse 100% 100% at 50% 50%, black 0%, black 38%, rgba(0,0,0,0.5) 72%, transparent 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.88) 9%, black 18%),
    linear-gradient(to top, transparent 0%, rgba(0,0,0,0.75) 16%, black 39%),
    linear-gradient(to right, transparent 0%, rgba(0,0,0,0.65) 9%, black 20%),
    linear-gradient(to left, transparent 0%, rgba(0,0,0,0.65) 9%, black 20%);
  mask-image:
    radial-gradient(ellipse 100% 100% at 50% 50%, black 0%, black 38%, rgba(0,0,0,0.5) 72%, transparent 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.88) 9%, black 18%),
    linear-gradient(to top, transparent 0%, rgba(0,0,0,0.75) 16%, black 39%),
    linear-gradient(to right, transparent 0%, rgba(0,0,0,0.65) 9%, black 20%),
    linear-gradient(to left, transparent 0%, rgba(0,0,0,0.65) 9%, black 20%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}