/* ============================================================
   Composed scenes from the real uploaded art library.

   When a lesson references a one-off scene that has not been exported yet,
   src/ui/illustration.js builds it from the uploaded location plate and cast
   poses that DO exist. These rules place those layers inside the frame.

   Layer order (all inside .illus, which is the positioning context):
     0  .illus-ph        loading tint, fades out
     1  .scene-bg        the location plate, cover-cropped
     2  ::after          a whisper of a veil for silhouette contrast
     3  .scene-person    transparent cast poses, standing on the floor line
   ============================================================ */

.illus.is-composite {
  background: rgba(255,255,255,.72);
}

.illus .illus-composite {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 14%, rgba(255,255,255,.76), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.44), rgba(255,255,255,.12));
}

/* The reusable environments are deliberately wide. Cover the frame so the
   lesson gets a proper scene rather than a small image floating in whitespace. */
.illus .illus-composite .scene-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.94) brightness(1.02);
}

/* A very light veil keeps cast silhouettes readable on busy environments. */
.illus .illus-composite::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255,255,255,.04),
    rgba(255,255,255,.02) 48%,
    rgba(22,18,64,.07));
}

.illus .illus-composite .scene-person {
  position: absolute;
  z-index: 3;
  bottom: -2%;
  width: auto;
  max-width: 52%;
  height: 88%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 14px 18px rgba(30,24,74,.14));
}

.illus .illus-composite .scene-person-left  { left: 4%; }
.illus .illus-composite .scene-person-right { right: 4%; transform: scaleX(-1); }

/* One-character scenes should feel intentional rather than left-heavy. */
.illus.is-solo .illus-composite .scene-person-left {
  left: 50%;
  max-width: 70%;
  transform: translateX(-50%);
}

/* With no location plate the character carries the whole frame, so give it
   more room and let the glass background behind it do the work. */
.illus.is-composite:not(:has(.scene-bg)) .illus-composite .scene-person {
  height: 94%;
  max-width: 60%;
}

/* Portrait lesson art needs a tighter crop and a slightly larger character. */
.illus[data-orient="portrait"] .illus-composite .scene-person {
  height: 78%;
  bottom: -1%;
  max-width: 58%;
}
.illus[data-orient="portrait"] .illus-composite .scene-person-left  { left: 1%; }
.illus[data-orient="portrait"] .illus-composite .scene-person-right { right: 1%; }
.illus[data-orient="portrait"].is-solo .illus-composite .scene-person-left {
  left: 50%; max-width: 82%; height: 84%;
}

/* Small vocabulary cards still show the real image, but keep the cast inside
   the card instead of letting two figures crowd the word underneath. */
.illus[data-orient="square"] .illus-composite .scene-person { height: 84%; max-width: 56%; }
.illus[data-orient="square"] .illus-composite .scene-person-left  { left: -1%; }
.illus[data-orient="square"] .illus-composite .scene-person-right { right: -1%; }
.illus[data-orient="square"].is-solo .illus-composite .scene-person-left {
  left: 50%; max-width: 80%;
}

/* Wide culture strips crop tightly; keep heads inside the frame. */
.illus[data-orient="wide"] .illus-composite .scene-person { height: 98%; }

@media (max-width: 620px) {
  .illus .illus-composite .scene-person { height: 84%; }
}

@media (prefers-reduced-motion: reduce) {
  .illus-ph { transition: none; }
}