/* Progressive journal choreography: directional essays and an unfolding monthly archive. */
html.oe-journal-motion body.journal-page .journal-intro h1 {
  transform: translate3d(0, var(--oe-intro-shift, 0px), 0) scale(var(--oe-intro-scale, 1));
  transform-origin: left top;
  will-change: transform;
}

html.oe-journal-motion body.journal-page .journal-section-heading h2 {
  clip-path: inset(0 var(--oe-heading-mask, 0%) 0 0);
}

html.oe-journal-motion body.journal-page .journal-writing .journal-essay figure a {
  clip-path: inset(0 var(--oe-essay-mask, 0%) 0 0);
}
html.oe-journal-motion body.journal-page .journal-writing .journal-essay:nth-child(2) figure a {
  clip-path: inset(0 0 0 var(--oe-essay-mask, 0%));
}
html.oe-journal-motion body.journal-page .journal-writing .journal-essay:nth-child(3) figure a {
  clip-path: inset(0 0 var(--oe-essay-mask, 0%) 0);
}
html.oe-journal-motion body.journal-page .journal-writing .journal-essay figure img {
  transform: rotate(var(--oe-essay-angle, 0deg)) scale(var(--oe-essay-scale, 1));
  transition: transform .35s ease-out;
  will-change: transform;
}
html.oe-journal-motion body.journal-page .journal-writing .journal-essay-copy {
  opacity: var(--oe-essay-copy-opacity, 1);
  transform: translate3d(var(--oe-essay-copy-x, 0px), 0, 0);
}

html.oe-journal-motion body.journal-page .journal-student figure {
  transform: perspective(900px) rotateY(var(--oe-student-turn, 0deg))
    rotateZ(var(--oe-student-angle, 0deg)) scale(var(--oe-student-scale, 1));
  transform-origin: 50% 5%;
  will-change: transform;
}
html body.journal-page .journal-student img {
  height: clamp(280px, 30vw, 420px) !important;
  aspect-ratio: auto;
  object-fit: contain;
}
html.oe-journal-motion body.journal-page .journal-student > div {
  clip-path: inset(0 0 var(--oe-student-copy-mask, 0%) 0);
}

html body.journal-page .journal-essay figure a:focus-visible,
html body.journal-page .journal-student figure a:focus-visible {
  clip-path: none !important;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.oe-journal-motion body.journal-page .journal-essay figure a:hover img {
    transform: rotate(0deg) scale(1.025);
  }
  html.oe-journal-motion body.journal-page .journal-student figure a:hover img {
    transform: scale(1.035);
  }
}

@media (max-width: 620px) {
  html body.journal-page .journal-student img { height: min(90vw, 440px) !important; }
  html.oe-journal-motion body.journal-page .journal-intro h1 { transform: none; }
  html.oe-journal-motion body.journal-page .journal-writing .journal-essay-copy {
    transform: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.journal-page .journal-main :is(h1, h2, figure, figure a, figure img, .journal-essay-copy, .journal-student > div) {
    clip-path: none !important;
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
    will-change: auto !important;
  }
}