:root{
  --left-offset: 12px;
  --container-width: 80px;   /* adjust to fit your subject image width */
  --container-height: 120px; /* adjust to fit your subject image height */
  --transition-duration: 320ms;
}


.filler p, .repeats p{
  margin: 16px 0;
}

/* Subject container positioned absolutely in the document when visible.
   Initially it is off-canvas (translateX) and not visible. */
.subject-container{
  position: absolute;        /* will be locked to a document Y when it first appears */
  left: var(--left-offset);
  top: 0;                    /* top will be set inline by JS when appearing */
  transform: translate(-120%, -50%); /* off-screen left, vertically centered by translateY */
  width: 250px;
  height: 430px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-duration) cubic-bezier(.2,.9,.2,1), opacity var(--transition-duration) ease;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
}

/* When visible: slide in from left; keep the top (document position) unchanged. */
.subject-container.visible{
  transform: translate(0, -50%);
  opacity: 1;
  pointer-events: auto;
}

/* Image styling */
.subject-container img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* change to 'contain' if you prefer full-image visible */
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  user-select: none;
  -webkit-user-drag: none;
}

/* Slight scale on hover when visible */
.subject-container.visible:hover{
  transform: translate(0, -50%) scale(1.03);
}

/* Hide on small screens (optional) */
@media (max-width:800px){
  .subject-container{
    height: 350px;
    width: 150px;
  }
}