/* Native image painting is the default. JS loading/decode never hides a valid photo. */
.is-ui-image-frame {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 24% 20%,rgba(255,196,217,.16),transparent 35%),radial-gradient(circle at 78% 76%,rgba(186,222,239,.18),transparent 38%),#f4f2f1;
}
.ui-image { position:relative; z-index:1; opacity:1; visibility:visible; }
.ui-image.is-ui-image-loading { opacity:.98; visibility:visible; }
.ui-image.is-ui-image-priority { transition:opacity var(--motion-fast,140ms) var(--ease-soft,ease-out); }
.ui-image.is-ui-image-ready { opacity:1; visibility:visible; }
.is-ui-image-error-frame[data-ui-image-unavailable="true"]::after {
  content:"写真を読み込めませんでした";
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:18px; font-size:12px; line-height:1.7; color:#7b858c; text-align:center; z-index:2;
}
/* This state requires actual native failures, including the explicit placeholder. */
.ui-image.is-ui-image-error[data-ui-image-state="unavailable"] { opacity:0; visibility:hidden; }

/* Static cards do not need 3D backfaces or a compositor layer per photograph. */
.therapist-mini-visual[data-photo-count="1"] .therapist-mini-photo {
  position:relative; inset:auto; opacity:1; transform:none !important;
  backface-visibility:visible; transition:none !important; will-change:auto;
}
@media(prefers-reduced-motion:reduce) { .ui-image { transition:none !important; } }

/* A one-use, prepared portrait is present before detail markup is first painted. */
html[data-detail-entry="prepared"] .therapist-detail-main {
  background-image: var(--detail-entry-photo);
  background-size: cover;
  background-position: var(--detail-entry-position, center 18%);
}
html[data-detail-entry="prepared"] .therapist-detail-main > img[src*="therapist-placeholder.svg"] { opacity:0 !important; }
.therapist-detail-main > img[data-detail-photo-pending] {
  position:absolute; inset:0; width:100%; height:100%; z-index:2;
  opacity:0 !important; transition:none !important; pointer-events:none;
}
.therapist-detail-main > img[data-detail-photo-pending="ready"] { opacity:1 !important; }
