/* Motion is attached to the photograph, never the card or its text. */
.scroll-cinema-media {
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}

.code-edition .scroll-cinema-media > img,
.code-edition .scroll-cinema-media > picture > img,
.scroll-cinema-media > img,
.scroll-cinema-media > picture > img {
  transform: translate3d(0, var(--scroll-image-y, 0px), 0) scale(var(--scroll-image-scale, 1));
  transform-origin: center;
  backface-visibility: hidden;
}

.scroll-cinema-in-view > img,
.scroll-cinema-in-view > picture > img {
  will-change: transform;
}

/* The reading rail is decorative; article text always remains fully visible. */
.journal-reading-progress {
  visibility: hidden;
  pointer-events: none;
}

.scroll-cinema-ready .journal-reading-progress {
  visibility: visible;
}

.journal-reading-progress > span {
  display: block;
  width: 100%;
  height: 100%;
  background: #8be3b7;
  transform: scaleX(var(--article-progress, 0));
  transform-origin: left center;
}

.journal-chapter-line {
  width: 100%;
  height: 1px;
  margin-block: 0 30px;
  overflow: hidden;
  background: rgb(137 193 156 / 20%);
}

.journal-chapter-line > span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #4b9974, #a2ebc4);
  transform: scaleX(var(--chapter-progress, 0));
  transform-origin: left center;
}

.motion-paused .scroll-cinema-media > img,
.motion-paused .scroll-cinema-media > picture > img {
  transform: none !important;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cinema-media > img,
  .scroll-cinema-media > picture > img {
    transform: none !important;
    will-change: auto;
  }
}

@media print {
  .journal-reading-progress,
  .journal-chapter-line { display: none; }
  .scroll-cinema-media > img,
  .scroll-cinema-media > picture > img { transform: none !important; }
}